How to Add Contact Form in Blogger Page

So you want to create contact form in blogger page huh? Good !

Creating contact page using blogger gadget is really very easy but its having certain limitation ,we have to place it either sidebar or header. But this place is not effective for creating contact form, so this article helps you to move that contact form into blogger page with effective and attractive look.

How To Add Contact Form In Blogger

Adding Contact Form Into Blogger Page :

View OF Contact Form 

For moving or adding the contact form we need to create it first, follow below procedure to create contact form.

• Click on Layout> Click on more Add a Gadget then>More Gadget>Contact Page.
• Go to Template>Edit HTML>Jump to Widget>ContactForm 1.
• Click on the left  side arrow twice to expand the code so that you see the following.

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

• Delete all code shown above and place below code instead of it.

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>  
   <b:includable id='main'>  
 </b:includable>  
  </b:widget>  

• Go to Pages, and select the page which you want use for  placing contact form. inside the page click on HTML.

•  Now place below code inside html editor where you want to appear contact form.

 <div id='ContactForm1' class='widget ContactForm'>  
  <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: <span id="required">*</span></p>  
     <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>  
     <p>Message: <span id="required">*</span></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>  

Save it, and Publish.

Now add below CSS code inside template to make it attractive. 

• Go to Template > Edit HTML and search ]]></b:skin>. Then Above ]]></b:skin> add the following CSS (Use CTRL+F For searching).

 /* CUSTOM CONTACT FORM BY BLOGGERXPERT.COM*/  
 .contact-form-widget {  
 width: 500px;  
 max-width: 100%;  
 padding: 10px;  
 background: #FFFFFF; 
 color: #000;
 border: 0px solid #EEEEEE;  
 margin: 0 auto; 
 }  
 .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }  
 .contact-form-button-submit {  
 border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */  
 background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */  
 color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */  
 width: 30%; /* CHANGE WIDTH OF SEND BUTTON */  
 margin: 10px 0px;  
 }  
 .contact-form-button-submit:hover{  
 border: 1px solid #999999;   
 background: #666666;  
 color: #FFFFFF;   
 }  
 .contact-form-widget #required {color: red;   
 .contact-form-widget p { margin-bottom: 5px;
 .contact-form-cross {margin-left: 5px !important;}  
 .contact-form-error-message-with-border {  
 background: #eeeeee;
 border: 1px solid #333333; 
 bottom: 0;  
 box-shadow: none;  
 color: #666;   
 font-size: 12px;   
 padding: 5px;   
 font-weight: bold;  
 text-align: center;   
 }  
 /* END CUSTOM CONTACT FORM BY BloggingXperts.Com */  

Your contact form has been successfully created, if you like this article please do share with your friends on social media using below button, if you still having problem then contact me here.

Blogging Is Incredible. Keep Blogging. Enjoy Blogging.

Share on Google Plus

About Meghshyam

Meghshyam Sonar is a part time blogger from india. He is well known for blogger. He has been bloggging since 2010. He is founder of various blogs and website. He was recognized as a top blogger in india under the age of 20 by blogger India. Find him on Google+ Twitter.