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 which can help your business to resolve problems and be better than it was, Contact us page is also important if you want an Adsense account because of Google's Term&Conditions Pages like Contact Us, Privacy Policy, Disclaimer, About us and Site map are really important some people also say that these pages increase your authority which is good for the long term, and These pages also good for your SEO.

Most of you guys are searching terms like 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 product 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 questions.

Your form is compleated 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 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

What are PCBs? || How do PCBs Work?

How do PCBs Work? By: Branch Education 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 fields length of wire that fit 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 w

Event Blogging: Free Guide To Create a Amazing Event Blog and Make $10K Every Week

Event Blogging is a Short and easy method to Earn money in a short span of time, it helps user or content creater. Mostly event blogging is based on a Up-comming Event Like a sport event or a Festival like New year, Christmas and etc. Overview of Event Blogging What is Event Blogging? Career Opportunities In Event Blogging? What is Micro-Nich Blog? How to chose event blog niche and which niche is best for you? Which niche is most profitable? How to make money through a event blog? How to find the right keyword? Purchasing a domain for event blog? How to setup a event blog? How to write content for event blog? How to make quality backlinks? Overview of Event blogging. Event blogging  is a work of few days or weeks the aim is to grab  Thousands  of visitors in a day or in a week the blog is related to an event (eg. New Year) this is called an Event Blogging. More Example: (Christmas)                          (Diwali)                          (Valentines week)                          (ho

Explained: why India had such an affordable internet?

Hi, guys last night I was thinking when I was using my phone and suddenly a question arrived in my mind that's why the Internet is so cheap in India if you see in past around 5 years ago the Internet is so expensive that time but what happened in these 5 years and how today's Internet became so affordable. Why India has so cheap Internet? In this year when a new telecom company arrives known as jio it makes a massive changes in the Internet and the calling services in the starting days jio has charging 0 rupees for the Internet and the calling its mean till 6 months jio has given their customer free Internet and calling service and if you are using Internet right now and reading this article so you can also thanks to jio because jio make a massive change in the the industry of Telecom by there so affordable plans and the other companies like Vodafone, Idea, Airtel theses also drop there plans up to 60% and I don't know but I think India has the cheapest internet prices in t