How To Add Blogger Contact Form on Static Page or Post?

Blogger recently released publicly usable contact form widget. This contact form normally holds two input options (Name and Email ID) and a small textarea (writing a message) for sending responses from the frontend of any blogger blog. You may compare this contact form with our previously posted PHP Contact form which also included the same features. This widget is extremely easy to install on anywhere of your blog. Most of the blogger users want this contact form embed on a static page rather on sidebar or footer section. Just only one trick you need to adopt to add this contact form on static page rather placing on sidebar.

We will first register the contact form i mean we need to add manually this contact form on sidebar then we will hide this from sidebar or make it invisible and add some little piece of code which generates blogger contact form. Interesting idea! isn't it? So let's go ahead and make your contact form working on a certain page or post.

• Part 1: How To Stylize Blogger Contact Form Using Dynamic CSS

• Part 2: Connect Blogger Contact Form With A Tab by jQuery

Activate Contact Form First

1. Go to Blogger > Layout
2. Now click on Add a Gadget link

3. Navigate More Gadgets > Contact Form
 

4. Finally save it under your sidebar

Hide Contact Form Using CSS

1. Go to Template section
2. Hit Edit HTML
3. Now search for </b:skin
4. Simply add the following css right above </b:skin

#ContactForm1 {
display: none !important;
}

5. Finally hit save template and this part is done!

Create A Page An Embed Contact Form

1. From navigation menu click Pages
 

2. Click on New Page > Choose Blank Page
 

3. On blogger post editor choose HTML mode
4. Now copy the following code and add it right after default <div tag

<form name="contact-form">
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
    <br />
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email ID" size="30" type="text" value="" />
    <br />
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <br />
<input class="reset-button" type="reset" value="Clear" />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <br />
<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>

5. Finally Publish the post and check it
6. You should find the contact form working well

Need Help More?

This tutorial should be working as it works for our demo page also most of the webloggers are using this contact form by the same method. Anyway let me know if it's not working for yours additional support is almost expected from our team. Peace and blessings pals :)