How to add contact form to blogger page (Photos).

How to add contact form to blogger page

It is highly recommended to add contact form to your blogger page this is the only way visitors can contact you and express their mind through your blog and ask questions or give contributions on what they may want you to improve.

Some website owners don’t like sharing their email address on their blogs because of scam and malicious activities.Blogger contact form is the best and easy way to stay in touch with your customers on your blog.

It is also a great thing to create a separate email address that is specifically for your blog since most big companies can never contact you through contact form.

Adding a contact form on your blog is very simple and anyone can do it.You do not need to be a coding expert to do it,below am going to give you a step by step guide on how you can add a contact form to your blog page with few clicks.

Here is a step by step guide on  how to add contact form to your blogger page.

Step 1 
The first step is to go on your blogger layout page and click on add new gadget.First, go to the Layout page in Blogger and click an Add a Gadget link.
From the popup window, choose More Gadgets in the sidebar and then select Contact Form and add it.On most cases the contact form might appear on the side bar but never mind about that since we shall work on it till it is on the right place.

Image below illustrates where to go.

Photo shows how to add contact form through blogger layout new gadget window

Step 2
On your blogger left panel,click on Template>Edit HTML blogger text editor will appear with the template code.I could highly recommend you to back up your template just in case you do something wrong.
Click on the text editor and and press CTRL+F if you are using  CMD+F on a Mac.
On the search bar,type  ContactForm and press enter. You will get the code below or like the one in the picture.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

See photo below:

Click on the black arrow from the left side to expand the code and you will see a code like the one in green below.

<b:includable id=’main’>  <b:if cond=’data:title != &quot;&quot;’>     <h2 class=’title’><data:title/></h2>   </b:if>   <div class=’contact-form-widget’>     <div class=’form’>       <form name=’contact-form’>         <p/>         <data:contactFormNameMsg/>         <br/>         <input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>         <p/>         <data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>         <br/>         <input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>         <p/>         <data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>         <br/>         <textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>         <p/>         <input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ expr:value=’data:contactFormSendMsg’ type=’button’/>         <p/>         <div style=’text-align: center; max-width: 222px; width: 100%’>           <p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-error-message&quot;’/>           <p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>         </div>       </form>     </div>   </div>   <b:include name=’quickedit’/></b:includable>

Delete anything between <b:includable id=’main’> and </b:includable> all the code highlighted green above.

Step 3
Still on the text area on the search box ,copy and paste this code  ]]></b:skin> and press enter, after you find it,copy the code below and paste it just above it.

.contact-form-widget {
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
.fm_name, .fm_email {
.fm_message {
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
.contact-form-email-message {
max-width: 100%;
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;

Look at the image below.

You are almost done here.Click on save template and lets go to the page where we shall create contact form. 

Step 4
Open anew page and change your page editors from compose to HTML.In the page editor,paste the code below. 

<div class=”widget ContactForm” id=”ContactForm1″>
<div class=”contact-form-widget”>
<div class=”form”>
<form name=”contact-form”>
<div class=”fm_name”>
Your Name:
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /></div>
<div class=”fm_email”>
E-mail Address *:
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /></div>
<div style=”clear:both”>
<div class=”fm_message”>
Message *:
<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=”Submit” />
<div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”>
<div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”>

See image below where to paste your code:

Now you should be able to see your contact for ready for work.If you complete everything successful as instructions above. this could be the final result

All messages sent through this contact form will be going to the email that is used to log into your blogger since this is the email address that is attached to the blogger account.

If you were able to do it successfully you can leave a comment below in the comment section and also share it with friends.If you encountered a problem,post it below on our comment area and we shall assist you.