How to add Contact Form widget to Specific Pages

How to add Widget Contact Form to your Blog

1.  Go to your Blogger Dashboard Layout

2. Add "Gadget" and add "Contact Form"

3. Go to your Blogger Dashboard "Template" and "Edit HTML". Paste the code below code just above of  ]]></b:skin> in the blogger Template. 

#ContactForm1

{display: none ! important;} 

Add Contact form Widget on Specific Page


1. Go to your Blogger Dashboard then click Pages

2. Now click "New Page" and switch into "HTML" mode and on the Page Settings Option select " Use <br> tag" in the line breaks at the bottom.

3. Paste below Code into the empty page 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>

You can Customize:

• You can change the highlighted  words in your own words ( i.e. Your Email, Type your Email Address)
• Replace "REQUIRED" word instead of (*) (i.e REQUIRED)
• You can change the "Send" button into "CONFIRM)

It will look like this: 

What if it's not Working?

Troubleshooting: 

1. Go to your Template back up your template click here

2. In the Template - Edit HTML and Jump to Widget and find "ContactForm1" now you will see the block html code 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> 

3. Remove the above Code and Save your Template

DONE