Contact Form

Self-Hosted WordPress:

As usual with WordPress (self-hosted) there is a plugin for practically everything! I recommend the Fast Secure Contact Form. It’s the one I use =) You can find more about that plugin here:


If you’ve ever scrolled through the available gadgets in Blogger, you’ve probably stumbled upon the contact form gadget (it’s in the “more gadgets” tab). If you added it to your blog, it would look like this:


The contact form is set up so that it will be sent to whatever email you have registered with your blog. The problem is that most of us want that contact form on a separate contact page and not in our sidebar. Well today we are going to go over how to insert that gadget into your contact page and make the contact form look better with css =)


This is a some what complicated tutorial since we have to go into the HTML and do some searching. To make things easier, I went through all the steps in a YouTube tutorial for you to view (silent video this time). Remember to click the gear setting and change to HD.

Here is the HTML and CSS code you will need for the video tutorial:

Don’t forget to change the colors for your submit button and submit hover!
You can find colors to use here:

Don’t forget to follow the video tutorial. It won’t work if you just copy and paste the HTML code into the page without adding the gadget!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

18 thoughts on “Contact Form

  1. Huh, I didn’t know that Blogger had a contact form widget until this post! I haven’t used it because for my contact forms, I’ve been using the Google Drive form function and then embedding that in whatever thing I want it in. I have a question though, does it matter which one I use? Or do both work basically the same?

    1. I’ve never used the Google contact form, but I imagine it has more features than the Blogger contact form. The Blogger contact form is pretty basic. They only thing I wouldn’t be sure about is how to customize the look of the Google contact form. I’m not sure how to customize the CSS of the Google form.

  2. I’ve added this to my blog but I was wondering how you add more questions/fill ins for the contact form, like message subject and website. Also, how do you make the Name required?

    1. I don’t think you can make the name required with this form. I don’t know how the form decides this and generates that message because this is Blogger’s widget. Trying to add a message subject and website input wouldn’t really work either. The email message is always [YOUR BLOG NAME] New message received. Blogger does stuff behind the scenes to make the form work so it would probably just ignore other input since it isn’t looking for it. If you want a form that has those things, I would recommend Googling for a different contact form that isn’t run by Blogger :/

  3. I have added this to my blog but I think there is some formatting problem. Its been added but I can’t see this on my blog. Please help. Address-
    Contact form is added to the right side just below to the about us gadget.
    Thank You.