How to add contact form in page or post in blogger

Do you have a blog on blogger? You may have seen on some website that their contact page contains a contact form and one has to just fill up the form to contact with administrator of that website. Such contact forms gives nice look to website and easy way to communicate with the visitors.
You may wanted to put such form in your contact us page in blogger but don't find any way to do that. I will show you in this article "How to add contact form in any page or post in blogger".



 If you want to add contact form in your blog itself(and not in any particular page or post) then you can do this simply by adding a gadget to your blog. Like if you want that contact form should be appear at bottom in your blog or in side bar then you can do this by following way:

1. Login to blogger and Go to > Layout > Add a Widget then a new window will open where you will see different gadgets.
2. From left menu click on "More Gadgets" you will see "Contact form" gadget at first place. just click on '+' button to add this gadget to your blog.

But if you want to put contact form to be appear in specific page or post then follow the steps below:

1. Login to your blogger account, select blog you want to edit.

2. create a page or post in which you want to put contact form.

3. If you are using page then you should add this page in your blog menu so that it will be visible to your visitors .

4. open the page or post editor

5. Click on HTML button at top in editor. Before that you can write some lines which you want to be printed before your contact form such as "Please fill up the form below to get in touch with us"
then click on HTML button.



6. Now just copy the code given below and paste it in the HTML editor (I have shown you how to do that in image below)

Copy this code to paste in HTML area of your page or post.


<script>
var blogId = '3584695845264589658';
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>



paste above code in your page HTML at bottom of default code written already there as shown in image below:


7. Don't forget to change the highlighted blogger ID in above code (3584695845264589658) with your blog ID. If you does not change this Blog ID then you will not get any message in gmail when someone contacts you.
You will find your blog ID in the url of your blogger blog above as shown below:


 8. Once you put your Bog ID in code hit "Publish" button. Now you can view your blog. You will find contact form will appear in your contact page.
I have shown in below image how it will look your self now and [check your page] :


This is how you can Add a contact form in page in blogger blog


for any query comment below or contact us.

Click to comment