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

Adding a Stylish Contact Us form in Blogger is one of the most toughest task since blogger doesn’t support any plugins as of WordPress.

Most of bloggers uses third party sites to Contact Us page in bloggers like (123FormBuilder, 123ContactForm, Jotform, etc.).

Officially blogger allow us to add Contact Us widget in the sidebar or footer. But today you will learn how to add seperate contact us page in blogspot.

Also Check: 10 Stylish Blogger Contact Form For Static Page.

Though using third party sites you can insert codes for Contact Us page. But using third party sites makes your site slow. In this tutorial you’re going to learn how to add contact us page without using third-party sites. Let’s dive in!

Benefits of using Contact Us Form

  1. You will get the message as soon as one sends it into your email address associated with the blogger account.
  2. The whole page won’t get reloaded for sending the message.
  3. The basic interface makes it simpler for the readers to get in touch with you.

How to add Contact Us Form

Step 1: Add Contact Us gadget.

  1. Login to your blogger dashboard.
  2. Go to Layout.
  3. Click on Add a Gadget/Widget.
  4. Scroll down and add Contact Us Widget.

Step 2: Hiding the Gadget/Widget using CSS in template editor.

  1. Login to your blogger dashboard.
  2. Go to Theme.
  3. Click On Edit HTML.
  4. Click anywhere inside code area and press CTRL+F. Pop-up box will appear in the corner of the code area.
  5. Paste  ]]></b:skin> inside the code box appeared on the top corner and hit enter.
  6. Above ]]></b:skin> paste the following Code.

div#ContactForm1 {

display: none !important;

}

Step 3: Adding Contact Us Page.

  1. Goto Page.
  2. Click Add New Page.
  3. In the Top Left corner there you will find Compose | HTML. Select HTML mode and remove everything.
  4. Paste the following code into the HTML post editor.

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<br />
<script>
var blogId = ‘198597934082178145’;//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>
Your Name : </div>
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” />
<br />
<div>
Your Email: <em>(required)</em></div>
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” />
<br />
<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>
<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: 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>
</div>

Step 4: Changing Var Blog ID.

  1. Goto your Blogger dashboard.
  2. Look at your URL it would be like [https://draft.blogger.com/blogger.g?blogID=198597934082178145#allpages/postNum=4].
  3. Now copy your Blog ID and paste it into your contact form Highlighted section.
  4. Save your page. You’re done!

This is just a simple tutorial for how you can add Contact Form Page in your blogger blog. If you want you check 10 Stylish Blogger Contact Form For Static Page.

◆ Last Word: Hope you are benefited by this article and successfully added Contact Us form in your blogger blog. Let me know how this tutorial helped you to Contact Us form. For any issues relating implementation of the code snippet drop a comment below we are ready to help you.

If you find this tutorial is useful then share this article Facebook or other social media. Comment below lemme know how this contact form worked in your blog 🙋.

Summary
Review Date
Reviewed Item
Contact Us Form for Blogger
Author Rating
51star1star1star1star1star

LEAVE A REPLY

Please enter your comment!
Please enter your name here