How To Create Contact Us Page For Blogger? Best & Easy Way 2021

Contact Us Page For Blogger - If you are a newbie blogger and wants to know How To Create Contact Us Page in Blogger? So you must have to read this article at the end.

Many new bloggers do a huge mistake while creating a Contact Us page in the Google Blogger blog, and that is creating a contact form through third party websites.

But, you don't have to do this mistake. I will tell you a genuine way with which you can create a contact form for your blog without using any third party website.

Well, nowadays it is important to have a Contact Us page on websites/blogs. And making a contact form in WordPress is a very much easy task. You just have to install one plugin paste a code and that's it.

But making a contact form in Blogger is quite difficult and tricky.

So, before talking about How To Create A Contact Us Page For Blogger, Let's talk about the benefits of a Contact Us page in blogs.


Pros

  • If any of your Blog visitors want to contact you, then he/she can message you through Contact Us Form.
  • You don't need to signup on any third-party websites to create a contact us form.
  • It is quite easy to create a contact us page with this method.

How To Create Contact Us Page For Blogger?

So to create contact form in Google Blogger blog without any third party website you have to follow the below given steps carefully.

I've divided all the things in 3 parts. You have to follow each part carefully.

You should have to follow all the given steps carefully. If you made any mistake then the contact form will not work.


PART 1 - Adding Contact Form Gadget

So, if you want to use the official Contact Form of Google Blogger in your Contact Us Page so you have to first generate a Contact Form Gadget.

Check out the following steps, how to do it?

STEP:1

First of all you have to login with you Gmail Id in Google Blogger and select that blog in which you want to add Contact Us Page.

How To Create Contact us Page For Blogger

How To Create Contact us Page For Blogger

STEP:2

Then after you have to click on the "Layout" option which is showing on the left side on Dashboard.

How To Add Contact Us Page For Blogger

How To Add Contact Us Page For Blogger

STEP:3

After clicking on LAYOUT option you have to add a gadget. And for this you have to click on "Add a Widget" option on sidebar. When you click on this option, a new window will open in which many options are shown.

Contact Us

STEP:4

Now, In that windows, scroll down and search for "Contact Form" and click on that '+' icon. Then Save.

Contact Form For Blogger

PART 2 - Hiding The Contact Form Gadget

After adding the Contact Form gadget, you have to hide that gadget from that area. And after hiding we will ad that Contact Form gadget on Contact Us page.

So follow the given steps to hide that contact form gadget which we added in Part-1.

STEP:1

So, first of all you have to click on "Theme" option that is showing on the left sidebar. And then click on the arrow.

Contact Form

STEP:2

Then after you have to click on "Edit HTML" option to edit the HTML and hide widget.

Contact Form

STEP:3

Then, press Ctrl+F on your keyboard and search this  ]]></b:skin>. Then paste the below give code before thi text to hide widget.

div#ContactForm1 {
display: none !important;
}

Contact Form

PART 3 - Adding Contact Form To Contact Us Page

Now, we will add that contact form to our contact us page. SO follow these steps carefully to do so.

STEP:1

Firstly you have to create a new page of Contact Us. So for this just go to your blogger dashboard and click on "Pages". Then click on "New Page". 

Contact Us Page For Blogger

STEP:2

After that, you have to click on pencil button showing on left side and then click on "HTML View" to edit the page as HTML. And then paste the below give code there.

<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">
<div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your 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>
Your 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=3451077212045086954&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget§ionId=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>

Contact Form

STEP:3

It is very important step. After pasting the code you have to change the "Blog ID" written on Line No. 33. You have to replace that Blog ID with your Blog ID. 

Contact Us

NOTE: You will get your blog ID in the last line of your blog dashboard URL.  

Contact us

STEP:4

Now, you can write the title "Contact Us" on title bar and simply click on "Publish".

Contact Form

All Done! You successfully created a Google Blogger official contact us page. Now you can test it. You will receive all the messages sent by your visitors in the Admin mailbox. 

If your blog has one or more admins then all admins will receive a mail when someone will send a message through that Contact Form.

Wrapping Up

So bloggers, I hope you all understand How To Create Contact Us Page For Blogger? This is the best and easiest method to add the contact form to contact us page. 

There are also other methods but for all those methods you have to create an account on third-party websites. So this is the best and official contact us page.

Also Read:

  1.  How To Add Table Of Contents In Blogger?
  2. How To Start A Blog For Free?
  3. What is SEO and How it Works?

So, if you have any type of query regarding How To Create Contact Us Page For Blogger? or about Blogging so comment down below.

Happy Blogging!

1 thought on “How To Create Contact Us Page For Blogger? Best & Easy Way 2021”

Leave a Comment

Share via
Copy link
Powered by Social Snap