Blogger usually allows you to add "Contact from" to the sidebar. But if you want to make a specific page for "Contact Form" then follow this tutorial. There are many links online which guides you through the same but I am going to teach you How to set up "Contact Form" Page in ONE single step.
Demo
Follow these steps -
1) Login to your blog on which you want to setup a Contact form page.
2) Go to "Pages"
3) Click on "New Page"
4) Copy this Code
-------------------------------------------------------------------------------------------------------------------------------
<script>
var blogId = 'Insert your Unique BlogId here ';
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>
------------------------------------------------------------------------------------------------------------------------------
5) Click on "HTML"
6) Paste the Code
7) Disable the Comments for more professional look
8) You must now find your unique BlogID and enter it in place of RED TEXT In the Code (Follow next step)
9) Look in the URL bar to find this 19 digit number (This ID is unique to everyone so make sure your logged in on correct profile)
10) Copy this number and Paste it in place of RED Text in the code
Click Publish and there you go :) Your own Contact form page. Hurrayyy !!
( It is mandatory NOT to switch back to "Compose" from "HTML". If you have knowledge about coding you can always tweak in with the layout style of the form. Good luck! )
---------------------------------------------------------------------------------------------------------
If you find this tutorial useful please share it with your friends. If you want to know more about different layout styles for "Contact form page" comment below.
Join our mailing list to get these tutorials directly in your Inbox for FREE!
Want to be a Guest Blogger ? Its easy, send in your articles through Contact Us
--------------------------------------------------------------------------------------------------------
Check out -
No comments:
Post a Comment