Saturday, 27 May 2017

Easiest Steps on How to Add Contact Form or Contact Us to Blogger

Adding a contact us form in Blogger is a long process but we'll take the steps one at a timeas it we know that blogger does not support plugins like WordPress.

What most of the Blogspot bloggers does is to seek the help of third-party sites (foxyform, jotform, 123contactform, etc.).

But today I'll be showing you how to add this without the use of third-party sites.

Note: It is possible to get third-party codes to be inserted in new pages like a walk in the park. Yet, the official contact form is far better than those.


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


Step 2: Click on Layout from the left sidebar to get an option to add gadgets.


Step 3: You can see an Add a Gadget link on the main panel on the right side. Clicking on it will bring you to a list of gadgets

contact-form

Step 4: Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same.
how-to-add-contact-form


Adding is just the first part of the equation you are also going to have to learn how to hide the contact gadget.


Step 5: We need to play with the template section here. So, click on Templates from the left menu.
how-to-add-contact-form

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


Step 7: Search for ]]></b:skin> and place the following code just before it.

div#ContactForm1 {
display: none !important;
}

how-to-add-contact-form

Then, click Save to retain the changes.

After the this step,plese note you won't still see Contact widget on your blog until you've completed the entire step.


You will get the customized official blogger contact form code here to be added to be shown on a separate page.

Step 8: Go to Pages and click on New page.
how-to-add-contact-form


Step 9: Paste the following code into the HTML post editor after removing everything in it.
how-to-add-contact-form


<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 10: Add a title (like Contact Us) and then change the settings given right as given below.
how-to-add-contact-form


Step 11: 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.


I hope you find it helpful and if you encountered any problem or difficulty while doing this, comment.



Share Post:


No comments:

Post a Comment