How to Create Contact Us Form in Blogger & How to Configure Contact Us Page

t

Adding Contact Form to a Blogger Page

You will get the contact form HTML code it given below on the post.

Step 1: Go to Pages Section and 

Step 2: Click on New page.

Step 3: Add title {like Contact Us}

Step 4: Paste the HTML code into post editor.{HTML Code Given Below}  

Step 5: Change settings given right as given below.

Step 6: After this, click on the Publish button.

Benefits of Contact Us Form

1. The messages you will get to admins email. If you have more admins you will receive messages on all admins emails.
2. You will get all the users message as soon.
3. Easy for your site visitors to contact with you.
4. The contact us page is not take loading for sending message. 

Why Contact Us Page is Important

The important reason to have a contact us form on your website is keep your website secure and safe.

A contact form gives your visitors an easy way to send message.

HTML 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>