Contact Form Widget New Style and Install in Static Page

Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very useful for viewers because they may need to ask any question privately without being posted on comment or chat. It also help author to get suggestion about our blog to step forward.



You can see a demo in this Blog.

The contact form for Blogger has the following features:

• Field for the user name
• Field for email
• Field for the message (text area)
• Submit Button

This design is the basic style for the Contact form widget. At the moment, this widget has no configuration options and is not available for dynamic views.

HOW TO ADD CONTACT FORM TO BLOGGER

Step 1: Go to blogger.com then Log in using your user name and password.

Step 2. From your Blogger dashboard, go to Layout and click on the Add Gadget button:

Step 3. Then Select More Gadgets tab and add Contact Form gadget:

Styling Contact Form

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

Step 2. Now search for this "]]></b:skin>" (press CTRL + F to find it):

Step 3: And paste the below code just above it ("]]></b:skin>").

  /* Contact Form Container */  
 .contact-form-widget {  
 width: 500px;  
 max-width: 100%;  
 margin: 0 auto;  
 padding: 10px;  
 background: #F8F8F8;  
 color: #000;  
 border: 1px solid #C1C1C1;  
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);  
 border-radius: 10px;  
 }  
 /* Fields and submit button */  
 .contact-form-name, .contact-form-email, .contact-form-email-message {  
 width: 100%;  
 max-width: 100%;  
 margin-bottom: 10px;  
 }  
 /* Submit button style */  
 .contact-form-button-submit {  
 border-color: #C1C1C1;  
 background: #E3E3E3;  
 color: #585858;  
 width: 20%;  
 max-width: 20%;  
 margin-bottom: 10px;  
 }  
 /* Submit button on mouseover */  
 .contact-form-button-submit:hover{  
 background: #4C8EF9;  
 color: #ffffff;  
 border: 1px solid #FAFAFA;  
 }  

-This is how it looks like after applying this style:

How To Add Contact Form In A Static Page

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

Step 2. Now search for this "ContactForm" (press CTRL + F to find it):

Step 3. Now Expand the widget by clicking on the left arrow mark:

Step 4. Now again new arrow will appears for includable, expand that also.

Step 5. Now a new set of code is expanded like below. In that code you have to delete the part that is colored in Red.

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>  
   <b:includable id='main'>  
  <b:if cond='data:title != &quot;&quot;'>  
   <h2 class='title'><data:title/></h2>  
  </b:if>  
  <div class='contact-form-widget'>  
   <div class='form'>  
    <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>  
   </div>  
  </div>  
  <b:include name='quickedit'/>  
 </b:includable>  
  </b:widget>  

Step 6. Now click Save Template button.

Step 7. Then go back to blogger dashboard and go to Template and select Blank Page:

Step 8. Now paste the below code into new Blank Page with the title you want.

 <div class='widget ContactForm' id='ContactForm1'>  
  <div class='contact-form-widget'>  
   <div class='form'>  
    <form name='contact-form'>  
     <p>Name<p>  
     <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>  
     <p>E-mail *</p>  
     <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>  
     <p>Message *</p>  
     <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>  
     <input class='contact-form-button contact-form-button-submit' 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>  
 </div>  

Step 9. At-last Publish the post.

-Messages will be sent to the same email that you have registered in Blogger.