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? The 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 the website or any other issues. A user-friendly website must have a contact form. Many third-party sites (like powr.io, 123contactform ) also provide Blogger contact form but it is better to use the 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 added 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 a 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 the contact form widget and then go to the page and paste the code. it will not end here, also edit the code. Everyone does not like to dirty his hands with coding. Especially 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 included. Let's 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.