How to Create a Contact Page in Blogger

Having a well laid-out contact form is very important for every blogger as this is the tool which your visitors use to share their feedback, queries and suggestions to you. It is simply a must have feature for every blogger.

contact us page for blogger


In the past, adding a custom contact form to Blogger was quite a complex process and many bloggers were forced to use third party services like FormGet, JotForm, 123ContactForm, etc. But Blogger has launched its own contact form gadget which is really an easy way to add a contact form to your blog, however since it is a gadget you can only place it in your sidebar or footer which is kind of an awkward place for placing a contact form. In order to make their blogs more professional, most bloggers prefer having a separate contact page. Keep reading this post and I will share with you how you can create a professional looking and responsive contact page in Blogger.

For a demo, check out Ultimate PC Guide's Contact Page.

Benefits of having a Blogger Contact Form

  • Instant Message Delivery - You will receive the message immediately when the visitor fills out the form and clicks Send. The message will be sent to the email associated with the blog.
  • No Page Reload - The entire page does not gets reloaded when a visitor sends a message and the visitor gets a success message just below the Send button.
  • Reliable - Blogger Contact Form is more trustworthy than the other third party services as it is the official form developed by Blogger.
  • Questions  - The contact form provides your visitors with an easy way to contact you with questions and problems.
  • Feedback - Visitors can quickly and conveniently share feedback and suggestions so that we better understand their needs.
  • Customization - If you know CSS language, it will be easy for you to customize the form as per your liking.


How to Add Blogger Contact Form Gadget

Before adding a custom contact form to a static page, we need to add the default contact form gadget to the blog's sidebar.:

1. Login to your Blogger account and click on Layout from the left sidebar to get an option to add gadgets.

2. Click on Add a gadget link on the main panel on the right side. This will bring to you a list of gadgets.

3. Choose More Gadgets from the left side and then click on Contact Form to add the gadget.

how to add a contact form gadget to blogger

Hiding Contact Form Gadget from the Sidebar

After having added the contact form gadget, we need to hide it so that it appears only on the static page.

1. Click on Template from your Blogger dashboard and then click Edit HTML button.

how to hide contact form from blogger

2. Click anywhere inside the code area and press CTRL+F to open the search box.

3. Type ]]></b:skin> inside the code box and press Enter to find it.

4. Just above it add the following CSS code:  #ContactForm1{display: none !important;}

5. Click on Save template button to retain the changes. Now you will not see the contact form widget in your sidebar.


how to hide contact form from blogger

Adding Contact Form to a Page

Finally, now we have added the Contact Form gadget to the sidebar and also hidden it. Now we are ready to move the Contact Form to a static page.

1. Go to Pages and click on New Page.
how to create a new page in blogger

2. After the editor opens, fill up the page title with Contact/Contact Us or any other title you want. It is recommended doing this before anything else to make the permalink SEO friendly.

3. Paste the following code in the HTML post editor after removing everything in it:

<div id="custom_ContactForm1" class="widget ContactForm">
<div class="contact-form-widget">
<p>Feel free and let me know, if you have any query related to the blog posts. Use the form below to share your questions, ideas, comments and feedback.</p>
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
<p></p>
<input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit">
<img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
</a>
</span>
</span>
<div class="clear"></div>
</div>
<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important}
</style>
4. On the right side, change the Page Settings to hide ("Don't allow" or "Don't allow, hide existing") the reader comments and click the Done button.

how to create contact page in blogger

5. Finally click the Publish button.


I hope that now you can create a contact page for your blog following this tutorial. If you are facing any difficulty in creating a contact page for yourself, let me know in the comments section below and I will definitely help you out. Share the post if you liked it.
How to Create a Contact Page in Blogger How to Create a Contact Page in Blogger Reviewed by Aniket Kumar on 02:55 Rating: 5

2 comments:

  1. Omg thank you! I have tried other contact forms but the submit buttons never worked. This one did! thanks a million!

    http://jademadeleine.blogspot.com

    ReplyDelete
    Replies
    1. Glad to know that my tutorial helped you Jade! Thanks for visiting :)

      Delete

Feel free, and let me know if you have any query related to the blog post.

Powered by Blogger.