Min menu

Pages

Hot

Blogger Tutorials Gadget

How to Add Blogger`s Official Contact Form to Your Blog

Admin
(6)
Blogger launches officially This is a wonderful very important gadget for any blogger,If your blog visitors need any help or suggestion regarding your posts or articles, they will try to contact with you.


How to Add Contact Form To Your Blog

Step 1
1. Login to your blogger dashboard--> Layout-->'Add A Gadget'
2. Now click on More Gadget--> Select Contact Form
3. Click  save.

Step 2
1. Login to your blogger dashboard--> Pages
2. Now click on New Page--> Select Blank Page
3. Now Click on HTML an Paste below code in it.
<div class='form'> 
<!-- Custom Contact Form By WG Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /> 
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/> 
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea> 
<p></p>
<!-- Clear Button --> 
<input class='WG-btnLogin' type='reset' value='Clear'/> 
<!-- Send Button -->  
<input class='WG-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/> 
<p></p>
<!-- Validation --> 
<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>
<!-- Custom Contact Form By WG Ends --> 
</div>
4. Publish that Page.

 Step 3
1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Find below code in your template (Press Ctrl + F)
   ]]></b:skin>
5. Add below code just above it,

#ContactForm1

{

display: none ! important;

}
6. Now Search for </head> (Press Ctrl + F)
7. Paste below code just before </head>

<b:if cond='data:blog.pageType == "static_page"'> 

  <style> 

#ContactForm1{ display:none!important;} 

  </style> 

</b:if>

<style>
/*---- Compatible contact Form by WG -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message { 
max-width: 220px; 
width: 100%; 
font-weight:bold; 
}
      
.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7gJGsRo9_fzFv2EMMbut6cpqRja7ZPbs4cPtePhFBrx3STyJmZSFLWEAoHUGRWqC1QALub71gwcldhCZtNbsEUPfHxrvs5FcJMgQjPjWY2sh8t1iNoppVdHTKoT7SV8qkuiBzI0q228/s320/name.png) no-repeat 7px 8px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
} 
     
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrHIjbGGFBFf0ssE0Ah7NZxuwv8ec8bhE5g_Hw0xrDQk-WsPwArWiWlDm1TNc7WfCZbwRM6xRPx75WI6YHIFDWk7AejzgBjKk2vgKYa2pfuSBkSTjXQ1nk09U_sbEd-3qyisGcDKRa5o/s320/email.png) no-repeat 7px 10px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{ 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover { 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); 
padding: 10px; 
}
.contact-form-email-message { 
background: #FFF; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: arial; 
font-size: 12px; 
margin: 0; 
margin-top: 5px; 
padding: 10px; 
vertical-align: top; 
max-width: 350px!important; 
height: 150px; 
border-radius:4px; 
}

.contact-form-button { 
cursor:pointer; 
height: 32px; 
line-height: 28px; 
font-weight:bold; 
border:none; 
}

.contact-form-button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.contact-form-button:hover { 
text-decoration: none; 
} 
.contact-form-button:active { 
position: relative; 
top: 1px; 
}

.WG-btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.WG-btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.WG-btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; 
}
</style>

      <!--[if IE 9]> 
    <style> 
    
.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7gJGsRo9_fzFv2EMMbut6cpqRja7ZPbs4cPtePhFBrx3STyJmZSFLWEAoHUGRWqC1QALub71gwcldhCZtNbsEUPfHxrvs5FcJMgQjPjWY2sh8t1iNoppVdHTKoT7SV8qkuiBzI0q228/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrHIjbGGFBFf0ssE0Ah7NZxuwv8ec8bhE5g_Hw0xrDQk-WsPwArWiWlDm1TNc7WfCZbwRM6xRPx75WI6YHIFDWk7AejzgBjKk2vgKYa2pfuSBkSTjXQ1nk09U_sbEd-3qyisGcDKRa5o/s320/email.png) no-repeat 7px 6px; 
}
    </style> 
    <![endif]--> 
    
    <style> 
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7gJGsRo9_fzFv2EMMbut6cpqRja7ZPbs4cPtePhFBrx3STyJmZSFLWEAoHUGRWqC1QALub71gwcldhCZtNbsEUPfHxrvs5FcJMgQjPjWY2sh8t1iNoppVdHTKoT7SV8qkuiBzI0q228/s320/name.png) no-repeat 7px 6px; 
padding: 15px 15px 15px 28px;

}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrHIjbGGFBFf0ssE0Ah7NZxuwv8ec8bhE5g_Hw0xrDQk-WsPwArWiWlDm1TNc7WfCZbwRM6xRPx75WI6YHIFDWk7AejzgBjKk2vgKYa2pfuSBkSTjXQ1nk09U_sbEd-3qyisGcDKRa5o/s320/email.png) no-repeat 7px 8px; 
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{ 
padding: 15px 15px 15px 28px; 
}

.contact-form-button { 
height: 28px;
}
}
</style>

8. Save the Template ,And you're done!
Enjoy and happy blogging!
reaction:

Latest articles from : Blogger Tutorials

Comments

6 comments
Post a Comment
  1. Lintasan InformasiAugust 18, 2013 at 8:42 AM

    Nice Tutorial, thanks!

    ReplyDelete
  2. UnknownSeptember 1, 2013 at 7:05 PM

    how to put this widget on post?

    ReplyDelete
    Replies
    1. AdminSeptember 3, 2013 at 2:55 AM

      Hi Abdullah,
      It is very easy just follow this:
      Note: You have to do the first and third step as I mentioned in the post.

      Step 2:
      1. Login to your blogger dashboard--> Posts
      2. Now click on Edit Post which want put this widget into it--> Select HTML
      3. Paste the below code into HTML

      <div class='form'>
      <!-- Custom Contact Form By WG Starts -->
      <form name='contact-form'>
      <!-- Name Field -->
      <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
      <p></p>
      <!-- Email ID Field -->
      <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
      <p></p>
      <!-- Message Field -->
      <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
      <p></p>
      <!-- Clear Button -->
      <input class='WG-btnLogin' type='reset' value='Clear'/>
      <!-- Send Button -->
      <input class='WG-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
      <p></p>
      <!-- Validation -->
      <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>
      <!-- Custom Contact Form By WG Ends -->
      </div>

      4. Publish or update your post and enjoy!
      if u have any problem put it here.

      Delete
  3. UnknownJune 13, 2017 at 5:45 AM

    hi i have tried many times to put Contact form on my blog, but not successful. please help me out .

    ReplyDelete
  4. UnknownJune 15, 2017 at 4:05 AM

    plz help me, as i have tried to add contact form so many times but not succeed

    ReplyDelete

Post a Comment