How to Add Contact Form to Static Page or Post in Blogger?

How to Add Contact Form to Static Page or Post in Blogger Preview

Adding a Contact Form in your blog is so important. But the only possible way is thorough the blog Layout page then you will need to make some undesirable modifications to make its look as if it's a part of the page away from the rest of the blog.

The following 2 steps are so simple and will show you how to add the Contact Form in a proper way to a Static Page or Post in your Blogger blog.

First of all, to swtich to the HTML view in a Static Page or Post:

From the icon in the top left corner in the toolbox select the HTML view

Adding Contact Form to Static Page or Post in Blogger HTML View Image

Step 1: Adding The Contact Form Code

Copy the following code and paste it in your Static Page or Post HTML view.

<div id='ContactForm153' class='ContactForm'>
  <div class="contact-form-widget">
    <div class="form">
      <form name="contact-form">
        <input id="ContactForm153_contact-form-name" class="contact-form-name" name="name" placeholder="Name" type="text" value="">
        <input id="ContactForm153_contact-form-email" class="contact-form-email" name="email" placeholder="Email *" type="text" value="">
        <textarea id="ContactForm153_contact-form-email-message" class="contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
        <input id="ContactForm153_contact-form-submit" class="contact-form-button contact-form-button-submit" type="button" value="Send">
        <div class="contact-form-message-box">
          <p id="ContactForm153_contact-form-error-message" class="contact-form-error-message"></p>
          <p id="ContactForm153_contact-form-success-message" class="contact-form-success-message"></p>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  (function(){var Bid="000000000000000";document.addEventListener("DOMContentLoaded",function(){_WidgetManager._RegisterWidget("_ContactFormView",new _WidgetInfo("ContactForm153","sidenav_section",document.getElementById("ContactForm153"),{contactFormMessageSendingMsg:"Sending...",contactFormMessageSentMsg:"Your message has been sent.",contactFormMessageNotSentMsg:"Message could not be sent. Please try again later.",contactFormInvalidEmailMsg:"A valid email address is required.",contactFormEmptyMessageMsg:"Message field cannot be empty.",title:"Contact Form",blogId:Bid,contactFormNameMsg:"Name",contactFormEmailMsg:"Email",contactFormMessageMsg:"Message",contactFormSendMsg:"Send",submitUrl:"https://www.blogger.com/contact-form.do"},"displayModeFull"))})})();
</script>

For Salbuta theme users, use this code instead as it's styled to fit the Salbuta theme design style.

<div id='ContactForm153' class='ContactForm'>
  <div class="contact-form-widget">
    <div class="form">
      <form name="contact-form">
        <div class="uk-margin">
          <div class="uk-inline uk-width-1-1">
            <span class="uk-form-icon uk-form-icon-flip" data-uk-icon="user"></span>
            <input class="contact-form-name uk-input" id="ContactForm153_contact-form-name" name="name"
              placeholder="Name" type="text" value="">
          </div>
        </div>
        <div class="uk-margin">
          <div class="uk-inline uk-width-1-1">
            <span class="uk-form-icon uk-form-icon-flip" data-uk-icon="mail"></span>
            <input class="contact-form-email uk-input" id="ContactForm153_contact-form-email" name="email"
              placeholder="Email *" type="text" value="">
          </div>
        </div>
        <div class="uk-margin">
          <div class="uk-inline uk-width-1-1">
            <textarea class="contact-form-email-message uk-textarea"
              id="ContactForm153_contact-form-email-message" name="email-message" placeholder="Message *"
              rows="5"></textarea>
          </div>
        </div>
        <div class="uk-button uk-button-danger uk-width-1-1">
          <span>Send</span><span class="uk-margin-small-left" data-uk-icon="forward"></span>
          <input class="contact-form-button contact-form-button-submit"
            id="ContactForm153_contact-form-submit" value="">
        </div>
        <div class="contact-form-message-box">
          <p class="contact-form-error-message" id="ContactForm153_contact-form-error-message"></p>
          <p class="contact-form-success-message" id="ContactForm153_contact-form-success-message"></p>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  (function(){var Bid="000000000000000";document.addEventListener("DOMContentLoaded",function(){_WidgetManager._RegisterWidget("_ContactFormView",new _WidgetInfo("ContactForm153","sidenav_section",document.getElementById("ContactForm153"),{contactFormMessageSendingMsg:"Sending...",contactFormMessageSentMsg:"Your message has been sent.",contactFormMessageNotSentMsg:"Message could not be sent. Please try again later.",contactFormInvalidEmailMsg:"A valid email address is required.",contactFormEmptyMessageMsg:"Message field cannot be empty.",title:"Contact Form",blogId:Bid,contactFormNameMsg:"Name",contactFormEmailMsg:"Email",contactFormMessageMsg:"Message",contactFormSendMsg:"Send",submitUrl:"https://www.blogger.com/contact-form.do"},"displayModeFull"))})})();
</script>

You will end up with something like this.

Adding Contact Form to Static Page or Post in Blogger Code Image

Step 2: Adding Your Blog ID

Change 000000000000000 in the code with your blog id number that you can find in the link of your Blogger blog dashboard then publish it.

Adding Contact Form to Static Page or Post in Blogger Result Image


If you have any questions, let me know in the comments.