A Blog for Tips & Tricks

Friday, September 11, 2015

How To Add Contact Form In Blogger Blog


How to add contact form to blog


Contact page on blog is highly recommended widget for all bloggers. It is how visitors can reach you and it’s something that every blogger should have. Sharing your email address on your blog is not a good idea; a contact form can serve as an easy way for visitors to have conversation and get in touch.

You can set up Contact Form specifically for your blog if you don’t want your personal email address to be shared with others. The reason is so important to offer both options is because most brands and companies will not fill out a contact form to contact you. They usually want to email you through their own email client and add you to their contacts.


Also Read:    How to Add Numbered Page Navigation on Blogger Blog


Adding Contact Us OR Contact Form to your blogger blog is very easy. To add your contact us form to your blogger blog follow the step by step procedure explained below,

How To Add Contact Form To Your Blog?


 1. Go to your Blogger dashboard

 2. Then go to Layout and click on Add Widget  then HTML/Java Script + button.


How to add contact form on blogger
How to add contact form




Adding contact form in blogger blog
Contact Us in blog



3. Copy and paste the below HTML code in your blank widget space, Write Contact Us in Tittle box and change blog ID (highlighted in red) with your own blog ID then click on Save button.


How To Know Your Blogger Blog ID?


1.  Go to your Blogger Dashboard
2.  Select the blog you want to find out blogger ID
3.  You will see the blogger ID in URL as shown below





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

How to add contact us in blogger blog
Contact us in Blogger blog

Now you have done adding Contact Form to your blogger blog. To test the same Go to your fresh blog URL and Put you Name, Email and Message then click on Send and check your account E-mail inbox to confirm.

No comments:

Post a Comment