Skip to main content

How to Add Blogger Contact Form to Specific Page For Blogger

How to Add Blogger Contact Form to Specific Page For Blogger: In this Article you learn how you can add Contact Form in your Contact Page or Any Other page where you want to show the contact us form. so you don't need to create a form from foxyform or other website who are generating online contact us form. You should use the Decent and Nice Blogger Contact US form on your blogger Pages. Its Very simple to add contact us form on blogger. In this post your learn the Installation of Contact US form.
What is the purpose of Contact US form? Contact Us form is very important in Every site through Contact US form your visitors get in touch with you if they have any Query they Ask you by contact us form, and if you give them a Quick and Grate response and help them they visit your site again and again for any kind of help. so this is the main purpose and Advantage of the form. Also Contact Us Page is very important for your if you are Applying for google Adsense. If you don't have a Contact Us page then google Don't Approve your site on Adsense so You Must be Contact Us Page Privacy Policy, Cookies Policy to Approve the Adsense On your Domain.
You Also Like to read Important Search Engine Optimization(SEO) Techniques For Blog to increase your blogger visitors.
Here you can see How to Write a Strong Privacy Policy Page. Here Also you can see all Blogger Tutorials. is the one of the best Blogger Tutorials Site in The World.
Blogger Contact Form Installation in Pages is Very simple and Easy just Follow the Below Tutorial to Install Blogger Contact Form in your Blogger Static Page.

Add Blogger Contact Form to Specific Page

It is very simple you just need to follow the few step to install contact us form in your page.
  • First you need to login to blogger and check your blog id. you can see my blog id in below image. Just Copy that ID.
Blogger unique ID
  • Paste below script in your page where you want to show your contact us page. and Just Paste your ID in that script.
var yourblogId = '5514319132190813035';  //Paste here your Blogger Unique.
var contactFormSendingMsg ='Sending...'; //You can Edit this String
var contactFormSentMsg = 'Your message is sent.'; //Editable
var contactFormNotSentMsg = 'Your Message not sent. Please try again.';
var contactFormEmptyMsg ='You can't leave Message field empty.';
var contactFormInvalidMsg = 'Please Insert a valid email.' //Editable
var MywidgetLoaded=false;//We set Fasle to WidgetLoaded var
function sendEmailMsg() {//Send EmailMsg function for Sending Email
if(MywidgetLoaded== false) {//If WidgetLoaded False then condition is true.
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormSendingMsg': contactFormSendingMsg , 'contactFormSentMsg': contactFormSentMsg , 'contactFormNotSentMsg': contactFormNotSentMsg , 'contactFormInvalidMsg': contactFormInvalidMsg , 'contactFormEmptyMsg': contactFormEmptyMsg , 'title': 'Contact Form', 'yourblogId': yourblogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull'));
return true; //return true
<form name="contact-form">
Name : </div> //You Can Edit This
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="31" type="text" value="" />
<br />
Email: <em>(required)</em></div>  //You Can Edit This
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="31" type="text" value="" />
<br />
Message: <em>(required)</em></div> //You Can Edit This Red Field
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<br />
<div style="max-width: 456px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
  • Paste this code in your static page and you can successfully installed your Contact US Form Page on your Blogger Blog.
  • Now you need to Publish your page.
Now you contact US Form is Looks like this Page.
contact us form
So i am sure you want to Add a Nice and Attractive Contact US form on your site its very simple we just need to edit few CSS for customization of Blogger Contact US form.
Form CSS:
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {    max-width: none; margin-bottom: 15px; padding: 5px; }
#contact .contact-form-name {    width: 47.7%;  height: 50px; }
#contact {     background-color: #fff;    margin: 30px 0!important; }

  • Go to the Template> Press CTRL+F Find ]]></b:skin> 

  • Paste this CSS code Above This Tag. 
  • Finally save your theme and Enjoy Nice Contact Us Form. 
Now finally your Contact US Form is looks like below Image.

contact us form with css


  • You can Replace My Blog ID with your Blog ID. Otherwise your form does not works.
  • You can Change Validation Messages Which is Shown in the Code with Red  Color.
You did grate job, you added a Contact Us on your Blogger Page Successfully. So if you happy with my work comment below and share your feeling and feedback in your comments. also tell your friends,


Popular posts from this blog

How To Add Breadcrumbs to Blogger

How To Add Breadcrumbs to Blogger: Breadcrumb is the navigation trail which tells about location on our site or blog to visitors. It tells readers, where (on which page) they actually are on our blog. it help to clear the structure of website to user also user can understand now where is he/she.
Breadcrumb navigation is used to create a user friendly website. Using it, readers can easily navigate to your blog by just clicking a link or few. Like in the below image, if you are on Step 3 (like: Social Media > Google Plus > Traffic) then you can easily come back to Social Media category by simply clicking on Step 1 shown on the breadcrumbs.
It also helps to increase your site’s ranking in search engines by adding keywords into your blog posts.
Adding Breadcrumb Navigation in BloggerNote: You must backup your blog template first before adding breadcrumb navigation in your blog.

Now follow below steps to Add Breadcrumb in blogger:
Go to Blogger Dashboard > Template > Edit HTMLNo…

How to Get rid from a Facebook Virus 2015

How to Get rid from a Facebook Virus 2015: In this Article we tell you how to get rid from your Facebook virus. We tell you about Facebook virus in more details Actually when you see nude or porn posts you click on that posts this is the virus of Facebook when you click on the picture the virus is installed in your account when you login from your Desktop Computer or laptops and even mobiles this virus is automatically share with your friends or when you logout from your device that virus is automatically post on your wall and automatically tag with your all friends. Basically There are two type of viruses on Facebook. First one is automatically install on your browser cookies and when you login your profile it automatically share with all of you friends.Second one is when your click on nude pictures its automatically save on your apps. basically its an app which is share a specific kind sexual link. when you login your profile it automatically share with your friends. How to get rid f…

How to Delete Gmail Account

How to Delete Gmail AccountPermanently Immediately now. If you delete your Google Gmail account permanently then you are unable to recover your deleted account. You are unable to delete your account without the password. You must login to your account before the deletion of the account. There is not any method available which will help you to delete your account temporarily if you delete your account once then you are unable to access your contact, message, as well unable to recover your account. Google is the well-reputed company and everyone have the Google account. Google has a great high-speed server which always up and rare chances of server issues on their end. so everyone loves to use Google Gmail account for their daily Email. They also allow us to send more than 100 MB file from email. If the file is too large they Google automatically save our sent item file on their Google Drive product. Why Do You Want to Delete Your Gmail Account? I know you are not feeling secure on Goo…