Show Mobile Navigation
, ,

Customize Contact Form of Blogger

Hemant Verma - 4:06 PM

As we all know that Blogger recently launched their contact form by which you can easily contact and send your questions and queries to the admin OR author of the blog / site and this very helpful for admins be'coz many professional bloggers had to purchase the hosting and then they created their own contact form by using PHP languages OR many of us (like me) use free wufoo OR and any other contact form making service and where we have create account and also had to spend long time to create them but after all you couldn't get any professional look but in today's tutorial you will easily design your contact form in just 5 min with free cost and it will for life long. 




It Include only 3 Simple Parts.

    1. Add Contact Form in Blogger
    2. Add Contact Form in Static Page
    3. Customize Contact Form in New Look


Part 1. Add Contact Form in Blogger

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add Gadget
  • Click on More Gadget
  • Select Contact Form


  • Now Give a Name to your Contact Form as we recommend you should give Contact Form

  • Finally your Contact Form Saved.



Part 2. Add Contact Form in Static Page

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Pages
  • Click on New Page 
  • Select Blank Page

  • 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>


  • Finally Publish that Page


Part 3. Customize Contact Form in New Look

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Press Ctrl + F and search the code shown below.

]]></b:skin>


  • Paste Below code just above it.

#ContactForm1
{
display: none ! important;
}


  • Now Search for </head>
  • 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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}
.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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>


  • Finally Save your Template and Say Bingo be'coz you are done with it.
  • Enjoy with Professional look of your own personal contact form :)

35 comments:

  1. Thanks for sharing these tips. I believe this will help us to improve our traffic if we will apply some principle that you have shared here.

    ReplyDelete
  2. Salam
    hi, bro where we'll receive our mail. in our blogger account?

    ReplyDelete
  3. @Ahmad Nawazyou will receive your mail at your gmail account which is connect with your gmail account.

    ReplyDelete
    Replies
    1. and what if i'm not? it doesnt work :/

      Delete
  4. Thanks for sharing a great post. I appreciate your thinking.

    ReplyDelete
  5. hi, great post!

    i have tried this on my blog http://www.awatravels.com/ and it's going well, but... i have a question, how to make the box more clearer?

    ReplyDelete
  6. Bro!i tried to email myself but when u click on send button
    nothin`n happens,help!

    ReplyDelete
  7. @uzair iqbalbro when u press send button then that mail will received by the admin of that particular blog.

    and if u enter your email id in the contact form then receiver will able to see ur id and also will able to reply u.

    ReplyDelete
  8. Is there a way to redirect the mail to another email address?

    ReplyDelete
  9. @Disney Brides: Ever AfterYou can forward that mail but there is no trick of redirecting.

    ReplyDelete
  10. Hey.. I want to change the color of the button from blue to Light Orange and also What to change the color of the text of the button from white to royal blue or green. Please suggest how to change.??

    ReplyDelete
  11. Great contact form widget for blogger. I really like it. i will definately add it on my blog. Thanks for sharing with us and keep sharing

    ReplyDelete
  12. sir nice tutorial and i heck email and admin page and i didn't get any email notification plz tell me the steps boss

    ReplyDelete
  13. Thanks for the detailed tutorial..

    ReplyDelete
  14. Thanks allot, But how to add more fields in this form? i.e Phone number or address etc.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. good tutorial
    https://scoutshrm.blogspot.com;

    ReplyDelete
  17. Great tutorial!! THANK YOU!! Question: What do I need to do to redirect people to a webpage after the "submit" button is clicked?

    ReplyDelete
  18. The comment box which is coming just below Contact Form does not look nice. How to remove it?

    ReplyDelete
  19. The comment box which is coming just below Contact Form does not look nice. How to remove it?

    ReplyDelete
    Replies
    1. Hi Shoaib,

      Welcome on WG.

      You can't remove that box because that box is available for user who will write his/her query in it.

      Keep visit daily here.

      Thanks and Regards.

      Delete
  20. i follow your steps..its working on normal blog like testblog.blogspot.com..
    but not working with custom domain..i was tested on 2 custom domains but no result..i was tested on to blogger blogs, it was working fine…y contact form not working with custom domain? please help me

    ReplyDelete
    Replies
    1. Hi,

      Welcome on Widget Generators.Com

      It's working quite well on my blog and I tested with another custom domain blog. It's working very well.

      We try to find error and soon inform u. Please mention your blog link.

      Thanks & Regards,
      Hemant Verma

      Delete
  21. this is my blog -- www.techhacker.co.in
    can you please give the tested link?

    ReplyDelete
  22. Thank you for the code! It works great on the web. However, when I try to use the same form from a mobile browser (I'm using Chrome on Android), the "send" button does not respond. The "clear" button will indeed reset the form, but the "send" button does nothing. :-/ Any ideas on how to fix this?

    ReplyDelete
    Replies
    1. Hi,

      Sorry for inconvenience but Google has been removed the third party designing on their official contact form, so that above codes will not work more now.

      Thanks,
      Hemant Verma

      Delete
  23. Hey admin , the send button if fully white and barely visible. How to change its color ?

    ReplyDelete
  24. @Hemant

    Bro Can you please help me with this i want to receive msgs from contact form on different email like hotmail

    ReplyDelete
    Replies
    1. Hi Sayyed,

      You can receive your up-coming mails on only one email id by Google Contact Form, if you want to receive mails on different service provider then you have to make a new contact form by using other service providers like 123contacts etc.

      Thanks & Regards,
      Hemant Verma

      Delete
  25. hello sir. i had copied the exact code as well as followed the given steps but i am not receiving email.
    There are 2 admin of my site. so to who will receive users mail? me or my friend as me and my friend are both admin.
    my site is - http://www.tantradhnyan.com/ please help me

    ReplyDelete
  26. Hi there,

    I have the same query here as Minoli. I click Send but I cannot receive at either of the 2 Admin accounts on my site. Appreciate if you can help

    audiosplitz.blogspot.com

    ReplyDelete
  27. Thank you for sharing!

    I put the HTML code inside of an HTML/JavaScript Gadget (instead of a page) and the contact form appears as it's supposed to, however the send button does not work. It clicks but the message is not sending. Would you know why this is? Maybe because of the because of the condition tag?

    You can see it here: http://courtneyebmeyerfitness.blogspot.com

    Thanks in Advance!

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS