Contact form in a blog is a way of communication between you the blogger and your audience. If your audience read an article from your blog site and in the event that they don’t understand anything they may wish to contact you. The best way to do that is through the “contact us” page. The blogger platform is owned by Google and hence it is automatically connected to your Gmail account. If someone writes a message and hits the send button, you will receive the message right in your Gmail inbox.
A contact page is how generally a reader of your blog or an advertiser, sponsor or someone with a general query would reach you through. BlogSpot (Blogger) is an ideal choice for beginners to learn the basics of blogging and understand how it works. BlogSpot users can use a contact form in their widgets, but you cannot add them to the pages. This is a problem for newbies.
Adding a contact us form in Blogger is a wearisome undertaking as it does not sustain plugins like WordPress. What most of the Blogspot bloggers does is to seek the help of third-party sites (foxyform, jotform, 123contactform, etc.). But today, you are going to learn how to add the official contact us page in Blogger. It is possible to get third-party codes to be inserted in new pages. Yet, the official contact form is far better than those.
You can add forms to a static Blogger page like contact me, or post a form as event registration. There are lots of possibilities on using your forms since Blogger enables you to inject custom HTML codes on their platform.
The Benefits of Official Blogger Contact Form
- You will get the message as soon as one sends it. And, the deliverability is 100% as well.
- The simple interface makes it easy for visitors to contact you.
- If you know Cascade Style Sheet (CSS) language, it will be easy for you to customize the form as per your liking.
- The entire page will not get reloaded for sending the message.
I have divided this tutorial into three sections, adding the contact gadget, hiding it and implementing the official code on a new page.
Section 1: Adding the Contact Gadget
Follow the steps given below to add a contact us gadget on your blog.
Step 1: Visit blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list.
Step 2: Click on Layout from the left sidebar to get an option to add gadgets. Click on “new gadget”. See the infographic below for more information.
Step 3: Clicking on it will bring you to a list of gadgets. Scroll down and you see “
Add a contact form to your blog.
Click on the + sign to add the contact form gadget from the list of gadgets. Blogger has updated its platform, there is more gadget anymore!See the infographic below for more information.
Step 3: If you click on + sign, the contact form window will pop out, here, you can change the title (the default title is “contact form” you may change it “Contact Us” or any other of your convenience and click on “save” after you finished editing the title. See the infographic below for more information.
Section 2: Hiding the Contact Form Gadget
Now, you are going to learn how to hide the contact form gadget. There are two ways you can hide the contact form gadget from your blog.
- The first method is to customize the template through the advance tap and add some CSS codes to customize your template.
- The second is to edit the template by adding some CSS codes
Method 1: The Customization Method Of Hiding The Contact Form On Blogger Blog
display: none !important;
Method 2: Hiding the contact form by editing the template with the same CSS code
Step 2: You will be provided with the whole code of your blog in a large field.
display: none !important;
Section 3: Adding Contact Form to a Page
You will get the customized official blogger contact form code here to be added to be shown on a separate page.
Step 1: Go to Pages>>New page.
Step 2: Paste the following code into the HTML post editor after removing everything in it.