How I Added Blogger Contact Form Into A Static Page

Any blogger who claims to have an outstanding blog should have a “contact” page on his blog. A contact page is a blog page where your readers can see your contact details, and can contact you (the blog owner) directly without stress. A contact page may include your office address, your phone number(s) and your email that your customer can drop a message.

I have seen many blogs without the contact page. Why? It is very essential to have a contact page on a blog. You want other people to guest post on your blog, you accept sponsored post, and you sell stuffs – but no contact page? You are on the long thing.

Recently, I shared with you, how you can add the contact form to sidebar of your blogger blogs. It is very cool if you add this contact form to a static page like the “contact us” page too.

If you check this blog’s “contact us” page, at the bottom of the text , you would find a contact form that my readers can use to contact me alternatively.

Very simple and easy! I have come with other easy-made steps you can use to add this form to any page on your blog too. Just follow the following steps carefully:

Step 1 >>> Login to your blogger dashboard and click on “pages”

Step 2 >>> Click on “new page”.

Step 3 >>> First thing you should do here! Give the page a name you desire (e.g. Contact). The reason for this is that, page permalinks cannot be edited like post permalinks. Once you save it, the permalinks remains the same unless you delete the page and create another one.

Step 4 >>> In the "Option" tab, you can set to weather you want readers to comment on this page or not. I set my contact to "Allow comment" because some readers may like to use the comment box to ask you a general question that they want any other person to benefit from the answer.

Step 4 >>> Write everything you want to be displayed on the page, maybe introduction of your blog or you got anything to tell your readers. If you don’t have anything to tell your readers, you can skip this step.

Step 5 >>> Switch to “html” writing version and post the following code at the end of the whole text.

Code:

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

Step 6 >>> You need to change the Blog Id of the above code. Look at your browser bar, copy the blog Id as seen in the image below. Then replace it with the Id in the code.

Step 7 >>> You can preview, if you like. Click on save and view your blog to test it. You should receive a new message via the email associated with your blog.

Testing message I drafted to confirm the form

Message received in my inbox instantly

Wow! Simple, isn’t it? Don’t hesitate to share to your friends who might need this too.

Did the pasting the above code tells you “error”? Let me know via the comment section or contact me using the form on this page. I will respond to your queries in less than 24 hours.

Stay connected to this blog. Like our Facebook page, follow us on twitter, join our Facebook group and subscribe to this blog.