Free Contact Form code For Blogger


are Looking for free contact form code for blogger like this? if so just follow this step by step tutorial.

 

contact form code
 


 Follow the below steps to create a free Contact Form code For Blogger to a separate page. If you would like to see a demo, you can check out my Demo.



1.First go to Lyout



remove-contact-form-gadget-from-sidebar




2.Now find out the unique blogID of your blog. Where can i find blogID? on the URL bar of your browser when you are on any page on your blog’s dashboard. This blogID is required to generate the code for the new Contact Form page. 

 The below screenshot explains how you can find out the blogId. Find this number and note it down. This number will be needed to generate code for the contact form.  


Blogger blogID
 3.Now create a new page in your blog 



create new page in blogger



Copy and edit the below the free contact form code snippet . Editing the blogId number is mandatory(Use the number which you noted down in step 2)



<script>

var blogId = '8123020903950952473';//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>
While creating the Page, you have to switch to the HTML mode as shown in the image below. Then paste the above contact form code into the post editor(after proper editing), disable the comments and publish your page.





blogger-comment-form-contact-form-code



Once the page is published, go to this new page fill out the contact form, click on the send button and verify that it sends out the email to yours.




I hope that you have enjoyed 'Free Contact Form code For Bogger ' tutorial . Dont forget to share my post. You can use Social Sharing Widget provided at the end of every post. After all, Sharing is Caring!


Labels: ,