How To Add Contact Form (Contact Us Page) in Blogger

Having a contact page on your blog is highly important. It is how visitors, brands, and companies can reach you and it’s something that every blogger should have. If sharing your email address on your blog is not your cup of tea, a contact form can serve as an easy way for others to get in touch.


if you do go the route of using a contact form, I do suggest that you also include an email address on the Contact page as well. You can set one up specifically for your blog if you don’t want your personal email address to be seen. The reason I believe this is so important to offer both options is because most brands and companies will not fill out a contact form to contact you. They usually want to email you through their own email client and add you to their contacts.

Adding a contact form to Blogger can be done with a few coding tweaks. Blogger actually offers a free contact form for your blog, unfortunately they’ve made it as a Gadget and placed it on the Layout page so that it is added to your sidebar. Not the ideal place for a contact form, if you ask me! It should be situated on its own page, so here’s how to set it up that way:

Adding a Contact Form to Blogger

Follow the steps....

Step 1: Click on Layout from the left sidebar to get an option to add gadgets.

Step 2: You can see an Add a Gadget link on the main panel on the right side. Clicking on it will bring you to a list of gadgets.

Step 3: Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same

Step 4: click on Theme from the left menu. Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.

Step 5:Click inside of the editor textarea and press CTRL+F and in the search bar type ContactForm1 and Remove this code.

Step 6: Do a new search, this time looking for ]]></b:skin> and pasting this code directly before it:

.contact-form-widget { margin-left:auto; margin-right:auto; width: 600px; max-width: 100%; padding: 0px; color: #000; }
.fm_name, .fm_email { float:left; padding:5px; width:48%}.fm_message { padding:5px; }
.contact-form-name, .contact-form-email { width: 100%; max-width: 100%; margin-bottom: 10px; height:40px; padding:10px; font-size:16px; }
.contact-form-email-message { width:100%; max-width: 100%; height:100px; margin-bottom:10px; padding:10px; font-size:16px; }
.contact-form-button-submit { border-color: #C1C1C1; background: #E3E3E3; color: #585858; width: 20%; max-width: 20%; margin-bottom: 10px; height:30px; font-size:16px; }
.contact-form-button-submit:hover{ background: #ffffff; color: #000000; border: 1px solid #FAFAFA; }

Then, click Save to.

Step 7: Go to Pages and click on New page.

Step 8:In the page editor, Add a title (like Contact Us).  switch to HTML mode and Paste the following code into the HTML post editor.  and then change the settings given right as given below.

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="fm_name">Your Name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div><div class="fm_email">E-mail Address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear:both"></div><div class="fm_message">Message *:<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" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Finally, click the Publish button. That’s all.

Step 8:View your contact form! It should look like this:

Since this uses the Blogger Gadget interface, the emails sent using this form will be sent to the email associated with your account. You can change this email address in the Admin settings of your blog.

I hope this helped you out!