Skip to main content

How To Create Stylish and Responsive "Contact Us" Page In 2021

Contact Us page is really important if you're a blogger, it helps your audience and sponsors to contact you and Give you Feedback that can help your business to resolve problems and be better than it was, Contact us page is also important if you want an Ad-sense account because of Google's Term&Conditions.

like Contact Us, Privacy Policy, Disclaimer, About us, and Sitemap are really important some people also say that these pages increase your authority which is good for the long term, and These pages are also good for your SEO.

Most of you guys are searching terms like the Contact us page on the website, Generate contact us for the blog, How to make contact us page, Contact us template.

In this article I am will show you how you can create your own Stylish and Responsive Contact us page, I used 2 methods to create an amazing contact us page you can use any of them you like the most, feel easy, and comfortable.


What is a "Contact us" page?

Any other name for the contact us page?

How to create a contact us form without HTML? (METHOD 1)

Method #2 Using HTML Code

Conclusion


What is a "Contact Us" Page?

Contact us Page is a part of your website, it helps users and organizations to reach to you and talk to you in person, When people want to review your content or product they can comment on your page but if they want to talk to you in person and wanted to give you a Feedback about your site then can visit "Contact us" Instead of doing comment.

Any other name For the Contact us Page?

Most blogger or Website owners use "Contact us" but you can also use Terms like Talk to us, Contact, Reach us, Visit us, etc. use a term that is easy to understand for your user.

How to Create a Contact Form without HTML?

Making a contact form is a bit difficult and especially when you are dealing with HTML codes it makes the whole process more hard and complicated but still, we have lot's of ways to make this process easier and simple, you really no need to be an HTML expert, by following given steps you can easily create a stylish and customizable contact form for your blog. it's totally secure, easy, and simple because we are using a google product to make a contact form, So let's learn how you can create a Contact form without using any third-party service or HTML Code.

Advantages of Method #1

  1. No need to be an HTML Expert.
  2. Make contact us form without any third party.
  3. Secure, Safe, and fast.
  4. It is a Google product.

Using Google Drive.

Open your Google Chrome Browser. On the right side, you can see a square formed by 9 dots.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



Click on it and you can see all google products there Open Google Drive. Click on "My drive" at the bottom you can spot an option called "Google forms" if you can't see it click on the "More" and then you can see the "Google forms" option.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



In the "Google forms" option there is also 2 sub-option present there one is "Blank Form" and the second is "From a Template" I will teach you about both options but now we're creating a new and fresh Form so I am using "Blank form" option.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



A new page has open after choosing any one option, there you can see a title that is by default Untitled right now change it as "Contact us".



Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror


Now you have to add questions like Name, E-mail, and Comment, You can also see a "required" option there you have to on it for the compulsory question like comment if you won't make it on any buddy can send you a question without writing a comment which is not a good thing. Make required questions like Email, Name, and comment is a good step to avoid spam comments

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



Use the "Add" option to add more than one question.

Your form is completed now click on the "send" button, you have many options like send via email or URL but we will use Embedded HTML CODE don't worry you just have to copy and paste this code not much it is very easy.

Before you do all this go to your blogger dashboard>Pages and create a contact us page I have also added images here so you can easily understand.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



you have to create a blank page don't write anything there switch your page "Compose view" to "HTML View".

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



Copy the code and past it on the "HTML VIEW", Preview your post to verify that everything is correct and done. Your contact form has been created successfully.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror






Now you might be thinking that if someone contacts me where the email will go? you can see all your contact form messages on the Google drive form section.


Method #2 Using HTML Code.


Many of you guys are thinking that now we have to do some coding work which is gonna be hard. oh yes, we are about to do some coding work but trust me it is not much hard, you just need to change some elements from the code, elements like Site name and email. 

Go to Blogger's Dashboard>Pages> +New page.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror




Switch to "HTML view", copy the code and past.

Create Stylish and Responsive "Contact Us" Page/Form For Free - TechConqueror



HTML CODE -

 <form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style><div><a href="https://Techconqueror.blogspot.com/"><span style="color: white;">Techconqueror</span></a></div>  


Change few details and check everything is good.

Publish the page.

Every Message form Contact us form will be sent to you E-mail automatically.





Conclusion

In this article, we have learned "how you can create your own contact us page" I tried to make this article simple and easy to understand. we have discussed 2 methods to make a responsive and stylish contact us page if you have any problem regarding this post so you can comment, visit the contact us page or ask us on our social media platform we will try to answer you as soon as possible. Comment below and tell me what do you like the most and does this article helps you in your blogging career.

Comments

Popular posts from this blog

How To Make HTML & XML Sitemaps For Blogger And WordPress

Introduction Whenever we are creating a site there are few things that should be on your webpage. There are pages that can increase your SEO and help your users to understand better about you and your site. Pages like About Us, Disclaimer, Privacy policy, Cookie policy, Contact Us and Sitemap are very important nowadays. These pages are also important for SEO and Adsense. In this article we will only learn about "Sitemap", How we can make an HTML Sitemap? and What is the difference between HTML & XML Sitemap? and many more. WordPress makes this process easier, but in Blogger we have to do almost everything on our own. Making Sitemap in Blogger is not an easy task but it's not very hard too Just complicated. Follow the given steps. I will suggest you read the entire article for a better understanding of everything related to HTML & XML Sitemaps. Audio file of the page by Techconqueror: Your browser does not support the au

The Ultimate Guide On SEO To Rank #1 - TechConqueror

SEO ( Search engine optimization ) is getting harder day by day. There is a lot of things new bloggers forget to do while preparing an article. These mistakes will never help you to rank your article on Google's search results. I am a blogger and in the journey of years in this field, I gathered lots of experience. I want to share some of my experiences that will help you a lot to rank your article and improve your site performance. these tips are not too hard to follow but some things in this article will consume some of your time. Half knowledge is always a disaster, read the complete article to achieve the best results. Audio file of the page by Techconqueror: Your browser does not support the audio element. > What is SEO? > Types of SEOs? > SEO Techniques to Improve site Rankings and User experience. > Free SEO Tools > FAQs of SEO > Conclusion What is SEO? SEO (Search engine optimization) is a pr

What are PCBs? || How do PCBs Work?

How do PCBs Work? That smartphone your holding has over 110 meters or about 360 feet of wires inside of it. That’s what it takes to combine a camera, speaker, display, wifi, antenna, GPS, battery, fingerprint sensors, dozens of microchips, and many more components, into a single device and have all the components work seamlessly together.  There is one football field's length of wire that fits rather comfortably in that smartphone of yours. But wait, where are all of these wires? Enter the printed circuit board or PCB. You’ve probably seen a circuit board like this one and it might have been green- not blue but, what you may not know is this circuit board is really a multilayered labyrinth of hundreds of copper wires.  This PCB provides structure and organization for all the components to be mounted on the surface, while wires in the middle allow each of the components to communicate and work together.  So, then what’s inside the printed circuit board and how does it work? First,