How to create a contact form in static pages

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

Contact form is one of the support tools in a blog , which is useful for visitors to contact the owner of the blog , on this occasion I will share a little bit about how to create a contact form on your blog static pages , let's follow the steps below.

1. Login to your blogger panel admin

2. Click On Template » Edit HTML

3. Find this kbd Ctrl+F ]]></b:skin> or </style>

4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>

Contact Form On Static Page Proudly Power By Blogger.com

#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}

5. Add script HTML/Javascript below on your static pages.

<div id="formcontact">
<h3>
Contact Form</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<data:contactformemailmsg> <span style="font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<data:contactformmessagemsg> <span style="font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
</data:contactformmessagemsg></data:contactformemailmsg><br />
<div style="max-width: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>