/ / / Add contact form widget to Blog Page

Add contact form widget to Blog Page

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

4: Then click on “Save” button. Hide contact form widget in Blogger5: 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;
}
                                       Search box shortcut Ctrl+f

Add Contact form widget on a Page

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: Paste below code on the HTML field.
<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>
E-mail:
<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>
  • Change highlighted words with your own words.
  • Replace Required message instead of red color star symbols
5: Save your page.
Thank you...
Feel free to contact us
Google Plus
Twitter

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment