New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.

The contact form for Blogger has the following features:
  • Field for the user name
  • Field for email
  • Field for the message (textarea)
  • Submit Button
Screenshot
contact form, blogger gadgets, static page
 The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.

How to Add Contact Form to Blogger

To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget.


blogger gadgets, blogger widgets, contact form

Styling Contact Form


As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* 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 will look like after applying the style:
contact form, blogger gadgets, contact form for blogger

To add this style, go to Template > Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (press CTRL + F to find it):


How To Add Contact Form In A Static Page


First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

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

After you have saved the template, go to Pages and paste the following code into a 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>

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

Here's a demo page where you can test it (it is an account that I don't use, so don't expect reply).
That's it! If you have any questions or comments please post below.

86 comments:

  1. Soo nyc Tut Dear Thanks for share :)

    ReplyDelete
  2. Now days Google is improving a lot in blogging platform. This is one of the last improvements in bloggers. Many bloggers are expecting something lacking in the blog. i.e none other than the contact form. Now no need to depend on the 3rd party codes.
    STILL MISSING SOMETHING

    ReplyDelete
    Replies
    1. yup #PAWAN you are right... Now no need to depend on the 3rd party codes. but some time...........

      Delete
  3. This worked perfectly. Thank you for the coding and tips.

    ReplyDelete
  4. Thank you, it works :)

    ReplyDelete
  5. great...... it worked, thanks mate :)

    ReplyDelete
  6. work perfectly, thank you

    ReplyDelete
  7. brother, in my blog Contact Form widget "send button" is not working, i mean there no action after pressing "send button", please help me..
    i think the issue is with the template of my blog..
    Please have a look http://www.idiotsfreedownload.com , m sure you can fix the problem.

    Thanks.....

    ReplyDelete
    Replies
    1. I have the same problem to SEND button doesnt work ı'm about to remove thıs :(

      Delete
    2. Same problem, nothing action when i press send button :(

      Delete
    3. Same problem, nothing action when i press send button

      Delete
  8. Not working on mine...any help? The button appeared but no action is taken when clicked on. Thanks

    ReplyDelete
    Replies
    1. ya you have problem to your template change your template to another once. :)

      Delete
  9. Thank you it worked!

    ReplyDelete
  10. Thanks for sharing nice tips, worked well for me.

    ReplyDelete
  11. Hello when i added the styling Contact Forum code above the ]]> then it makes my sider adsense to stop apearning at the HOME page ? :( can you please tell me how to Fix it ?

    ReplyDelete
  12. I m doing exacltly as you said but the form doesnt show up, what I m I doin wrong?

    ReplyDelete
  13. After I remove the part In Red as described and after adding the page with the code you show, the contact form is not visible :'(

    ReplyDelete
  14. Anonymous8/31/2013

    OMG, thank you so much this helped me SO, SO, SO MUCH! :) I can't stop thanking you!

    ReplyDelete
  15. It works perfectly for me! Thanks so much for your effort!

    ReplyDelete
  16. thank you very very much! it really helped me out!

    ReplyDelete
  17. how to add this widget to only one page of our blog.

    ReplyDelete
  18. Its not working with mine either send button does not work nothing gets sent I"ve followed these step impeccably as well as trying others from other posts and it still does not work.

    ReplyDelete
  19. thanks for the tutorial but what if I want to send the contacted person's reply not on the same email associated with blogger but on a different email address, say a hotmail or yahoo id which is my primary email id.

    Any help is appreciated, thanks

    ReplyDelete
  20. How can I adjust the width of the fields, the contact form is too wide for my widget area. I have tried everything but it wont change. please help.

    ReplyDelete
  21. 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
  22. From where I can check these messages, and how can I reply to those who tried to contact me?

    ReplyDelete
  23. Dear helplogger, I made this and was working fine until I changed my email address. Please advise how to modify destination email address of this form?

    ReplyDelete
  24. I want to change email receive mail from contact form, don't you?

    ReplyDelete
  25. Please help me! i did everything just as described however i am not receiving any messages. what am i doing wrong? this is my site: http://11onlyloveisreal.blogspot.co.uk/p/blog-page_2.html thank you so much for your help!

    ReplyDelete
  26. I have this widget but it does not work. Do you have any idea why? If so could you please give me detailed directions on what to do. Thank you :)

    ReplyDelete
  27. I added the CSS part directly into "Template > Customise > Advanced > Add CSS" and it is working like a charm ;) Thank you for the coding and tips.

    ReplyDelete
  28. This is great! Thanks.

    ReplyDelete
  29. excellent and good one dear. i use it here www.psychtronics.com/contact.html

    ReplyDelete
  30. Hi. Would you please have a look why the submit button on my blog at findingsynonyms.blogspot.com/ is not functioning. Thank you. Miriam Mozrui

    ReplyDelete
  31. Hi. I found a way around the problem i was having with the "submit" button. Thank you for the post.
    Miriam Mozrui

    ReplyDelete
  32. Thank you, that was very helpful!

    ReplyDelete
  33. when someone completes a contact form, where does it send to? that pages email? or?

    ReplyDelete
  34. Thank you for this article. It helped me set up my contact page and it's working. However, the size remains the same. I am new in blogging so I am trying to learn through reading articles that could help set up a good one.

    Here is my blog. http://successfulonlinedeals.blogspot.com/

    ReplyDelete
  35. Wow, this article veri useful, well thank's for share. i can make it for my blog.

    ReplyDelete
  36. Hi, work it. But when i try to "Submit" the message not work, i have disable all extension of Google Chrome, i have try with another Browser but no change

    ReplyDelete
  37. Dear Thanks for your post.. this is awesome! But you've not mentioned how to remove the blogger's default comment box on the contact page? This is important. I'm asking what you've done on your blog's contact section.
    http://pchelp786.blogspot.com

    ReplyDelete
  38. Jazak Allah (these words say muslims)
    (May Allah Give reward you with goodness)
    Thank you

    ReplyDelete
  39. Hi my send button is not working it is saying sending but it is not sending. Can anyone help?

    ReplyDelete
  40. Got the widget contact form when send it is saying sending, but it is not sending how can I fix this?

    ReplyDelete
  41. Anonymous3/11/2014

    Thank you so much for this!! I was really helpfull :)

    ReplyDelete
  42. The last step seems to be wrong since we will be pasting the html code on new blank page?? Not on edit html? need to find another tutorial

    ReplyDelete
  43. Added the widget. Send button appears to be working (Displays "your message is sent"). But I message has not appeared in my inbox. test message. Any idea what's going on? Thanks so much for your reply.

    ReplyDelete
  44. Thanks for the code. Decided to keep the Contact Form in the sidebar. I want to keep reminding visitors to send a message/contact me throughout the entire site. check it out htp://equipmentmarketing.blogspot.com

    ReplyDelete
  45. not work in my template :(

    ReplyDelete
  46. That was one awsome post...it really helped!!!

    ReplyDelete
  47. Hi there! It is a good tips and I see everyone happy with that tips but me. Please take a look my blogs and help me to check why it doesn't work perfectly? Thank you!

    ReplyDelete
  48. Sorry, my blog is www.hocvahoc.com, thank you!

    ReplyDelete
  49. very nice!!!! Good

    ReplyDelete
  50. Awesome. Thanks so much!

    ReplyDelete
  51. Worked 100% Fine !! thank you.

    ReplyDelete
  52. Just what I needed, Thanks!

    ReplyDelete
  53. Says 'your message has been sent'. but i'm not receiving that in my registered email id. Checked in the Spam folder too...
    Can you pls help me ?

    ReplyDelete
  54. Anonymous5/26/2014

    The element type "p" must be terminated by the matching end-tag "</p>"

    ReplyDelete
  55. Thank you, that was very helpful !

    ReplyDelete
  56. Beautiful, thank you!

    ReplyDelete
  57. Nice. I would like to add in "Phone" as well. But i have zero coding knowledge!

    ReplyDelete
  58. COOL! THANKS IT LOOKS GREAT BUT... IT DOESN´T WORKS, I MEAN, IT DOESN'T SEND THE EMAIL, I SWEAR I DID EVERYTHING OK, WHAT COULD BE THE PRBLEM DUDE?
    THANKS

    ReplyDelete
  59. Thanks bro..Great tutorial...It's working for me..

    Just require a minor correction. Complete the end tag of 'p' around Name field.

    ReplyDelete
  60. Great tutorial :) Thank you!!

    ReplyDelete
  61. The message " your message as been sent" doesn't show up, like it shows in your demo blog.

    ReplyDelete
  62. Thank you, This one worked for me.
    Christina Reeder @ www.LifeThrowsLemons.com

    ReplyDelete
  63. Hi! Thank you so much for this tutorial. I followed everything perfectly, to a "T," but unfortunately it just isn't working for me. The gadget contact form is hidden, but I can't get it to show up on the actual page…I'm having a similar issue with another page I have. It's quite frustrating. I've been staring at code for three days trying to figure out if I messed something up. Do you have any solutions?

    ReplyDelete
  64. I added the code and the form looks great! Is there any way I can change the alignment from the center to the left?

    ReplyDelete
  65. Thanks a lot it worked for my blog: http://it-certification-dumps.blogspot.in/
    I have a question: i have added form in bot gadgets and static page. but on static page gadgets form does not work. help plz

    ReplyDelete
  66. Anonymous7/24/2014

    Can somebody tell me where the emails are sent to?

    ReplyDelete
    Replies
    1. the email address that you're connected to blogger account

      Delete
  67. Worked like charm......... Thanks for sharing

    ReplyDelete
  68. thank for ur tutorial making contact form pages ^.^ it works fine

    ReplyDelete
  69. I have installed the comment form but find that I am not receiving any messages sent from internet explorer browsers. Others are coming through fine. Any suggestions on how to fix this would be greatly appreciated. Thanks much!

    ReplyDelete
  70. Those of you who found it didn't send the message when u hit the send button, here's why." You probably have done only the second part (like I did initially). You have to do all steps - Add the gadget, go to "edit HTML"and delete the red part and then paste the code in the page. Hope that works for you.
    This was awesome. Thanks!

    ReplyDelete
  71. Hi I added a contact contact form to my blog with custom domain -- http://www.techhacker.co.in/
    ...but its not sending mails..and i installed the same template to normal blogger, its working with normal domain -- http://contacttechhacker.blogspot.com/.
    please help me...y its not working with custom domain?

    ReplyDelete
  72. So how come it works for some and doesn't for others? There seem to be differences.
    After having done as you suggested, my form state 'message has been sent', yet it doesn't arrive in the registered mailbox.

    ReplyDelete
  73. Ooi .. this entire blogger -widget doesn't even work properly in the normal setting, so without making changes. The contactform doesn't work at all!

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!