Create a Custom Contact Form For Blogger - Part 2


Custom Blogger Contact FormIn the first part of our series you learnt how to add a contact Form to your BlogSpot blog and control its display settings. Today you will learn how to change its stylesheet to reflect your custom styles with a more appealing design. You will learn today how to customize the Form input fields, add icons to it, add a "Clear Button"  and play several tricks with your custom form. The form is built using XHTML Get or Post Methods unlike PHP Forms which are used widely today. If you have not referenced the first part of our tutorial then kindly read it first:

3. Customizing The Contact Form - The Fun Part!

Now you will need to create a Static Page where we will add the HTML code for our new contact form.

  1. Go To blogger > Pages
  2. Choose a Blank Page
  3. Give it any title you like. I recommend "Contact Us"
  4. Switch to its HTML mode and paste the following HTML code inside it:

<div class='form'>
<!-- Custom Contact Form By MBT 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='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/> 

<!-- Send Button --> 
<input class='contact-form-button contact-form-button-submit MBT-button-color' 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 MBT Ends -->
</div>


    5.  Don't switch to Compose Mode of your Blogger Editor else the code will get messed up due to your Editor settings. Save and Publish your Page.

   Now if you visit your contact page you will see the default contact form with blue button. Its time to customize its default styles.

Customizing The Form:
  1. Go To Blogger > Template
  2. Backup your Template
  3. Click "Edit HTML"
  4. Update: Search for </head>  and just above it paste the following CSS code:

 

<style>

/*---- Compatible contact Form by MBT -----*/

.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;
}


.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

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

The above Stylesheet will work just fine with all browsers including Internet Explorer. The code has been made compatible to work fine with all major browsers like IE, Mozilla and Webkit browsers.

  • To change button colors edit the class .MBT-button-color
  • To change the button color on mouse hover edit the class .MBT-button-color:hover  and for active mode edit .MBT-button-color:active

 

     5.  Save your template and you are all done!

4. Add the Form anywhere you like!

Now if you wish to add the form to your sidebar or post  then simply follow these steps:

  • To add the form to sidebar. Copy the HTML code in Step#4   and paste it inside HTML/JavaScript Widget
  • To add the form to Post editor, switch to HTML mode and paste the code in Step#4  inside it

Your Views:

I just hope this tutorial would be helpful for all of you. The steps are extremely simple and the codes are carefully written. You can now create a contact form to let your clients request you for a price quote or add it to let your readers contact you in person. Wish you all the best with your blogging endeavors. I will make sure you enjoy it to your fullest. Peace and blessings buddies :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

89 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Mustafa , Good work . MBT is always my favorite place to learn something new .
    Now Seems like old days has come back .

    ReplyDelete
    Replies
    1. من فضلك يا استاذ مصطفى اين اضع رابط الفيد الخاص بى
      او منفضلك اخبرنى كيف يعمل الكود

      Delete
  2. But they can't add an attachment! And no CAPTCHA? I'm unsure whether i should add this spam form to my blog.

    Can you solved this problem please, Mustafa? Thanks anyway :)

    ReplyDelete
  3. Great job Mustafa Sir. We like your efforts. Awesome designing contact form its look like eye-catchy. Thanks Once again. We will be in touch and will hears for latest updates.

    ReplyDelete
    Replies
    1. Hey Hafeez! have you ever tried such a contact form where it's possible to connect the form by a tab with the support of Jquery and you could even use Muhammad's recently released style of contact form...

      Try out how to connect contact form by a tab with Jquery the robustic way you've ever seen..

      Connect Blogger Contact Form By Jquery Support

      Delete
  4. To tell you the truth, the code is not working as I had paste it on the skin. I think you miss one or two steps more. Hope you notice it and improvise this post.

    ReplyDelete
    Replies
    1. Sir use an effective way to represent contact form by connecting with a link where no needed to add it by a blank page (the antiquary way) just it will show a dynamic popup with form and other area will remain underneath of opacity effect and entire thing will be great charming try out atHere

      Delete
  5. heyy, When i click on the send button , nothing happens. Where would the contact form details go. Don't i need to add my email id or Google Docs URL.. This is just the front end,, what about the back end :?

    ReplyDelete
  6. Awesomely designed contact form. Thanks a lot Mustafa bro.
    I am damn sure that this widget will be loved by all the bloggers. I salute your efforts and hard work. Keep it up dear ^_^

    ReplyDelete
  7. @Mustafa:
    Brother, I followed all steps carefully.
    But, there is some problem with my blog.
    Please check it out: www.pdfuniverse.blogspot.com
    The contact form is not hidden from homepage.
    And some of my css is also shown on the homepage screen.
    Please solve it :(

    ReplyDelete
  8. To fix the "Send" button issue, just find this code:

    <input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

    and replace it with the below code:

    <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

    it will change the color of the Send" button!

    @Computer Knowledge World - http://atozhackingtricks.blogspot.com

    ReplyDelete
  9. Thanks Mohammad! Great tutorial.

    It worked on my blogsite.

    For those who are having trouble, you can include the css code on the blank page where you pasted the html code. Just enclose it in <style></style> tags.

    ---

    example:

    /*..the html code..*/

    <style>

    /* ..the css code.. */
    /* the one to be pasted in </b:skin> */

    </style>

    ---

    Don't forget to delete the <style></style> tag inside <!--[if IE 9]><![endif]--> tag or else the css codes that comes after it will show up on your 'contact us' page.

    to do it, press ctrl+f and type <!--[if IE 9]> then press enter. Delete <style> next to it. Press ctrl+f again and type <![endif]-->. Press enter. Delete </style> before/above it.

    ---

    <!--[if IE 9]>
    <style> --> delete

    /* ..IE Support here... */

    </style> --> delete
    <![endif]-->

    ---

    I got the idea from Harman Hira's link post.

    here's my contact page:
    http://utaklaya.blogspot.com/p/blog-page_27.html

    thanks again.
    cheers!

    ReplyDelete
    Replies
    1. But Send Button is not working.. any solution.

      Delete
  10. Attention

    As I expected I guess most of you who are having troubles did not even read Part1? did you? :p
    In Part1 I mentioned that you will firts need to create a contact form using Layouts > Add a Gadget option. Once you create it you will control its display after whihc you will follow Part2.

    Ofcourse the send button wont work unless you register/Create your contact form using Layouts > Add a Gadget > Create Contact Form.


    do it and let me know. the code works just fine. :)

    ReplyDelete
  11. Post Updated and Fixed
    I am extremely sorry buddies I forgot that I was adding the IE conditional statement inside the b:skin tag. I just fixed the code and it works fine now. :)

    @依之汉 @Moihammad Waqas and @Kunal
    Forgive me buddies :) Code fixed now


    @Brian
    Thanks for that alternative way and for helping the readers dear. I would suggest that you add the IE conditional tags inside the style tag else the contact form wont display correctly in explorer. I have corrected the code you can now use it.:)


    ReplyDelete
    Replies
    1. Mustafa Ji,

      My form is working fine on Chrome and Firefox but when i am using it on Internet explorer and click on send button. It just gets stuck on sending and does not send message to me. When i use this on Chrome and Firefox, i am getting emails correctly. This problem is coming only in Internet explorer. Can you please suggest something?

      Delete
  12. I have a problem with it..I have done all thing and when I am testing it.. Message is not being send.. now What to do.

    ReplyDelete
  13. The code worked but I do not want to display a contact form on my homepage. I tried to remove it with a condition code but it didn't work.

    ReplyDelete
  14. @vivek

    You have not read part1 of the tutorial. Please read it firts and create the widget so that your contact form gets registered.


    @Purcival

    You can apply all conditional tags and control the widget display by reaidng this post: Show Hide Widgets in Blogger :)

    ReplyDelete
  15. To Whom The Message Will Gone Mustafa

    ReplyDelete
  16. @Shiraz Shakeel you will get email on gmail email id which you have used in your blogspot a/c.

    ReplyDelete
  17. @Mohammad Mustafa Ahmedzai
    Thanks Dear.
    working fine.
    Bs homepage sy form hide naheen hua :(

    ReplyDelete
  18. Nothing happens when I click on send button. Please help.
    My page link: http://faadufiles.blogspot.com/p/contact-us.html

    ReplyDelete
  19. @ Nik P
    visit
    www.clouspedia.blogspot.com
    and a mail nothing happens my contact form is not sending
    Plzz mustafa help me

    ReplyDelete
  20. Sir Mustafa you are a great man, you always comes up with innovative and alluring topics.

    ReplyDelete
  21. @shiraz

    The email will be sent at your Gmail ID. :)

    @Nik P
    Well answered :)

    @Muhammad waqas.

    For hiding the widget on homepage use the conditiona tag present on this page Blogger conditional Tags

    :)

    @utkarsh @Shiraz
    Buddy read Part1 Please!!!! Do me this favor :)

    @kakaru
    thanks for the kind feedback buddy :)

    ReplyDelete
    Replies
    1. Mine works fine, but i have a quesiton.
      why you did't give a condition, the CSS will execute for all Posts and pages and will increase load time? is't?
      why not Css code execture just for the Static Page contact form page? can we add CSS code inside Contact me form page?

      Delete
    2. The Contact form Looks Fabolus but not sending any mails to my Gmail id also . What might be the problem ?

      Not finding out . my blog is http://clothingtechpack.blogspot.com

      Please help

      Delete
  22. @Shiraz Shakeel Dude you need to add Contact Form widget in your template, after that if you wants to hide it, then hide it ( steps to hide widget : http://www.mybloggertricks.com/2013/05/customize-blogger-contact-form-part-1.html )

    after that copy above code and past it in static page and publish it and check.... hope so it ll work for you :)

    ReplyDelete
  23. Well, I am glad to see that there is a Muslim blogger who is much famous and equally helpful. Your tutorials are good. And this one for making contact form page is extremely beneficial for me. Keep up :)

    I have a blog " www.benignblog.com " and I need some help regarding it. Even though, I have almost completely designed it by myself but there is still something which I am not able to fix. So, I should contact you in person via email, I guess...!

    ReplyDelete
  24. Dear Mustafa
    i need a great template for my this blog
    www.cloudspedia.blogspot.com
    can u find it for me?
    plz

    ReplyDelete
  25. Dear Mustafa Wordpress Is good or Blogger
    I like wordpress because in wordpress if you publish anything in the you won't get .html which is good now which should i select and in wordpress you will get your website / blog when you upload media files in blogger it goes to picassa which is to wrost

    ReplyDelete
    Replies
    1. @Shiraz Shakeel,

      I think for starters blogger is a good platform to start a blog it's easy to use and very effective also. I would suggest you to go with blogger blog because i think the biggest problem with a wordpress blog is you can't use it's full features like you can't add a HTML codes like Google Adsense codes unless you have a pro wordpress account and for this you will have to pay a monthly amount to wordpress which i think is very difficult for any new blogger to pay that fee. But in blogger you don't have to pay any kind of monthly fee to host your blog or any thing. and you can also use any HTML codes very easily in blogger blog like Google Adsense codes.

      Hope i will help you.

      Delete
  26. Plz answer me anyone who is online plz

    ReplyDelete
  27. Very informative post. But I have also used these tasks for my site seo. I'll try to adopt your tips for few time to check if it really helps my site's seo. Also visit Free Likes and Tech Blog Thanks for sharing the article!

    ReplyDelete
  28. Here are 5 best ways to create your custom contact form for blogger i think you should try this.

    http://www.cyberockk.com/2012/07/5-best-waysto-add-custom-contact-form.html

    ReplyDelete
  29. I have just added it on my blog....It works fine...thanks for it....Can I please tell me how to add a title above each box? Like Name, Email Id, Message etc....and How to add more boxes like 'website link' and 'subject'??

    ReplyDelete
  30. Wow! Amazing! Thank you so much!

    ReplyDelete
  31. Thanks to Blogger that they finally release the contact form and big thanks to Mustafa bro by adding elegance style to it.

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

    ReplyDelete
  33. Very cool Mustafa, but you didn't tell us on how to change the messages which show after sending the message, or when something is wrong with the form, and of course we need to modify the emails where the message will be sent.

    ReplyDelete
  34. very helpful information............

    ReplyDelete
  35. how to add custom domain email address in contact form to receive the email

    ReplyDelete
  36. Great Job check out your work at www.sandfiretech.blogspot.com

    ReplyDelete
  37. why you did't give a condition, the CSS will execute for all Posts and pages and will increase load time? is't?
    why not Css code display just for the Static Page?

    ReplyDelete
  38. hi.this is really great article. I followed this article and created the contact form on my blog www.webcodeexpert.com.
    Its working and looking awesome. Thanks for this post. I suggest all reader and bloggers to follow this article and implement contact form as i did. Anyone can also check the implemented form live on www.webcodeexpert.com/p/contact-us.html

    ReplyDelete
  39. I followed both the parts. But the form is still getting displayed on the homepage.

    ReplyDelete
  40. Is there any way to add extra fields into the form? I tried altering the code but nothing entered into the extra fields is sent in the email. I've got to be missing something.

    ReplyDelete
  41. thanks a lot.I will use this instruction to make contact form for my blog
    www.Laptopcoolingpadhq.blogspot.in

    ReplyDelete
  42. Nice post sir. I followed your instructions to the latter and it worked well. But wen i tried sending a message with it to myself, i didnt recieve any message

    ReplyDelete
  43. hey admin MBT, why i dont send from my contact form ?? button send not work.. ?? why this ??

    ReplyDelete
    Replies
    1. First you have to Create your contact form using Layouts > Add a Gadget > Create Contact Form. Regards:

      Delete
  44. This comment has been removed by the author.

    ReplyDelete
  45. I have trouble in "send" button. I completely follow the steps Part1 and Part2. But when i click "send" button nothing to happened. Plz help whats the problem in code..

    ReplyDelete
    Replies
    1. I faced the same problem, but i fixed it, follow all the steps except part 1 post do this

      1: remove contact form widget
      2: search for ]] and just above it,
      Paste this :

      #ContactForm1
      {
      display: none ! important;
      }

      After following all the steps, then add contact form widget

      everything is fixed now,

      MBT rocks i also use this contact form on http://www.tutorialshour.com/

      thanks, hope this trick works

      Delete
  46. this is awesome method to add a contact us form, but it has bug. When anyone clicks on any label, it start showing this the contact form and i fixed this bug :
    Just press Ctrl+F and type ]] and paste this code just above it

    #ContactForm1
    {
    display: none ! important;
    }

    ReplyDelete
    Replies
    1. thanks! I tried doing your instruction and it really erased the contact form in the home page :) Thank you so much!

      Here is my blog: http://www.waisttrimmers.com.

      Delete
  47. Please visit my blog http://www.tutorialshour.com/ for more solutions and tutorials.

    ReplyDelete
  48. Wow ! Its Nice its working on my site www.thecinesizzlers.com

    Thank you for sharing with us

    ReplyDelete
  49. Its good. You make me feel that i learned some thing to day :-)

    ReplyDelete
  50. Your solution worked perfectly for me, thanks a lot for posting such an excellent method.
    I have one question though: I would like to track contact form submission as a goal in Google Analytics. Do you have an idea on how it is possible?
    Thanks!

    ReplyDelete
  51. @MOhammad Please Help Me .... The details on Contact Form Is Not send on my Email Address

    ReplyDelete
  52. Hii, thank you for the post, appreciating stuff !

    can any body help me to add and remove fields in this type of contact form?

    ReplyDelete
  53. It's working fine for me. May you please show me the way to add require field? Thank you for your awesome post!

    ReplyDelete
  54. Replies
    1. Will blogger process the new tables? I think we have to go by their script. And if their original script won't process the information from the new tables, the new tables will be useless.

      Delete
  55. Such an amazing post, i adore it
    Thank you Mohammad

    ReplyDelete
  56. Hi Mohammed where is the email sent to after submit

    ReplyDelete
  57. thank you so much ...works perfectly!

    ReplyDelete
  58. i can not hide sidebar contact form-1 why?

    ReplyDelete
  59. hello Mohammad,
    i added all the above code to my contact us page
    and form will will be sowing as you mentioned but there is problem??
    send button is not working ???
    what can i do please help me if you have time then?
    thanks
    my contact us page is http://www.latestpicsms.com/p/contact-us.html

    ReplyDelete
  60. how to make contact form like in your blog http://contact.mybloggertricks.com/

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

    ReplyDelete
  62. The send button is not functional on this code. When you hit *Send* nothing happens. The one on the sidebar is working fine though. Am I missing something here?

    ReplyDelete
  63. Hi i get lots of tips from MBT. I have used modifeid contact form and added mobile coulumn in it but it does not captures the data. Could you please help . my blog is http://atshealth4u.blogspot.in/p/contact-us.html#. Mobile feild does not gets capture.

    ReplyDelete