How To Create Contact Us Page (Add Contact Form) in Blogger
It is not an easy task to add contact us form in Blogger because it not supported any plugins like wordpress.
Most of the bloggers use third-party sites like jotform, 123contactform, etc,. to create contact form for their blogspot (Blogger) site.
Here you will learn how to add official contact us page in blogger with a premium stylish look.
As I mentioned above that you can also create the contact form using third party form creator but the official blogger contact form is far better than those third party forms.
The Advantage of Using Official Blogger Form:
- It is super fast. You will get the message as soon as some one send.
- 100% deliverable
- You can customize the design as you want, if you have knowledge of CSS.
- The entire contact page is not reloaded after sending the message.
I have divided the tutorial of add Blogger official contact form to contact us page into three parts. It is very important to follow all the steps mentioned below, otherwise the contact form will not work perfectly.
Part 1: Adding Contact Form Gadget
In this part we are going to add the contact form gadget to the Blogger website. For that follow the steps given below.
Step 1: Log in to your Blogger Account. Now click on Layout from left sidebar to get an option to add gadgets to the site.
Step 2: Now you can see Add a Gadget option anywhere on the Layout page. Click on Add a gadget and a new popup window will be opened having a list of gadgets. (You can add anywhere of your blog because we will hide it on second part so it will not affect your blog design or look)
Step 3: Scroll down the gadget list and you will see the Contact Form widget. Click on it, again click on Save.
Done , you have successfully add contact form gadget to the blog and completed the part one. Now follow the part 2.
Part 2: Hiding Contact form Gadget
In this part we are going to hide the contact form gadget which we added in part 1, because we don’t need this gadget on our site. We only want the contact form on the contact us page.
Step 1: Click on Theme and again click on the Down-arrow beside CUSTOMIZE.
Step 2: Click on Edit HTML
Step 4: Now find ]]></b:skin> within the html codes. For that first click anywhere of the code and click CTRL+F ,now you will see the search option. Now type or paste ]]></b:skin> and hit Enter and add the following code above it.
Step 5: Now save the theme.
Well done, you have successfully hide the contact form gadget from your site. (Still it will be appeared on Layout but not show in the Live Site)
Important: Do not remove Contact Form gadget From the Layout.
Part 3: Create Contact Us Page
It is the final part of adding contact form to contact us page. Here i provided two contact form one is simple and another is premium looking stylish contact form.
Step 1: Go to the Pages and click on New Page
Step 2: Give the page name as Contact us or Contact and Disable Commenting.
Step 3: Switch to the HTML mode. Now Select any form design from the below. Copy the code and paste to your Contact Page.
Simple Design Blogger Contact Form Code
<!-- DON'T CHANGE ANYTHING IN THE CODE IF YOU HAVE ZERO KNOWLEDGE OF CSS-->
<!-- Contact Form Code --><br />
<style>
#etechduniya {max-width: 450px; height: fit-content; padding: 10px 10px 60px; margin-left: auto; margin-right: auto; border: 2px solid #ebeded; border-radius: 12px;}
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 0;background: #34e1eb; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: black; color: #fff;}
</style><br /><div id="etechduniya">
<!--
https://etechduniya.com
-->
<div class="contact-form-widget page-contact-form"><div class="form"><form name="contact-form">Name:<br />
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
E-mail: <span id="required">*</span><br />
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
Message: <span id="required">*</span><br />
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
<br />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div><br /></div>
<!-- End Contact Form Code -->
 |
| Simple Blogger Contact Form |
Stylish Premium looking Blogger Contact Form Code
<!--please don't change anything-->
<!-- ----------------------------------------------------
Blogger Contact form:
Customized and designed by eTechDuniya
Website: https://www.etechduniya.com/
How to Create Blogger Contact us Page: https://www.etechduniya.com/2020/11/create-blogger-contact-form-page.html
--------------------------------------------------- -->
<script type="text/javascript">
<!--
eval(unescape('%66%75%6e%63%74%69%6f%6e%20%6a%33%66%39%33%30%32%32%65%36%63%28%73%29%20%7b%0a%09%76%61%72%20%72%20%3d%20%22%22%3b%0a%09%76%61%72%20%74%6d%70%20%3d%20%73%2e%73%70%6c%69%74%28%22%31%33%32%33%30%30%30%37%22%29%3b%0a%09%73%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%30%5d%29%3b%0a%09%6b%20%3d%20%75%6e%65%73%63%61%70%65%28%74%6d%70%5b%31%5d%20%2b%20%22%35%33%36%33%30%36%22%29%3b%0a%09%66%6f%72%28%20%76%61%72%20%69%20%3d%20%30%3b%20%69%20%3c%20%73%2e%6c%65%6e%67%74%68%3b%20%69%2b%2b%29%20%7b%0a%09%09%72%20%2b%3d%20%53%74%72%69%6e%67%2e%66%72%6f%6d%43%68%61%72%43%6f%64%65%28%28%70%61%72%73%65%49%6e%74%28%6b%2e%63%68%61%72%41%74%28%69%25%6b%2e%6c%65%6e%67%74%68%29%29%5e%73%2e%63%68%61%72%43%6f%64%65%41%74%28%69%29%29%2b%39%29%3b%0a%09%7d%0a%09%72%65%74%75%72%6e%20%72%3b%0a%7d%0a'));
eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%6a%33%66%39%33%30%32%32%65%36%63%28%27') + '%35%19%2d%26%11%3d%64%60%68%5e%59%6b%11%3b%67%60%66%11%3d%64%5e%5f%11%27%24%33%35%58%60%15%20%32%06%04%30%6c%68%70%65%5a%34%0d%03%11%10%27%59%68%5a%59%5f%5d%6a%64%69%72%5e%23%58%63%67%74%5e%66%63%6d%25%63%62%77%5b%33%12%2b%21%64%6f%72%02%00%1e%15%23%5b%69%59%59%59%58%6c%63%66%71%51%26%5c%67%6b%77%5c%5a%63%5e%59%6d%30%1e%2e%2a%60%6d%37%14%68%63%5b%6d%59%30%1e%2e%2a%60%6d%37%14%5f%5b%5a%64%58%68%6f%6e%63%5c%26%5f%65%65%65%69%37%11%58%6a%6e%5a%35%15%5c%65%6f%58%5c%6f%22%68%51%59%66%6b%68%34%14%2a%24%1c%34%11%65%51%6b%58%67%67%21%60%5a%5e%6b%37%11%59%65%69%60%35%15%61%5b%6f%5d%60%63%22%68%69%5c%59%6c%33%12%5b%6a%68%66%34%11%58%51%58%64%59%6b%63%6f%63%58%24%66%62%59%57%5e%37%10%61%65%66%5a%5b%69%22%58%68%51%59%66%5b%67%6e%1c%21%58%5c%58%25%16%13%58%2d%2f%2d%5d%2f%25%14%1a%5b%2d%5c%51%2c%5d%27%30%71%07%07%14%17%23%5a%6a%55%58%59%5c%6e%60%63%76%5b%24%59%5a%73%50%5a%5c%65%5c%6c%65%6a%66%5b%22%5c%67%6a%64%6f%36%15%6c%5f%5d%31%17%68%66%5a%62%5d%37%10%2a%22%24%1a%31%17%59%5a%61%57%5d%6d%36%15%29%24%61%6c%32%11%5f%67%60%59%5a%6e%26%6c%5b%5d%63%6c%6c%37%16%21%2b%61%68%30%71%07%07%14%17%23%5c%67%6c%69%5e%5d%69%21%5e%60%6a%64%22%63%59%6d%5e%11%75%5b%63%6a%5d%5f%69%22%6f%59%52%62%6a%6d%33%12%33%61%6c%74%02%07%16%1e%27%5c%61%67%6e%5b%5c%68%24%5b%60%68%6d%26%5a%63%5a%65%60%11%71%59%60%6f%5a%55%6b%22%6e%5a%5e%63%6a%69%31%11%36%66%66%76%02%06%15%12%26%5c%65%65%6d%5e%5b%62%26%5b%61%6b%61%27%5a%67%58%66%65%25%6d%5e%6c%6d%5a%5b%5f%11%71%59%60%6f%5a%55%6b%22%6e%5a%5e%63%6a%69%31%11%36%66%66%76%02%06%27%5f%65%63%68%58%5c%6d%25%54%64%6f%63%26%5c%6f%6d%68%66%63%22%6b%65%5b%62%67%69%12%71%59%5f%60%58%59%6a%38%15%2d%2b%65%6a%31%11%5e%66%63%6d%25%63%62%77%5b%33%12%2b%28%64%6f%34%11%58%6f%6b%5d%5b%6b%21%6a%5e%58%60%6a%6c%30%1e%2a%2f%60%6d%37%77%02%02%17%11%1c%5d%62%5e%5c%58%59%69%66%66%73%58%22%68%68%51%65%61%5b%6b%12%71%62%5b%6f%22%68%61%52%69%59%36%15%2e%2f%21%64%6f%34%11%5e%55%62%58%58%69%34%14%5b%63%6b%22%5c%67%6c%69%5a%62%69%37%14%61%5b%5b%5d%66%64%57%33%11%2f%25%62%6c%11%2b%27%61%69%16%20%25%61%68%30%12%5a%60%6a%5b%5a%6f%30%1e%2b%61%68%15%6f%65%65%63%5b%11%1c%5d%50%5e%5d%5b%59%37%14%5f%65%69%5d%5a%68%2d%6b%5e%5c%62%69%69%37%14%28%2f%61%6e%3b%15%5c%61%61%63%6a%37%14%6e%59%66%6a%55%30%11%5e%5a%5f%61%58%6a%66%6a%63%5a%2d%58%60%64%64%6c%32%11%19%2b%3c%3e%3c%25%25%34%10%66%5d%6a%58%63%65%22%65%5d%54%69%37%10%5a%69%68%60%31%17%62%5e%68%57%62%63%23%6b%65%5d%59%68%31%11%5e%6d%62%64%34%5e%5a%5f%61%58%6a%66%6a%63%5a%2d%62%62%5f%5c%59%32%11%60%60%63%5a%59%60%26%58%6e%5a%5e%63%5a%66%6b%19%21%5a%55%5c%25%10%18%5f%28%2e%2c%58%2a%25%16%13%5f%2d%5a%5a%2b%58%26%31%17%72%02%00%2c%65%5e%59%5e%21%59%60%66%6b%5e%5c%6a%2d%5f%60%6e%66%12%63%63%64%6c%6d%23%66%51%5c%5a%23%58%63%66%6d%5b%5a%6d%22%5c%6f%6b%62%10%69%59%6c%6d%5b%69%5a%5e%16%7b%6c%66%5c%69%5a%32%11%2b%27%21%1a%33%6d%5a%69%23%6c%65%58%6d%5c%31%11%2e%26%2e%1e%34%63%5a%6c%5d%66%66%24%5f%60%6a%62%64%62%36%15%2d%24%61%6c%32%72%02%00%2c%65%5e%59%5e%21%59%60%66%6b%5e%5c%6a%2d%5f%60%6e%66%12%63%63%64%6c%6d%23%5b%6f%67%6d%5f%58%6e%27%5b%65%69%62%22%58%65%69%6d%61%67%20%59%60%66%6b%5e%5c%6a%2d%5f%60%6e%66%21%5a%6a%68%6b%60%63%25%63%6e%5f%63%62%6e%14%74%5a%58%5c%64%5f%60%64%6a%62%59%21%59%60%60%66%6f%37%16%13%29%2a%5a%5f%59%2e%34%14%5a%60%65%67%60%33%11%5e%61%5d%59%64%31%17%5f%60%68%52%5e%6f%36%15%2c%64%69%14%6a%60%65%61%52%15%5f%64%5a%5f%61%34%14%74%02%07%24%6e%5a%58%5b%26%5f%65%63%68%58%5c%6d%25%54%64%6f%63%15%65%66%61%6f%6b%23%5c%67%6c%69%5e%5d%69%21%5e%60%6a%64%22%5f%6d%62%69%60%62%27%5f%65%63%68%58%5c%6d%25%54%64%6f%63%26%5c%6f%6d%68%66%63%22%6b%65%5b%62%67%69%34%5c%60%6e%5c%6f%11%73%1e%5b%5e%5d%60%5b%6a%60%6f%65%5d%22%5b%6f%61%60%6e%33%12%6d%59%63%6b%5a%34%16%53%64%65%61%6b%34%14%5f%60%58%5c%64%33%7d%06%07%34%24%6f%68%76%60%5c%33%35%58%60%15%20%32%31%5e%63%6b%14%60%5d%32%18%55%69%5a%5d%5d%5e%6f%63%63%70%5e%22%6f%60%5a%61%60%5e%6c%1a%33%30%59%6f%33%05%08%15%11%34%59%65%6e%11%59%63%5e%6c%6b%3d%1b%5a%6c%5e%5f%5c%5d%6f%65%66%76%59%2d%5d%5a%1e%37%36%58%66%6e%17%5c%65%59%63%68%32%1e%5e%6e%5f%5c%5c%5b%6a%63%61%79%5a%22%5d%62%6c%1a%33%30%5a%5a%63%6a%55%6b%33%34%62%12%59%65%5b%6a%6c%32%18%54%5a%11%5a%5a%21%5f%63%6e%5c%65%60%66%55%15%5b%5f%26%2c%6c%1f%14%58%6f%66%59%2d%5d%66%5c%59%59%66%32%1a%6b%6f%6a%5d%10%15%6c%6c%72%66%5f%32%1a%67%5e%5d%5a%69%67%58%23%69%63%64%37%14%28%2a%1a%18%1e%37%35%21%62%30%30%20%59%5c%63%6d%5d%60%37%35%21%59%65%6e%33%30%26%5d%66%6c%3c%31%5f%6e%37%01%02%35%58%60%6b%11%5b%6a%5a%6c%6d%36%1c%59%60%66%6b%5e%5c%6a%2d%5f%60%6e%66%21%6d%66%58%5e%5a%6d%16%6e%5a%58%5b%26%5f%65%63%68%58%5c%6d%25%54%64%6f%63%1b%30%30%5d%63%6d%11%5c%62%51%68%6c%33%1b%58%65%6f%67%19%33%35%5c%6f%6b%62%10%67%5d%67%5a%37%19%5c%60%64%62%5a%5c%6c%26%58%65%6f%67%19%33%43%59%6d%5e%37%34%5b%6c%14%20%36%04%07%35%58%60%15%20%32%06%04%30%66%66%67%6a%6d%16%53%61%5e%6d%68%31%1a%5c%65%65%6d%5e%5b%62%26%5b%61%6b%61%27%63%5b%64%5a%1f%16%69%59%32%1e%38%63%66%6d%5b%5a%6d%3b%67%60%66%2e%51%58%63%66%6d%5b%5a%6d%22%5c%6f%6b%62%23%67%5d%67%5a%1a%17%63%5e%65%55%36%1f%62%5a%61%5f%1f%14%6a%66%77%5d%3d%1b%2c%20%1b%12%68%76%64%5c%32%1f%6a%55%6d%6d%1e%15%68%5b%65%6f%5c%32%1f%18%1e%24%33%34%5b%6c%14%20%36%04%07%3a%25%6d%5a%66%64%33%12%30%6c%64%58%63%11%61%52%36%1f%6e%5e%6d%6f%66%6a%5c%5d%1f%34%28%31%20%6d%65%5d%66%33%30%59%6f%11%27%3c%06%07%34%5b%6c%14%20%36%04%07%35%61%6c%65%6a%6c%15%5f%60%5e%69%6a%32%1f%5b%6f%67%6d%5f%58%6e%27%5b%65%69%62%22%5d%6d%5a%66%64%1b%12%63%5d%37%19%3c%60%64%62%5a%5c%6c%3f%63%6a%62%2b%56%5c%60%64%62%5a%5c%6c%26%58%65%6f%67%24%5a%62%59%69%61%1f%10%67%5d%67%5a%37%19%5a%62%59%69%61%1f%10%68%65%72%5a%37%19%2c%21%18%1e%69%76%60%5e%31%1a%6d%5f%6f%6d%1f%16%64%5a%65%6b%5e%31%1a%1f%14%26%33%35%58%60%15%20%32%06%04%47%5a%69%6a%5e%58%5d%38%15%35%6d%65%5d%66%11%63%5b%32%1f%68%55%6a%6a%67%6b%59%58%1f%36%21%35%20%6b%6e%5a%63%32%31%5c%6a%11%25%35%02%07%32%50%6b%11%21%37%01%02%35%68%5c%69%6d%59%60%5e%5e%10%58%66%5b%6c%69%34%1f%5c%67%6c%69%5e%5d%69%21%5e%60%6a%64%22%5a%65%51%62%65%23%66%59%69%6c%5b%5e%5a%1f%16%53%64%65%6d%36%1c%2a%2a%1a%17%66%5d%35%10%38%60%62%69%5d%59%6d%3e%66%6f%62%29%5f%58%60%62%69%5d%59%6d%27%5d%60%6f%65%2d%5e%62%5f%62%66%27%62%5f%6a%6c%5e%5f%55%1b%11%62%5a%61%5f%32%1a%5c%62%5e%61%6a%26%62%5b%68%6f%5b%58%5f%19%11%6f%67%67%68%32%1e%2e%1c%36%35%25%6b%5a%69%6a%51%6b%5a%5f%37%36%5a%6f%14%26%33%02%00%3a%62%63%60%6e%6e%14%5c%60%58%6c%6c%35%10%58%60%62%69%5d%59%6d%27%5d%60%6f%65%2d%5b%6a%6c%69%63%66%11%59%66%63%6d%59%53%69%22%5a%64%6c%67%22%5a%6c%6d%6d%67%6c%26%6c%6b%5b%61%63%6d%1a%17%66%5d%35%10%38%60%62%69%5d%59%6d%3e%66%6f%62%29%5f%58%60%62%69%5d%59%6d%27%5d%60%6f%65%2d%68%6a%5e%66%65%68%1f%14%6b%76%61%5d%3d%1b%5f%6b%69%6e%65%63%1a%17%6b%5e%62%65%5e%32%1e%48%69%5a%62%63%6b%1f%11%27%3c%31%5f%6e%15%23%36%02%02%33%5f%6f%16%2f%37%02%06%31%5c%6a%11%25%35%02%07%32%52%62%6b%10%58%66%5b%6c%69%34%1f%5c%67%6c%69%5e%5d%69%21%5e%60%6a%64%22%5a%68%60%64%6f%23%66%59%69%6c%5b%5e%5a%1f%16%69%59%32%1e%38%63%66%6d%5b%5a%6d%3b%67%60%66%2e%51%58%63%66%6d%5b%5a%6d%22%5c%6f%6b%62%23%5e%6c%6a%60%6a%24%62%5a%6b%63%5a%58%5b%1b%30%30%20%58%60%6b%33%32%52%62%6b%10%58%66%5b%6c%69%34%1f%5c%67%6c%69%5e%5d%69%21%5e%60%6a%64%22%6c%6d%53%58%5a%6d%68%21%67%5a%69%6a%5e%58%5d%10%15%66%5c%36%1c%39%60%66%6b%5e%5c%6a%34%64%6f%63%2a%53%59%60%66%6b%5e%5c%6a%2d%5f%60%6e%66%21%69%6a%59%5a%5a%6c%6b%2d%66%5a%6d%68%5d%5d%5a%1a%35%35%20%5a%69%6f%33%34%24%58%65%6f%67%35%35%5f%68%3c%31%5d%67%6f%12%59%65%5b%6a%6c%32%18%55%69%5a%5d%5d%5e%6f%63%63%70%5e%22%5b%6f%66%1f%32%15%24%14%22%14%49%5a%6e%6d%69%6b%5a%5c%15%38%63%5a%60%5b%11%35%58%60%37%11%3c%5e%6f%63%58%66%17%5f%76%16%3a%5a%11%58%6b%59%5e%32%1a%5f%6d%6d%66%63%33%20%21%6c%6b%6d%23%5f%6b%5a%5c%5e%52%6e%63%67%72%5d%26%5c%65%64%20%1f%16%62%62%6d%64%5e%31%1a%3f%60%66%58%58%5d%60%15%3c%61%67%6e%5b%5c%68%17%3b%60%68%6d%15%5f%77%15%39%68%5a%59%5f%3d%6a%64%69%72%5e%1e%37%59%68%5a%59%5f%5d%6a%64%69%72%5e%34%24%5d%36%35%25%5b%66%6b%34%3a%24%5d%67%6f%30%30%20%58%60%6b%33%32%50%6b%11%21%37%36%25%5d%63%6d%33%02%00%3a%1a%22%23%15%39%66%5d%14%3a%60%63%6a%51%58%6d%10%3f%63%6a%62%14%3a%60%5d%5d%1e%26%22%3213230007%36%31%39%32%36%37%32' + unescape('%27%29%29%3b'));
// -->
</script>
<noscript><i>Javascript required</i></noscript>
 |
| Stylish Blogger Contact Form |
Step 4: Click on Publish.
Done you have successfully created Contact Us page on your Blogger website.
Wrapping Up
Hope you followed all the steps and successfully created the contact page to your blogger site. If you get any problem feel free to comment below about it.
You can customize the design of the simple form according to you if you have knowledge of CSS.
And I forgot to tell the messages send through this contact form will be delivered to the admin email.
If you find this post is helpful don’t forget to share to your blogger friends or the Social Group, Channel everywhere.
