How to Add & Create Contact Us Form in Blogger
If you have recently started your blog or already have a blogger website running earlier and you want to add a Contact Us Page to your blog to help the visitors of your blog or blogger website to get in touch with you so that can share their thoughts or issues with you then you are at the right place. Today you will be developing your own Contact Form for your blog or website in some quick steps. So lets start.
When I started my website I myself faced a lot of issues in setting up a Contact Form for my site. I also tried many forms of coding, out of which some were useless while others doesn't have a cool interface they were too old fashioned to be used on a new blog or website.
If you are also dealing with the same problems and if you have also downloaded some coding which is not working for you and any other questions which might be coming in your mind such as, How to add a Contact Form in blogger, my Contact Form not working what to do, how to create a sidebar Contact Form gadget and many other questions, then today you will be smiling after using these steps which I know will 100% work for you as I also tried the same steps for adding a contact form for many of successful websites.
So, I am pretty sure the same will work for your blog or blogger website as well. Today I will be providing you the HTML coding for adding Contact Form to your site which will be connected to your E-mail as well so that it will send you an E-mail message every time some makes a query on your Contact Us page. Moreover if you do not wish to create a page for your site you can also use Contact Form Gadget which will be showing on the sidebar of every page of your blogger or blogging website. To do this all you need is, just to Copy and Paste some HTML codes in your blog or blogger website. So, lets get started now.
How to Add Contact Us Form or Contact us Sidebar Widget in you blog or blogger website:
Here are some quick steps that you just need to do in your blogger account to create a Contact Form in Contact Us Page or a Contact Us Form sidebar Widget. So let's start:
1. First of all, you need to open your blogger account by signing in. After signing in to you your blogger account click on the Layout tab, then click on the edit + Add a Gadget button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
2. By clicking on the + Add a Gadget button, a dialog box appears in which you need to select the Contact Form option as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
3. On clicking the Contact Form option, a dialog box appears showing the text Contact Form in the Title Box. Now you have to simply save it by clicking on the Save button as shown in the image below.
4. After Saving it click on the View blog to view your blog, as shown in the image below.
5. You will now find a Contact Form Gadget in the side bar of your blog or blogger website as shown in the image below.
6. Now you got a working Contact Form Gadget in your side bar. If you wanted a side bar Contact Form Gadget only then that's all for you.
But if you also a want a dedicated support or Contact Us Page containing this kind of a from Contact Form then you need to follow some more steps as illustrated below.
7. Now, you need to click on the Theme tab, then click on the Edit HTML button as shown in the image below.
8. By clicking on the Edit HTML button, the following type of coding screen appears where you will find the <head> tag as shown in the image below.
9. Now you need to copy & paste the Contact Us Form HTML Code 1 from the coding file that is available to download at the end of this post. From this file you need to copy the Contact Us Form HTML Code 1 as shown in the image below.
10. Now you have to paste this code above the <head> tag on the screen. After pasting the Contact Us Form HTML Code 1 from the coding file above the <head> tag on the screen. You have to click on the Save theme button and after saving your theme successfully, then you have to click on the Pages tab as shown in the image below.
11. Now, you need to create a Contact Us Form Page for your blog or blogger website, for that you need to click on the New Page tab as shown in the image below.
12. Now give this page a title, as Contact Us and then click on the HTML button as shown in the image below.
13. By clicking on the HTML button, the following type of screen appears which might be containing this type of HTML code as shown in the image below.
15. You need to select this HTML code as shown in the image above and now you have to replace this HTML code with the Contact Us Form HTML Code 2 from the coding file that is available to download at the end of this post. From this file you need to copy the Contact Us Form HTML Code 2 as shown in the image below.
16. And paste this Contact Us Form HTML Code 2 code in place of the previously selected HTML code and then you have to click on the Compose button as shown in the image below.
20. If you have done all the steps in the same manner as I have had shown above then you will definitely have a Contact Us Form Page by now. But if you still facing any problems then you can contact me or comment down in this post.
Also, if you only want a Contact Us Form Page only don't want the Contact Form Gadget in your side bar which we have added with this form and you want to hide it. Then you can do these steps to hide the Contact Form Gadget in your side bar.
21. You again need to click on the Theme tab, then click on the Edit HTML button as shown in the image below.
22. By clicking on the Edit HTML button, the following type of coding screen appears button. Now you have to click anywhere in coding area then press Ctrl+F. On pressing Ctrl+F a search box appears on the top right corner of the coding area as shown in the image below. In this search box you need to type ]]></b:skin> and then press the Enter key as shown in the image below.
23. After pressing the Enter key you will find a screen highlighting the ]]></b:skin> code as shown in the image below.
24. Now all you need to do, is to copy this Hide Contact Form Gadget HTML Code as shown in the image below.
25. And then Paste this Hide Contact Form Gadget HTML Code above this ]]></b:skin> code and then you have to click on the Save theme button and after saving your theme successfully, then you have to click on the View blog button as shown in the image below.
26. Now you will find that the Contact Us Form Gadget has been disappeared from the side bar of your blog or blogger website as shown in the image below.
These were some of the steps that you can follow to successfully Create a Contact Us Form Page, Contact Us Form Widget or both in your blog or blogger website. This is the best technique to Create a Contact Us Form Page, Contact Us Form Widget or both for your blog or blogger website. I tried to explain you the entire process in the simplest possible manner. Now if you are successfully able to do it within your blog or blogger website then you can just comment thanks. But if you still have any problems or queries related to the topic How to Create and Add Contact Form in Blogger then, you can ask your doubts by commenting on the post or contact us page of our website. Also, here is one more article on How to Disable Copy and Paste Option in Blogger to save you content from getting copied which you can go through.
 |
| How to Create and Add Contact Form in Blogger |
4. After Saving it click on the View blog to view your blog, as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
6. Now you got a working Contact Form Gadget in your side bar. If you wanted a side bar Contact Form Gadget only then that's all for you.
But if you also a want a dedicated support or Contact Us Page containing this kind of a from Contact Form then you need to follow some more steps as illustrated below.
7. Now, you need to click on the Theme tab, then click on the Edit HTML button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
8. By clicking on the Edit HTML button, the following type of coding screen appears where you will find the <head> tag as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
9. Now you need to copy & paste the Contact Us Form HTML Code 1 from the coding file that is available to download at the end of this post. From this file you need to copy the Contact Us Form HTML Code 1 as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
10. Now you have to paste this code above the <head> tag on the screen. After pasting the Contact Us Form HTML Code 1 from the coding file above the <head> tag on the screen. You have to click on the Save theme button and after saving your theme successfully, then you have to click on the Pages tab as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
11. Now, you need to create a Contact Us Form Page for your blog or blogger website, for that you need to click on the New Page tab as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
12. Now give this page a title, as Contact Us and then click on the HTML button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
13. By clicking on the HTML button, the following type of screen appears which might be containing this type of HTML code as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
15. You need to select this HTML code as shown in the image above and now you have to replace this HTML code with the Contact Us Form HTML Code 2 from the coding file that is available to download at the end of this post. From this file you need to copy the Contact Us Form HTML Code 2 as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
16. And paste this Contact Us Form HTML Code 2 code in place of the previously selected HTML code and then you have to click on the Compose button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
17. You will find a Contact Form in this screen. Now click on the Publish button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
18. After Publishing it, click on the View button to view the Contact us Form page that you have just published, as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
19. You will now find a this type of Contact us Form page on your blog or blogger website which will now send you all the updates every time whenever someone will contact you.
 |
| How to Create and Add Contact Form in Blogger |
20. If you have done all the steps in the same manner as I have had shown above then you will definitely have a Contact Us Form Page by now. But if you still facing any problems then you can contact me or comment down in this post.
Also, if you only want a Contact Us Form Page only don't want the Contact Form Gadget in your side bar which we have added with this form and you want to hide it. Then you can do these steps to hide the Contact Form Gadget in your side bar.
21. You again need to click on the Theme tab, then click on the Edit HTML button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
22. By clicking on the Edit HTML button, the following type of coding screen appears button. Now you have to click anywhere in coding area then press Ctrl+F. On pressing Ctrl+F a search box appears on the top right corner of the coding area as shown in the image below. In this search box you need to type ]]></b:skin> and then press the Enter key as shown in the image below.
You can't copy the above ]]></b:skin> code from here as I have disabled the copy paste option on my website so you need to type this by yourself. Also if you also want to learn how to Disable Copy Paste Option in your blog or blogger website then you can read my article on How to Disable Copy and Paste Option in Blogger to save you content from getting copied.
 |
| How to Create and Add Contact Form in Blogger |
23. After pressing the Enter key you will find a screen highlighting the ]]></b:skin> code as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
24. Now all you need to do, is to copy this Hide Contact Form Gadget HTML Code as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
25. And then Paste this Hide Contact Form Gadget HTML Code above this ]]></b:skin> code and then you have to click on the Save theme button and after saving your theme successfully, then you have to click on the View blog button as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
26. Now you will find that the Contact Us Form Gadget has been disappeared from the side bar of your blog or blogger website as shown in the image below.
 |
| How to Create and Add Contact Form in Blogger |
These were some of the steps that you can follow to successfully Create a Contact Us Form Page, Contact Us Form Widget or both in your blog or blogger website. This is the best technique to Create a Contact Us Form Page, Contact Us Form Widget or both for your blog or blogger website. I tried to explain you the entire process in the simplest possible manner. Now if you are successfully able to do it within your blog or blogger website then you can just comment thanks. But if you still have any problems or queries related to the topic How to Create and Add Contact Form in Blogger then, you can ask your doubts by commenting on the post or contact us page of our website. Also, here is one more article on How to Disable Copy and Paste Option in Blogger to save you content from getting copied which you can go through.
Also, if you want to remain updated with these kind of tech tips and tricks. You can subscribe to our newsletter for free. I hope you liked the information that I've shared today with you. For more tech articles like this just Stay Connected Here with us at TechWishlist ...!!!
0 comments:
Post a Comment
Spam comments won't be published.