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” fromTop 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’s 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″]

<script>
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': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<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>
<p></p>
<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>
</div>
</form>
[/sociallocker]

 

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.

Save

Leave a Reply