Add a contact form to page on Blogger

Bloggers contact gadget is a really easy way to add a contact form to your blog, however since it’s a gadget you can only place it in your sidebar or footer which is kind of an awkward place for a contact form. This tutorial will show you how to move it to it’s own page and how to customise it to suit your branding. When a visitor fills out the form, their message will be sent to the email associated with the blog. This is usually the admins email in settings.

add a contact form to a page on blogger

How to add a contact form to page on blogger

1. Go to Layout, scroll down to the footer and add a new gadget > more gadgets > contact form > save.
2. Go to Template > Edit HTML > Jump to Widget > ContactForm1
3. Click the arrow on the left twice to expand the code so that you see the following

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

4. Delete the code that is shown above in pink so that all that is left is the following

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

</b:includable>
  </b:widget>

5. Go to Pages. Create a new page or select your contact page. On the right click Options and under Compose Mode select Interpret typed HTML. Paste the code below into the editor where you want it to appear and save.

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

6. Go to Template > Edit HTML and find ]]></b:skin>, if you have trouble finding it check out this post for help. Above ]]></b:skin> add the following CSS

/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}

.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; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666;  /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF;  /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}

.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666;  /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px; 
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center; 
}

/* END CUSTOM CONTACT FORM BY XOMISSE */

7. Edit the CSS to match your blog and branding. The /* … */ are known as comments, they are there to help you identify what to change. There’s no need to remove them as they won’t appear on your blog.

8. Test your form to make sure everything is working correctly and that the email is being sent. The message will be sent to the email associated with the blog. This is usually the admins email in settings.

Post last updated:

63 responses to “Add a contact form to page on Blogger”

  1. I love this! I really need to have one, great post! Abi ๐Ÿ™‚

  2. I did everything like you said, and tried to edit some things and it didn’t work. It didn’t center it at all on my page and it stayed like the gadget looked before I hid it. ๐Ÿ™ Any help?

    1. Hello, did you add the CSS from step 6? Make sure there are no errors in your CSS above the code you add, otherwise it will not be fully read. If you link me to an example I can have a look for you.

  3. Tanja

    Hi,

    I love this post and your blog. I have a request though. How can I style the input-boxes, so they will have kind of the same style as yours? Do I use the webkit etc. CSS?

    I also have a question regarding the dropdown menu. I’ve followed your great tutorial and styled a pretty nice menu. But I can’t seem to move the dropdown menus down. When I add ‘margin-top’ they’ll move down, but they dissapear, when your moving the mouse. Any ideas?

    – Tanja

    1. Hello, I’ve included the CSS in step 6 for the contact form in the example. As for the dropdown menu, you can add a padding value to #cssnav li ul instead. Hope that helps!

  4. tanja

    Hi, another quick question. When the email isnt’t send, the error message gets the box to ‘jump’ to the side. Is there anywhay to fix this?

    And I’ve add a suscribtion options to the form. Which opens in a new window, when the message is sent. However, I would like to keep the “Message sent” message, so it doesn’t dissaepear. Like the error messages. Is there any way to do this? ๐Ÿ™‚

    1. Hello, make sure you’ve removed all the required code from step 4, if it’s all been removed it shouldn’t jump. As for keeping the success message, unfortunately this is Bloggers default way of showing it and there’s nothing you can really do unless override the widgets.js file.

  5. Thanks for your tutorial I made some feature using your tutorials… I want to ask how I can link the contact form to my drop down menu “Contact Me” if the post not publish I can’t have the url for link

    1. On Blogger the link for a page follows this format http://yourblog.blogspot.com/p/pagetitle.html so you can figure it out from that. You could always publish the page, get the URL and then revert the page to a draft.

  6. Maru

    Thank you so much for your wonderful tutorials! Quick question, I’m tryting to adjust the width and it stays very small. For the mobile version, it looks off screen.

    This is the site: http://cambthoughtstest.blogspot.mx

    Thank you! ๐Ÿ™‚

    1. Hello, try adding the following to your CSS to override some default code by Blogger that could be affecting the size – .contact-form-name, .contact-form-email, .contact-form-email-message {max-width: 100%; width: 200px; }.

  7. Hello! Thank you for the tutorial! It really helped me a lot!

    I just have two quick questions that I can’t solve by myself. Below is the link of my contact page.
    http://pastellediary.blogspot.com/p/message-me.html

    My first question is why I can’t change the text box size of the message area. The second question is why the submit button looks awkward. The space above the word “Send Message” is too big and it’s also too close to the bottom part of the button. Any idea as to how I can fix them?

    Thanks so much for your time and help! ๐Ÿ™‚

    1. Add .contact-form-email-message {max-width: 350px; width: 100%;} to your CSS to change the message area size. The submit button is some conflicting CSS already in your template, add .contact-form-button {line-height: auto;} to your CSS, that should correct it.

      1. Thank you so much for your help! It’s working perfectly well now! ๐Ÿ™‚

  8. Hi Elaine,

    I want to thank you for taking the time to create such a generous post. I’m sure takes a lot of time, but more important – I really appreciate your guidance. I’m not a professional but I’m making an effort to revamp my own blog with whatever resources are available.

    I followed your example, but for the life of me….I dont understand why the submit button is hanging to the right side of the contact form. I’m also trying to figure out how to change “submit” to “send message”. I could use your advice.

    Thank you,

    Priyanka

    1. Hello, thank you so much! That’s so sweet. The button in your template is set to display inline so we can add code to your CSS to override that – go to Template > Edit HTML and find ]]> </b:skin>, above it add .contact-form-button { display: block; }, that will move the button to it’s own line. To change the text on the button, find go to your contact page (the code in step 5) and change value='Submit' to value='Send Message'.

      1. Priyanka Singh

        Hi Elaine!

        It worked! Thank you a thousand times. How inspiring. There is a part of me that has a desire to learn how to code. I find that I really enjoy learning it. Whenever I have to figure something out, it’s really satisfying to know how to do it on your own and see the results instantly. It’s…like magic. ๐Ÿ™‚

        Thank you again. I truly appreciate it.

        –Priyanka

        1. I know that feeling Priyanka, love finally figuring something out and seeing it work!

          1. Priyanka Singh

            Hi again Elaine.

            I feel like I’m pestering you, but I tested the fill-form and sent 3 emails in the last several hours. For some reason, I am not receiving the e-mail. I even checked my admin setting for blogger as you suggested in your directions; and I do have the correct email address entered. Do you know what the problem may be? Is it something I could have done wrong with the coding?

          2. Hey Priyanka, make sure to follow step 3 of the tutorial and remove the code from the gadget. That might be causing some problems. Check the spam folder of the email address in the settings, incase they went there. Test the contact form again using a real name, email and message.

  9. Thanks so much for this tutorial (and many others!). Contact form works perfectly, but I’d need to add a few extra fields. I’ve made it so far that I’ve got the fields within the Contact form, but the information from those fields isn’t on the email. Any advice?

    Thank you so much for your help!

    (The URL above is for my other blog, the one I’m working on now is not yet public.)

    1. Hey Jonna, you’ll have to add a custom contact form instead of using Bloggers ๐Ÿ™‚

  10. Searchhat

    its really nice. working wonderfully

  11. Hi Elaine,

    Thank you for this post.
    I tried it and it works on the design but when I click send/submit, there is nothing happened. I check my inbox and there’s no new mail.
    Any idea how I can fix it?

    Thank you.

    Rini.

    1. Hello. Make sure not to delete the actual gadget, only the code shown. When adding the code to a page, make sure that the code for the submit button is correct ๐Ÿ™‚

  12. Hi. Wonderful post you made which helped me alot. I just have a quick question.
    I did everything and it is working fine but I have the contact form aswell at the bottun of my blog page. I am wondering do I go back and delete or is there something else i can do to remmove it so it doesn’t affect the contact page.
    Thanks

    1. Hello, thank you. Yes, make sure you’ve completed step 3 and 4 ๐Ÿ™‚ that will get rid of the contact form in the gadget area.

  13. Thank you so much. It worked!

  14. Awesome post – thank you so much for sharing! This just made my life so much easier. ๐Ÿ™‚ God bless!

  15. Oh my goodness, it works! You are the greatest! So many times, I have followed tutorials to the letter, and only to then not have them work after having painstakingly followed every instruction to the letter.

    Thank you so much!

  16. Oh, this is perfect!!! I love all of your posts, you explain things super well and everything comes out great! (: I did struggle with the contact form on the bottom, though, but only because I forgot to save my template! ^.^ But I read the comments and went back, and sure enough, the entire text was still there. Anyway, it’s lovely now, and it really is a cool element. Thanks so much for sharing your knowledge!!!

  17. Aastik

    Great post and explained well. It is working on my website. Thanks for sharing.

  18. Hi, I followed everything and it all seems to be working correctly when im looking at it through BLOGGER, but when I go to my site I keep seeing an error message that it can’t find the page. Please Help

    1. Go to Pages and hover over your contact page, select view. That will give you the correct link ๐Ÿ™‚

  19. Wow!!! Great post! It’s working in my blog. Thank you Writer.

  20. This is just Awesome! Always works like a charm. Each time. ๐Ÿ™‚ I have this page bookmarked for months now and I always come back here for reference in all the blogs I create for myself and my friends.

  21. Thank you for the tutorial. I’m not sure what I did but I’m still getting the contact form in the gadget on the sidebar. When I go to edit HTML and select Jump to contact form this is what it says: (I hope I did this right)




    *

    *





    I’m not sure if it’s supposed to say “sidebar” on the top line
    HELP
    TIA

    1. oops, maybe this time you can see is

      1. Hi Chelsie, can you please use a Gist to share the code as I still can’t see it. Thank you.

  22. I followed each step to what I think was perfect! But I couldn’t get my CONTACT page to show up, it would just show up in the bottom like a gadget when I followed your advice from another comment to fix it, it completely deleted everything ๐Ÿ™ please help (I loved the way it looked though! Just wish it would’ve published properly!)

    1. Hi Krystina, I can’t access it via your blog to see what issue you are having. When you remove the code directly from your template, make sure the page saves correctly before exiting. Also make sure you’re pasting the provided code into the contact page on HTML mode, not compose.

  23. Hi. I’ve been using your blog as reference on all my blog design dilemmas. Wanted to say thanks for all your tutorials. Just a quick question. Changing the values on my CSS codes doesn’t seem to work. My contact form still looks the same. What do you think am I missing?

    Best regards,
    Anna

    http://eightyinmint.blogspot.com/p/contact.html

    1. Hello Anna, make sure you have no errors (typically missing / extra characters) in your CSS, they might be blocking it from being read correctly.

  24. Hi there,
    I found this guide very useful for my blogger based website. I implemented in my test blog before unleash this powerful form into my original blog. I hope that I am allowed to tweak the code/s to customize as per my need. If you are not ok with this, let me know.
    Keep up the good work with this blog and I plan to visit what you up-to next in this blog.

    Cheers,
    Joydeep

  25. I’ve done each step correctly and the design of the form is perfect, the hover effect works but when I actually click the send button to send the message nothing happens :/ Is there any way to fix this?

    1. Hello. The form fields aren’t inside the form tags, you’ll also need to remove the span tags and style it only using CSS.

  26. I would also like to add a new field “website” if this is possible.

    Thank you xxx

    1. You’d need a custom contact form instead, not possible to add fields to the default Blogger gadget.

  27. nelson

    i followed all the steps but the problem am having now is that the codes are now showing above my website and i don’t know how to remove them.

    1. Hello, this usually means they have been put in the wrong place in your template. Go to Template > Edit HTML and remove.

  28. chetan

    Thank You So Much

  29. Is there any way to change the heighth of form? I figured out how to change the width but can’t seem to figure out to make the heighth higher. Any suggestions?

    Thanks so much for the tutorial!

    Lisa

  30. Wow! Thank you soo much! I’m super new to this blogging and coding situation and I knew I needed this. You have been a great help!

  31. thank you so much for this, you are so lovely, you have saved me from a lot

    thanks, so much appreciation

  32. Hi! I was wondering if there was a way to alter the padding of the submit button and make it more stylized to my preference? Thanks ๐Ÿ˜‰

    1. Hi Julia. Yes, you can use the selector to add any styling you want in the CSS ๐Ÿ™‚

  33. I can’t tell you how much time I’ve spent trying to get a comment box to work on one of my pages. This worked beautifully. Thank you so much for sharing your knowledge.

    1. Thanks for taking the time to leave a comment Eve, so glad this worked for you ๐Ÿ™‚

  34. just want to say thanks for this and many other tutorials so thank you!

    have a lovely day.

    1. Thank you Lissa, that’s so kind!

  35. Nice post.. Thanks

  36. Many, many thanks! This was super helpful!

  37. i want to redirect to “thank you” page after submitting contact form instead of “your massage has been sent.”

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.