How to add Blogger Contact Form with very few simple steps

Adding blogger contact form is worrisome to everyone. As a result, bloggers decide to use third-party contact form service providers – 123formbuilder, Jetform, Google contact form etc. which are not enough fast loading and cannot be customized if you want.

But today I will guide you on how to add a contact form (default contact form) in blogger step by step with video demonstration.

Before going to start I want to point out some advantages of using Blogger default contact form. So, let’s discuss it.

Benefits of Adding Default Contact Form

• The interface is very simple and neat and clean. Visitors easily can pay attention to it.
• It's 100% fast loading and you will get mail instantly.
• Moreover, if you have an idea on CSS and HTML, you can customize it in the way you like.

So far so good. Now let’s point out each step that I will walk you through the whole article. If you face any problem, I have enclosed a video demonstration which can make you much easier to understand. You directly can watch it at below.

Steps for Adding Blogger Contact Form

---

1. Contact Form Widget Adding
2. Copying "Contact Form" code with "Inspect Element"
3. Hiding Contact Form Hiding
4. Creating Contact Page

1: Contact Form Widget Adding:

For adding Contact Form Widget go to the blogger and log in with Gmail password. Once you see the blogger interface click on “Layout” (follow the screenshot below – See no- 01)

Then click on “Add a Gadget” (See no -02 Above). Once you click it, a window will pop up and scroll down to find out “Contact Form”.

Finally when you find contact form click on over it and save it. Now you are done. Let’s go for another step.

2: Copying "Contact Form" code with "Inspect Element"

Well, don’t worry, this step is very easy. We will find out the “Contact Form Code” by “Inspect Element” then copy the whole code into notepad. So, let’s jump into deeper.

After the first step is done, click on “View Blog” at the right side corner of the blogger interface (See no –A)

It will take you to your blog template and you can see the “Contact form” widget you have added?

To find out contact form code, at first, move your cursor over the contact form then click right button of your mouse then select “Inspect” (See the image below)

Once you select “Inspect” you will see a window with a lot of codes. Now see the “widget-ContactForm” left side which is important for us and we are looking for. When you take your cursor over it, (See no- 2) right side contact form will get highlighted. This makes you clear that your selection is perfect and you can go next (See no -3)

Now click right button of your mouse over “widget-ContactForm” (See no- 1) then select the “Edit as HTML”

Once you select it, you can see the contact form HTML codes that we need to add contact form page. (See below image)

Now select the whole HTML codes and copy it and finally save it into a Notepad. I will apply this code in adding our contact page.

We are almost done. Only 2 steps are left. If you get bored or seem complex, watch the tutorial video directly. And follow every step I did. I hope you definitely can do that.

If you want to keep reading. It sounds great!

3: Hiding Contact Form Hiding

We have added default contact form widget and copied the HTML codes. Then finally we have saved contact form HTML codes into a Notepad.

On this step, we will hide the “contact form widget” that we have added a little ago. Bear in mind, you have to very careful while doing it because we will customize our main template or theme file. If you make any mistake, your blog will get wrong. So, let’s jump into the main point –

Click on “Theme” at the right side and then click on “Edit HTML” (See the image below A and B)

After clicking on “Edit HTML”, you will see something like that is given below (your blog template codes)

Now click anywhere within the template code then press together Ctrl+F from your keyboard. Copy this code ]]></b:skin> and paste on it and hit enter. (See the images below)

Once you find the code then copy the below code and paste before ]]></b:skin>. Exactly as same as I did (see the images below)

div#ContactForm1 {
display: none !important;
}

Finally, save the Template. So, now we are going to add “Contact Form” in the Page on this final step. So, let’s jump into the final step.

4: Creating The Contact Page

Click on “Page” at the left side and then click on “New Page” (See the image below)

Once you are done, you can see a window. Now, select on “HTML” mode (See the image below) and paste those codes we have copied for Contact Form with “Inspect Element” and saved into a Notepad on the last step 2.

Or you can copy the below HTML code –

<div class="widget ContactForm" data-version="2" id="ContactForm2">
<div class="widget-title">
<h3 class="title">
Contact Form
</h3>
</div>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
</div>
</div>

And finally makes sure “ContactForm1” is changed to “ContactForm2” otherwise, your contact form will remain in hidden.

If everything is done successfully then click on “Publish” at the right side and check out whether it works or not.

Conclusion:

I have tried to walk you through the whole tutorial of adding a blogger contact form in the page. And you have followed me up to the final step.

If you face any problem and are not interested in reading, I have made a video tutorial. You can watch it as many as you want.

Well, if you get stuck while following every step as mentioned above. You can do comment and if this post is helpful please share it. I will bring with another great topic later.

Thank you so much. Enjoy!!!