How To Add Contact Form (Contact Us Page) in Blogger?

How To Add Contact Form (Contact Us Page) in Blogger?

If our website is on our blogger and blogspot and wordpress, then we also have a problem with contact us form. Because when you add contact us form to your theme from the widget and it appears in all the blog pages.

While we have to show this contact us form only in the contact us page and about us page. So you read this post in every detail. I have explained in detail how we can put the contact form widget on our blogspot contact us page. Also in 5 minutes.

 

Benefits of linking the Blogger Form

1- As soon as someone wants to contact you through this form, you will get an email at your admin email.

2- This is a very straight forward and simple form that any visitor can fill up easily.

3- If you are interested in CSS (Casecade Style Sheet) then you can improve its look.

4- The biggest feature of this form is that the page does not reload the entire page to send the message. Thereby, its speed is much better.

 

How To Add Contact Form (Contact Us Page) in Blogger

So let us now know that how to add Contact Us Form to any separate page such as contact us page or whatever page you want.

 

Part 1- Adding a Contact gadget

Step 1- First of all, by logging into your blogger.com, you can go to your account’s dashboard.

Step 2- Now click on the layout option that is visible in the left side.

 

Step 3- Now on the right side, click on a link Add a Gadget. From which it will take you to the page of the gadget list.

 

Step 4- Now here you click on more gadget in the left side. You will now be seen the Contact Form here. Add it to it And save it.

 

Part 2 – Hiding the Gadget

Step 1- Now click on the template or theme that appears on the right.
Step 2- Now you open the theme code of your blog by clicking edit HTML.

Step 3- Now press Ctrl + F button and paste-    ]]> </ b: skin>    , and add the following code to it.

 

Part 3 – Add Contact Form to Page.

Step 1- Now you can click on Page option, and click on it in New Page.

Step 2- Now go to the page setting on the right and select do not allow, hide existing in the reader comment section.

Step 3- Now the new page will be written on the left side of the HTML and click on it and copy paste the code below.

<script>
var blogId = ‘8600000030000000341‘; // Change this number to your blogID ..

//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>

 

Part 4 – Find out the blog id. And publish the page.

Step 1- First you go to the URL of your blogger.com, write a few numbers by placing a blog id in that URL, you copy them from there.

Step 2- Copy the copied number to the above code where the number given by the blog id is pasted.Step 3- Now

publish your page with the Publish button.

Now your contact form can send input from any user and send it to your email immediately.

 

Conclusion

I hope you have liked how to add this post today How To Add Contact Form (Contact Us Page) in Blogger and Do not forget to share it with your friends on social media. And just subscribe to this blog. So that similar posts can be found directly on your email.

 

Please comment below if you like this article How To Add Contact Form (Contact Us Page) in Blogger