How To Add A Contact Form in Blogger

How To Add A “Contact Form” or Make A “Contact Page” in Blogger Easily

Adding Contact Form into your Contact us or Contact me Page is a little bit complicated than adding in Sidebar in blogger but More professional and optimize.


The contact page is a favorite segment of the ideal blog. It not only makes your blog more significant through your readers also help to create a positive thinking inside your readers about you. That is the most important part of online marketing. So if you want to get in touch with your user, then you need to setup a contact page on your Blog.


When you are a blogger of BlogSpot, then it is not too easy to add a contact Page as WordPress. It is tricky, but few moment later it would be simple to you. Because those are ever Easiest Way to add contact option to your blogger blog that I am going to, show you.




There are 2 Ways you can apply to add a contact form to your blog. Number one you can add your contact form in the sidebar using a Gadget and it is a very simple way. Number Tow you can add your contact form on a page, and it could be Contact Me or Contact US. So let me stat.


    How To Add A Contact Form on Sidebar in Blogger

If you are interested in adding your contact form on your blog’s sidebar, then you chose a job without any dispute. So follow the step below to discover your Contact Form in the sidebar.

First Go to Your Blogger Dashboard. Now Click on the Layout Option from left sidebar.

Blog Layout screenshoot


Now Click on Add A Gadget, and a pop-up will appear.

screenshot od add gadget from sidebar


Watch out and select More Gadget from Top of left sidebar into pop up then you could see a contact form gadget.

screenshot of more gadget


Now click on plus icon from gadget area to add the form.

Contact form Gadget


When the contact form configuration page comes then, click on Save button.

Contact Form Save Button


Now your contact form gadget has been listed in the sidebar (Simply drag and drop to fix its position) and Click on Save Management Button then view your Blog and take a look in Sidebar, wow your contact form has added in the sidebar.


Now check is it working or not. I hope it is working and you have done the job.


if you received the Email. That means the contact form is working. So Now you Know that How to Add a Contact Form to Sidebar on Blogger Blog.


Now I am going to explore you the second way

    How to Add a Contact Form in a Contact me Page


Go to Blogger Dashboard and Click on “pages” from the left sidebar and Click on New Pages.

screenshot_of_new page


Write contact me or contact us on Title box.


In the body section, first put the message that you want to give your audience.

For Example:: “Hey I am Mahfuz, Admin of the blog. If you would like to contact me for any reason, then use the form below and fell free to ask.


Now you need to copy The code of contact form from below.



[sociallocker id=”856″]

var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull'));
return true;
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>


Then click on “HTML” to convert your posting option into HTML or code mode and past the code just end of your message.

screenshot_of HTML mode

Look carefully, at the top of code you see a blog ID, and you need to replace it with your blog ID.

screenshot of blog ID


To do that select the id and remove then go to “URL bar” and copy your blog ID number like this and put it into the code where the code was.

screenshot_of URL bar

From setting disable your comment option and publish your page.


Now view the page and look your contact form has been added to “contact me” pages.

So friends! It was your today’s turn. Moreover, I will come back with your next turn soon. Till then take care. By the way, I hope now you know that How to Add a Contact Form to your Blogger Blog.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.