How to add a contact us form on pages On Blogger

Contact Form Is a very important part of a website .
Blogger Contact Form Page Is very important, I m  going to share how to add official contact us page in Blogger.

The Fetuses Benefits of Official Blogger Form
1) You will get the message as soon as one sends it. And, the deliverability is 100% as well.
2) The simple interface makes it easy for the visitors to contact you.
3) If you know Cascade Style Sheet (CSS) language, it will be easy for you to customize the form as per your liking.
4) The entire page will not get reloaded for sending the message.

Part 1: Let's Adding the Contact Gadget 

Follow the steps given below to add a contact us gadget on your blog.
Step 1: Visit blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list. 
Step 2: Click on Layout from the left sidebar to get an option to add gadgets.

Step 3: You can see an Add a Gadgetlink on the main panel on the right side. Clicking on it will bring you to a list of gadgets.
Step 4: Then, choose More gadgetsfrom the left side. Now, you will see Contact Form. Just add the same.

Good job . You successfully added contact from widget.

Part 2: Now Hiding the Gadget From Home

Now, you are going to learn how to hide the contact gadget.
Step 1: We need to play with the template section here. So, click on Templates from the left menu.

Step 2: Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.


Step 3: Search for ]]></b:skin> and place the following code just before it.
div#ContactForm1 { display: none !important; }
Then, click Save to retain the changes.
After the third step, you will not see Contact widget on your blog.

Part – 3: Now Add The Contact Form to any Page

You will get the customized official blogger contact form code here to be added to be shown on a separate page.
Step 1: Go to Pages and click on New page.


Step 2 : Add a title ( Example : Contact Us)
Add a title  for your page (like Contact Us) and then change the settings given right as given below.



Step 3: After Enter a post title , Insert the HTML code on body with HTML section .  Paste the following code into the HTML post editor after removing everything in it.

Code

<div id="custom_ContactForm1" class="widget ContactForm">
<div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
<p></p>
<input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit">
<img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
</a>
</span>
</span>
<div class="clear"></div>
</div>

Step 4: Finally, click the Publish button. That’s all.

The messages send from this contact form will be delivered to the admin email. If the blog has more than one admin, all of them will get it. ​

Thanks for reading us , For more interesting lessons please keep us visiting .