Showing posts with label contact form. Show all posts
Showing posts with label contact form. Show all posts

Add Blogger Contact Form to Page Without Editing Theme

Looking for Blogger contact form html code? Contact form is one of the essential parts of a website/blog. It provides a way to your visitors to reach to blog admin. Visitors can ask about problems related to website or any other issues. A user friendly website must have contact form. Many third party sites (like powr.io, 123contactform ) also provide Blogger contact form but it is better to use official contact form. These third party sites show advertisements and also effect blog speed that's why official Blogger contact form is recommended which deliver messages immediately on email associated with Blogger.
Blogger contact form can be add as a widget but webmasters usually like to create it on a separate page. You can see different bloggers which will say to edit Blogger Theme to show contact form on a page. That process is very complex. First of all add a widget, then go to theme and add some codes to hide contact form widget and then go to page and paste a code. it will not end here, also edit the code. Everyone do not like to dirty his hands with coding. Specially for new bloggers, it is just a headache. Do not worry, i shall provide Blogger contact form html code. Your job is to copy and paste it where you want to show it and need to do just a little customization. No theme editing will be include. Lets start to add it.

Add Blogger Contact Form to Page Without Editing Theme


Also watch :

10 Blogger (Blogspot) SEO Tips for Higher Rankings

Blogger Contact Form HTML Code :


First of all go to your Blogger blog and then go to "pages". Create a new page and give it a title which will be "Contact Us" or any other according to your desire. Now switch to html and paste the following code before </div> tag :

<script>
var blogId = 'your-blog-id-here';//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>

<br />
<form name="contact-form">
<div>
<h4 style="text-align: left;">
Your Name :</h4>
<h4 style="text-align: left;">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
Your Email: <em>(required)</em></h4>
<h4 style="text-align: left;">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></h4>
<h4 style="text-align: left;">
<br />Your Message: <em>(required)</em></h4>
<h4 style="text-align: left;">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></h4>
<h4 style="text-align: left;">
<br /><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /></h4>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Customization :


You need to do some settings to active it. Search for your-blog-id-here (Tip : ctrl F) and replace it with your blogger blog id. What is your blog id? Go to your blog and see in address bar. Your blog id is showing in address bar copy it and paste where i told above. Below image explain more better.

How to Find My Blogger Blog ID


That's all, now its over to you. If you like this post then share it with others.