How to Add Contact Form in Any Page of Blogger?

In a blogger, adding a contact us form is the boring task because in blogger we cannot use the plugins like WordPress.
So many plugins are available in WordPress which make it easy than blogger.
MMMost of Blogger use (foxyform, jotform, 123contactform, etc.) this types of website to create a contact form in their blog.
Today I am going to show you the how to add contact us form in your template as well as in your contact us page.
If you are inserting the code of contact form which is given by third party website then no problem at all, but this official contact form is very stunning.
add Contact Form


The Benefits of Official Contact Form 

1) Message sent by the visitor will get you in the minimum interval of time.
2) Its interface is like official so it will look a beautiful form.
3) Your webpage will not take much time to load more slowly. 
I have created this tutorial in three-parts first part is about add the contact form gadget. Second, is to remove the added contact form gadget and the third one is adding the contact form in any page of your blog.


Part 1: Add Contact Form Gadget 

Follow this tutorial to add the Gadget of contact form in a blog.
Step 1: Go Blogger.com and Log In with your blog where you have added the contact Gadget. If you work on more than one blog then you need to choose the blog where you want to add this Gadget. 
Step 2: Click on the Layout button to get the Gadget button.
In the template, we can add the contact Gadget in the sidebar and in the footer of a template.

Add Contact Form
Step 3: You can see the different boxes. You have to click on the link named as “Add a Gadget”.
Step 4: You have to scroll down in the newly opened window. When you will see the Contact Form option then simply click on it.
Add Contact Form
Your form will automatically get its position.


Part 2: Hide the Gadget

Now you are able to add the contact Gadget, now I am going to show you how to remove the Contact Gadget.
Here are two methods to remove the Contact Gadget.
First Method:
Step 1: Go to Blogger.com and then go to the Theme section from the blogger dashboard.
Add Contact Form
Step 2: After going to the theme section you have to click on Edit HTML option.
Step 3: In Edit HTML option you have to Search for ]]></b:skin> this code.
div#ContactForm1 { 
display: none !important;
}
Step 4: Replace the below code with this one.

Add Contact Form


Step 5: Now click on the Save Theme button.
Congratulations! It’s done successfully.


Second Method:
Step 1: Go to Blogger.com and then go to the Layout section from the blogger dashboard.
Step 2: Find there the contact form
Step 3: Click on the Pencil symbol
Step 4: Click on the Remove button.
Congratulations! It’s done successfully again.


Part 3: Adding Contact Form to a Page

Now I’m showing you a way through which you can add an official contact form to the separate page of your blog.
Step 1: Go to Page section of your blog. Create a new page (if you already have a page then no need to create a new page)
Add Contact Form
Step 2: Now come to HTML editor in the post editor

Add Contact Form


Step 3: Paste the following code into your HTML post editor.
<div id=”custom_ContactForm1″ 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>
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=1111111111111111111&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>
Step 3: Add the title to page as you like (exa. Contact us). After this follow the following settings instructions.
Step 4: Now, the whole process is over, only need to click the publish button.
Congratulations! It’s done again.
If someone reader trying to contact you with this official contact form then the message will be received by the admin of the blog.
If a blog has two admin, both of them will receive the message.   


                             
O
Over to you:
Now you have the whole knowledge of contact forms. You know the two different ways to add it to your blog.
If you find any query like no message receiving then I recommend that follow this process from start to end again.
If you know the CSS and Javascript then you can optimize it as you want.
If you like this tutorial, please share it. If this tutorial is helpful then please follow us by email or anywhere.

Leave a Reply

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