How to Use Blogger's Contact Form as specific contact us page

A few weeks before, one of my friends on Facebook asked me that can I use blogger contact form widget in a post page or stand-alone page (static page). So this post is for you who intend to add a contact form in separate pages. Let's start embedding the official contact form widget into a stand-alone page in Blogger.

Step1: Active contact form on your blog

You should add the contact form widget so that launching it on a specific page. If you already have added it, please omit these steps and who don’t added official blogger contact us widget can follow below steps.

1: Sign in to your Blogger account and go to Layout.

2: Now click on  “Add a Gadget” link and “More Gadgets”.

3: Now find “Contact form” page element and click on it.
Contact-Form-Page-element

4: If you want to change the title of the contact form widget, so alter it. Then click on “Save” button.

Step2: Hide contact Form Widget from your blog

The next work to do is hiding the official blogger contact form widget showing in the sidebar. So we have some methods to do it. One method is removing the contact form html code. Although one day when you want to show it again in the sidebar, you might be confused by asking “How do I  add removed contact form widget code to my blog?”. It is easy to add. But you have to do some works. So I will show you how you can hide contact form gadget using CSS. Whenever you want to show contact form, you just need to remove the piece of CSS code from  the template.

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

#ContactForm1
{
display: none ! important;
}

Step3: Add Contact form widget on a Static page in blogger

Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make customization in the bottom of the steps.

1: Click on ‘Pages’ tab on the left hand side.

2: Now click on New page >> Blank page.

3: 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.

4: Now paste below code on the empty Edit 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>

Step4: Customization

Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
Replace Required message instead of red color star symbols(*)( i.e: (required) )
Change Send with wished text to be shown on Submit button.

Last": Save your static page.

Need Help?

we're always here to help you, we can do this work for you... FREE!
just contact our team using our contact us page, thanks :) Regards: Admin