• Skip to content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Hardware
  • Blogging
  • Windows
  • How to
  • Technology
  • Android

TechDim

Tech Dimentions

  • Home
  • Contact
  • Write for Us

How to Create a Contact Form in Blogspot | the Complete Guideline

Last Updated on January 11, 2018 by Justyn Dim

blogger contact form how to do it

Creating a contact form in Blogger.com is always a challenge to them those who don’t have any coding knowledge. In this post we will show you how to create a contact form in BlogSpot with very little bit coding knowledge or even you don’t have any coding knowledge.

 

A contact page is a very important page for a website. It bring authority look and professional manner, helps to the reader to contact with the blog author and helps to create a community gradually. Moreover the search engine boot give preferences to some mandatory pages, yes the contact page is one of them. Google loves the contact page very much.

Reportedly Google announced their contact form widget to their free blogging platform Blogger.com. But the problem is you can add this widget to the sidebar of your blog but can’t use it as a new contact page.

I was facing a huge trouble to create the contact us page. If you are facing the same problem, don’t worry, I will discuss in this post step by step that how you will add the contact form widget and how you will create a new contact page in BlogSpot.

Steps to follow to Create a Contact Page in Blogger

  1. Add a contact form widget to sidebar.
  2. Extract the contact form code
  3. Paste the code to a new page and done.

Let’s check in depth.

Add Contact form Widget to Sidebar

To activate the contact form functionalities you must have (note: Must Have) to add a contact form widget and you can do this in a very simple way.

  1. Go to layout from the blogger dashboard and then add a widget like the following image.
    how to create a contact form in BlogSpot
  2. A new window will appear like the following. Go to ‘More widgets’ and then select the ‘contact form’ widget

    adding contact form widget in blogspot
  3. Now simply check your site sidebar you found a contact form. Great, Now your site traffic will able to contact with you through the contact form and the message will send to your Gmail account.

    Contact form sidebar looks like in Blogspot
    Contact form sidebar

Extract the contact form code

Probably you are going to learn an interesting and awesome thing. I told it before that you can’t use the contact form widget as a page. You have to extract the contact form code from your blogger sidebar contact form widget just you have added.

Before doing this we will try to find some question answers like how you will extract the code and where will you post it? And how you will make it functional. Yes, finding the answers of these question is our mission now. Just follow the following steps to know the answers.

Contact form extraction process is little bit tricky I think. If you don’t want to do it by yourself, I will provide the code snippet just use it.

If you are curious enough, how to find the contact form code snippet do the following steps.

To do this right click up to the contact form widget and inspect it, the developer window will open at the bottom. You will find ‘inspect’ option all the browsers. Here I am using chrome please check the following screenshot.

  1. Just hover over the contact form and right click and select inspect. You will find this inspecting option to every browsers. Here I am using chrome.
  2. A window of chrome developer tool will appear at the bottom. Select the line red boxed bellow and press ctrl+C. Great, you have copied the contact form code snippet.

    To make it more easy to you we have extracted the code below and did some style too. Hope it will help you.

  3. Now create a new page from blogger dashboard named contact us. To do this go to blogger dashboard > pages > New Page > HTMl and paste the code snippet.
pasting the code to a new page in html section
pasting the code to a new page in html section

Now close it and view the page. You are done. Your site has most mandatory page.

Hiding Contact form from sidebar widget

Here is an important thing need to notice that, you may don’t like the both in contact us and the contact form widget to the sidebar. But if you remove the contact form widget from the sidebar it the contact page will not functional anymore. You must have an active contact form widget at least once other than the contact us page.

So just do the following to hide (not remove but hide) the contact form widget from the sidebar.

  1. Go to template from the blogger dashboard > edit HTML .
  2. paste the following code before the closing tag of the head.
    div#ContactForm1 {
    display: none;
    }
    Note: We have changed the id of contact form (used contactform2) because we have hide the contact form containing an id (contactform1) through CSS from sidebar.
hiding the contact form from sidebar
hiding the contact form from sidebar

This is all about placing contact form widget to the sidebar and creating the contact us page.

A contact pages is not only for connecting with people but it has an SEO effects too. For Blogger platform SEO I have talked in details in here – Blogger.com SEO ultimate guide

Hope this tutorial helped you. Thank you very much.

You may also read

How to Design Custom Themes in Windows 10
How to Design Custom Themes in Windows 10
32 bit vs 64 bit operating system
32 bit vs 64 bit operating system | which one is better
How to Choose a Computer for Blogging
How to Choose a Computer for Blogging
Full Data Protection with AOMEI Backupper Media
Ensure the Full Data Protection with AOMEI Backupper Media
upgrade windows 7 to windows 10
How to Upgrade Windows 7 to Windows 10
How to add Meta tags in blogger to each post and pages.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recent Posts

  • Make the Best Use of All Your Space with the AOMEI Partition Assistance
  • Ensure the Full Data Protection with AOMEI Backupper Media
  • Mint Mobile Review: Should You Switch?
  • 5 Points You Should Know Before Implementing an ISO 9001 Quality Management System
  • Transit Technology: Paying with Your Mobile Phone
  • 3 Online Businesses Under 5k On ExchangeMarketplace You Must Not Miss!
  • Car Applications Which Control Your Vehicle and Transform Them into a Brilliant Auto
  • How to Transform Your Old Phone Into A Security Camera
  • What Is Metered Connection and What Is the Use of It in Windows 10
  • How to Design Custom Themes in Windows 10

Footer

Quick Links

  • Privacy Policy
  • About us
  • Contact
  • Write for Us

Categories

Android Blogging Hardware How to Online Software Technology Uncategorized Windows

DMCA.com Protection Status

Copyright© 2019 · TechDim