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.

63 Comments

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

  2. 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!

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

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

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

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

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

  8. 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 ๐Ÿ™‚

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

  10. 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!

  11. 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!!!

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

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

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

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

    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.

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

  17. 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?

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

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

  20. 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!

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

Sorry, comments are closed!