Add Contact Form in Blogger

Contact form can be an essential requirement to be there in the blog. Here, I am going to tell you how to add a contact form in blogger on a specific page or in sidebar.

You can add the contact form either on sidebar or on a specific page. Its preferred to add it in a specific different page. Anyway I am going to tell you for both things. Follow the below steps: 

• Go to Layout of your blog.
• Click on "Add Gadget" link there and find out for "Contact Form" page element. It can be either there or in "More Gadgets". If you can to edit the title from "Contact Form" to something else, then you can do that too by editing the text box there.
• Now, save the arrangement and you can see a contact form in your blog.

But what if you want the contact form (you created above) in a specific page. For this, follow the below steps: 

• Let it be same as you added a gadget of  "Contact Form" in above steps.
• Now, you would like to remove this gadget from the sidebar as you want it in a specific page. So, hide it first. Go to "Template" and click on "Edit HTML" button. Then paste the below code just above ]]></b:skin>
  
  #ContactForm1
  {
  display:none ! important;
  } 
  
  Here, what we are doing is that hiding the contact form from sidebar with help of css.
• Now, we have to add the contact form in a specific page. Go to pages, click on "New Page" with blank page template.
• Switch to html mode,.
• Paste the below html code there:
  <form name="contact-form">
  <p></p>
  Name: <br />
  <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
  <p></p>Email: 
  <span style="font-weight: bolder;color:red;">*</span><br />
  <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
  <p></p>
  Message: <span style="font-weight: bolder;color:red;">*</span><br />
  <textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
  <p></p>
  <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
  <p></p>
  <div style="text-align: center; max-width: 222px; width: 100%">
  <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
  <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
  </div>
  </form>
• This will create a form there with the fields of Name, Email, Message and a Send button. User will enter his/her name, email address and message and click on send button which will be delivered to your email address, you registered to create the blog. Thats it.

Troubleshoot if your contact form is not working for your blog

If on doing the above steps, still your contact from doesn't work properly, then follow the below steps to troubleshoot it: 

• Go to your "Template" page and click on "Edit HTML" button.
• There will be a "Jump to Widget" drop down button. Click on that and it will give you a list. Select "ContactForm1" id. Accordingly, some code will be displayed there. Just find out the below code:
  
  <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>
  
• Just remove the above code and you are done. Now check your blog again. The contact form should be working fine now.