How To Add Contact Form (Contact Us Page) in Blogger?

contact form on blogger
Adding a contact us form in Blogger is a tedious task as it does not support plugins like WordPress.
contact form blogger widget
What most of the Blogspot bloggers does is to seek the help of third-party sites (foxyform, jotform, 123contactform, etc.).
contact form html
Blogger Contact Form Page But today, you are going to learn how to add official contact us page in Blogger.
contact form blogger google
As I said earlier, 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.
contact form for blogger html code
The 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.
contact form untuk blogger
I have divided this tutorial into three sections, adding the contact gadget, hiding it and implementing the official code in a new page.
blogger contact form
Part 1: Adding the Contact Gadget
blogger contact
Follow the steps given below to add a contact us gadget on your blog.
blogger contact form not working
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.
blogger contact email
Step 2: Click on Layout from the left sidebar to get an option to add gadgets.
blogger contacto
blogger contact form html code
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. 
blogger contact form code
blogger contact form not sending
Step 4: Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same.
blogger contact form change email
 

blogger custom contact form
Part 2: Hiding the Gadget
google blogger contact form
Now, you are going to learn how to hide the contact gadget.
blogger contact us form
Step 1: We need to play with the theme section here. So, click on Themes from the left menu.

blogger contact us widget
blogspot contact us
Step 2: Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.
blogspot contact us form
google blogger contact us
Step 3: Search for  ]]></b:skin>  and place the following code just before it.
blogspot contact
div#ContactForm1 {
display: none !important;
}
blogspot form
blogspot contact form widget
Then, click Save to retain the changes.
free contact form for blogger
After the third step, you will not see Contact widget on your blog.

create custom contact form for blogger
Part – 3: Adding Contact Form to a Page
stylish contact form for blogger
You will get the customized official blogger contact form code here to be added to be shown on a separate page.
blogspot contact blogger
Step 1: Go to Pages and click on New page.  

contact form on blogger
contact form blogger widget
Step 2: Paste the following code into the HTML post editor after removing everything in it.
contact form html
contact form blogger google
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
Get in touch with us by filling out the form below.<br />
<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" contactform1="" href="https://www.blogger.com/rearrange?blogID=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" target="configContactForm1" title="Edit">
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<br />
<div class="clear">
</div>
</div>
contact form for blogger html code
Step 3: Add a title like (Contact Us) and then change the settings given right as given below.
contact form untuk blogger
blogger contact form
Step 4: Finally, click the Publish button. That’s all.
blogger contact
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. ​

blogger contact form not working
Wrapping Up
blogger contact email
I hope you now know how to add contact us page in blogger. If you find any difficulty like zero deliverability even after success message, I recommend reinstalling the Contact widget.
blogger contacto
And yeah, if you have ample knowledge in dealing with CSS and javascript snippets, you can go on customizing the page for a better visual appeal.
blogger contact form html code
Don’t forget to share this post with your blogger friends.

No comments:

Powered by Blogger.