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 modifications to make it look as if it's a part of the page.

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

Step 1: Adding The Contact Form Code

Copy the following code and paste it in your static page 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 uk-input" name="name" placeholder="Name" type="text" value="">
        <input id="ContactForm153_contact-form-email" class="contact-form-email uk-input" name="email" placeholder="Email *" type="text" value="">
        <textarea id="ContactForm153_contact-form-email-message" class="contact-form-email-message uk-textarea" 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 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 blog dashboard then publish it.

Adding Contact Form to Static Page in Blogger Result Image