Add a contact form on Blogger BlogSpot blog 2021
In this post we are going to cover how to add a contact form on Blogger or Blogspot blogs and do the needful.
What are the different benefits of the Blogger contact form gadget
- With the contact form gadget you get the message direct to your inbox as soon as someone sends it. There’s no lag.
- The interface is as simple as it can get
- With the CSS styling you can customize the form the way you want it to.
- When sending the message it uses javascript and the page doesn’t get reloaded.
The tutorial helps you adding the contact gadget and hiding it and implementing new code on the page.
Adding the Contact Gadget
Here are the steps that will help you add the contact us gadget on blogger blogs.
Visit blogger.com and login. If you’re running multiple blogs you need to pick the one you want to add the contact gadget.
=Click on layout from the left sidebar and you get an option to add gadgts.
You see add a gadget link on the panel and clicking on it generates a list of gadgets that you can add.
Choose more gadgets from the left. You see the contact form gadget now.
Hiding the Gadget
The next step is to hide the gadget.
Use the template section. Click on templates from the left menu.
Click on edit html and you get the code of the blog in a large field.
Search for //></b:skin> and place the code below before it.
div#ContactForm1 {
display: none !important;
}
Click save and the changes will retained. The contact form has now disappeared.
Adding Contact Form to a Page
In this step you’re going to add contact form to a page.
Go to pages and click on new page.
.
Paste the code below into the html editor. You have to empty out the htm code by selecting all and pushing delete.
<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>
<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§ionId=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>
Add title contact us and set the options as show html literally and use the br tag.
Hit on the publish button. The messages sent from this page are delivered to your admin gmail id.
Wrapping Up
This is how you can add a contact us page on Blogger blogs. If you find difficulty like deliverability issues, then reinstall the contact widget to fix the issues.