Blogger Widget | Contact Form How to add in Blogger

After a short time back, we’re discussing on the Blogger widget contact form. In 2013, Blogger acquainted new gadgets for users. In initial days 2013, they released Wikipedia search box gadget after which it official contact form for blogger. After updating the Blogger web template editor, many people joined to Blogger and most of the existing users were starting Blogging daily basis. You know the importance of the contact page in various situations. It has become an indispensable widget that many website and blog must have. The Blogger contact form widget has some features including working speedily (send a message to an email account of blog seller immediately), simple to work (no word confirmation) and littleness (can be taken in whether fixed or fluid templates) etc.

A few several weeks before, one of my clients asked me which could I use Blogger contact form widget in a post website or stand alone page (static page). So, this post is in your case who interest to add a contact form in separate pages (add contact page to blogger page). Let's start embedding the official contact form widget right stand alone page in Blogger.

How to add Contact Form in Blogger Widget

You'll want to add the contact form widget so that showing it even on a specific page. If you already have added it, please take out these steps and who don’t added official blogger "Contact Us" widget can follow below steps.

Step 1 : Sign into your Blogger account and go to your "Layout" option.
Step 2 : Now click on  "Add a Gadget" link and go to "More Gadgets" option.
Step 3 : Now find "Contact form" page element option and click on this.

Step 4 : If you want to change the title of the "contact form" widget, ok change this. And click on "Save" button.

How to hide Contact Form in Blogger Widget

The following work to do is hiding the official blogger contact form widget showing within the sidebar. So we have some methods to do it. One method is removing the contact page HTML code. Although one day when you want to show it again within the sidebar, you might be confused by asking "How to I add or hide "Contact Form" widget code during my blog". It is easy to add. But you have to complete some works. So I will show how you can a person hide "Contact Form" gadget using CSS. Whenever you want to exhibit contact form, you just need to remove the piece of CSS code in the template.

Now go to your blogger template option and click on the "Edit HTML" button. Then paste below code just above of ]]></b:skin> code in the blogger template HTML.

#ContactForm1
{
display: none ! important;
}

How to add Contact form in blogger Static Page

Now we’re going to add "Contact Form" in blogger stand alone page. Follow below steps and make customize in the bottom of the steps.

Step 1 : Click on "Pages" tab on the left side.
Step 2 : Now click on "New page" I mean "Blank Page".

Step 3 : Now Switch to HTML mode and click on "Options" tab on the right side. Then select the "Use <br> tag" option in the Line Breaks section like below.

Step 4 : Now paste below "Contact Us" form HTML code for Blogger on the Empty HTML field.

<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your 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>
Your 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>

Customize...

1. Change highlighted Blue words with relevant your own words. For Your Name, Your Email, Your Message)
2. Replace Required message instead of purple color star symbols ( * )
3. Change Send with wished text to be shown on Submit button.

Please note : Don't over-use or add new HTML codes for Blogger "Contact From" page code. I have seen many bloggers get troubled by editing and adding new fields to get hold of form. You'll not be able to receive values / inputs for a person's fields, also your "Contact Form" will not work in "Static Page" well.

Step 5 : The most important step in this tutorial. now save your template!!

Troubleshooting : After Blogger Contact Form is not working then!!

Some bloggers complained that blogger "Contact Form" not working on their blogs. In some occasions "Send" button does not work correctly, therefore, the message would not be sent. I have resolved the problem with embedded Contact form on blogger post pages and stand-alone pages. Please have a look at our Demo page so that understanding blogger contact form operates perfectly yet in blogger.

Now let's see how to this problem easily we solve.

• Go to blogger "Template" options and backup your template.
• After doing this, click on 'Edit HTML' tab button and find "Contact Form" widget code. You can do this easily by clicking on 'Jump to widget' drop down button and choosing on "Contact Form 1" id. Now you will see a block of HTML code similar to below.

<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>

• Remove above code and Save your template.

You are now done!!

for more information please feel free to Contact Us...