Stylish Blogger Contact Form Widget For Static Page

How To Add Stylish Contact Form Widget in Blogger

Blogger Contact Form is very important for every blogger, it helps the reader gets the opportunity to stay connected with the blogger.And putting it in Blogger Connect Widget is not such a difficult task. The contact form widget exists in the default blogger  widget, but it’s not so beautiful. It’s a simpler widget, but I’ll tell you how to make the widget more beautiful and how to Add Stylish Blogger Contact Form Widget For Static Page in blogger.
In this way, we can create a contact form widget for our blogger, so that Blogger has own default contact form widget, but make this widget more attractive. I will provide you with beautiful design to make this widget more beautiful.

DEMO

How To Add Contact Form Widget in Blogger

First of all, your Blogger’s default contact widget Add your blogger.Because this Stylish Blogger Contact Form Widget will not properly work without it.You will not receive any mail from it. Therefore, the contact widget should first have to Add Contact Form in your blogger.Then we will have to head it.

Folow the steps and learn how to add contact form widget in blogger

1.Sign in to your blogger

2.Go to blogger Dashboard

3.Click on Layout from side menu

4.Click on Add Gadgets then new page will be popup

5.Now click on blue plus button and add the Contact Form Widget and must Save.

Stylish Blogger Contact Form Widget

Congratulation! you have successfully added Contact Form Widget in Blogger now turn to hide this Contact Form and get more attractive Contact Form in Contact Us page.

How To Hide Default Blogger Contact Form Widget

Now turn to hide default blogger contact form widget in blogger .Go to the Theme option in left side menu and then click on Edit HTML now coding page will be open now search this code. ]]></b:skin>     

How To Find Code in HTML

When you find this code copy the below given code and paste above this ]]></b:skin> code and click on Save.

div#ContactForm1 {
display: none !important;
}

How To Hide Default Blogger Contact Form Widget

Add Fonts and Awesome Icons in Blogger Contact Form Widget

1.Go to Theme>>Edit  HTML>> find here now new code </head>

copy below code and past it above the </head>

Code is here.

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”/>

fonts and icon insert

if your Template already have this code so leave it.

now question is that how to add contact form widget in page?

How To Add Contact Form in Static Page

1.Go to Page section>>Click New Page>>New page will be open then click on HTML and copy the below code in this tab.

2.Click on Publish the page

How To Add Contact Form in Static Page

Code in here.

Double click and copy the code

<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p class='text'>Name</p> <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p class='text'>Message *</p> <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <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> </form> </div> </div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgR_ig0hQm4viAajjqXQJroWXLQP5E1CkPBwDDMZj38nv3mlcVWrk9bB7o9Zbrk_LHQgQmpCrs_zGxi5HbLPMtqIk6NX03yFHpjgSUzyI4xn7KtdbSrov5XLtnDtXmApgS5c4LPUrtjLCy/s1600/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoCNiiGpnmM2_xGIi9jRornFabigM3IhXN43MrD789wK1nuanIYDR5ywHH2pGwHoBmCTQL4n0aGquxfMUpQTpBBPiGP_KsJR-9woBWDe6U5ln0gIWB5wYqX1GpoLm9BM5ZTIUDV9-oArR/s1600/msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwit68E6RUsydj6dyUPp7B2PgZGU9xnSpY6A-Ehz6orcBB9yQmvBnmKF0kvRaMF63NqbFt480F9NDJGlstli1iPj8BqnXlEH8b1F7Owxx-vP-gl_femGvF1KPdci2QAUSAsn66ypVPt4AA/s1600/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>