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.
Any other name for the contact us page?
How to create a contact us form without HTML? (METHOD 1)
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
- No need to be an HTML Expert.
- Make contact us form without any third party.
- Secure, Safe, and fast.
- 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.
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.
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.
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".
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
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.
you have to create a blank page don't write anything there switch your page "Compose view" to "HTML View".
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.
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.
Switch to "HTML view", copy the code and past.
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
Post a Comment