Add Responsive Blogger Contact Form With Bootstrap3 Styles Tutorial

With the release of our free and pro Bootstrap3 mobile 1st responsive Blogger store themes/templates with shopping cart, we have received a lot of enquiries to add a custom contact form. Good news that Blogger had already released a "Contact Form" widget, which blog owners can easily add via their Dashboard > Layout > Add Widget > select Contact Form widget.

The problem here (when including default Blogger Contact Form widget) is that the styling does not use Bootstrap3 pre-defined classes, so upon first widget install, the form will look somewhat awkward. This post will show you how to easily customise the default Blogger Contact Form styling using Bootstrap3 classes.

Here is a working (and tested live) custom styling Blogger Contact Form widget at this FREE responsive Blogger store theme demo page (scroll to footer section)

Adding Default Blogger Contact Form

From your Blogger dashboard > go to Layout > click at any "Add a Widget" link > click the "More Widget" link > find the "Contact Form" widget > then name the widget's title > click "Save".

Now you can drag & drop the Contact Form widget at any area of your Blogger theme/template, preferably at sidebar or footer section.

Click the "Save Arrangements" button and view your changes.

Adding Bootstrap3 Custom Contact Form Styling

If you are not using a Bootstrap3 framework for Blogger themes, you can add the framework styling by including the codes below right above/before the </head> tag:-

Note: If you are using our Blogger store/shop theme or template here you can skip this section because it has already pre-installed & comes with the theme by default.

<!-- Loading bootstrap stylesheets -->
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'/>

<!-- Font Awesome -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

</head><!-- YOUR REFERENCE -->

The above codes also include Font Awesome, a beautiful optimized icon-set stylesheet that works with the Bootstrap3 framework.

Customizing Blogger Contact Form Widget

Now find your Contact Form widget by clicking on the "Jump to Widget" button and select the "ContactForm*" ( where * is an integer) widget, you will be directed to the widget codes almost instantly. An example would look like so:-

          <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

Now copy below codes to REPLACE the default Blogger Contact Form widget using the new mark-up using Bootstrap3 form inputs styling classes.

Pay attention on the starting & ending TAG(s) highlighted GREEN & YELLOW above & below for the Contact Form widget codes REPLACEMENTS:-

<b:widget id='ContactForm1' locked='true' title='Contact Form' type='ContactForm'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'><data:title/></h2>
            </b:if>
              <form class='form' name='contact-form'>
                <div class='form-group'>
                  <label class='sr-only'><data:contactFormNameMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                  <div class='input-group'>
                    <div class='input-group-addon'><i class='fa fa-user fa-lg'/></div>
                    <input class='form-control theName' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Full Name (required)' type='text' value=''/>
                  </div>
                </div>
                <div class='form-group'>
                <label class='sr-only'><data:contactFormEmailMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                  <div class='input-group'>
                    <div class='input-group-addon'><i class='fa fa-envelope fa-lg'/></div>
                    <input class='form-control theEmail' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='E-mail Address (required)' type='email' value=''/>
                  </div>
                </div>
                <div class='form-group'>
                <label class='sr-only'><data:contactFormMessageMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                <div class='input-group'>
                  <div class='input-group-addon'><i class='fa fa-comment fa-lg'/></div>
                  <textarea class='form-control theMessage' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Your Message (required)' rows='5'/>
                  </div>
                </div>
                <div class='form-group'>
                  <input class='contact-form-button-submit btn btn-primary' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
                  <div class='alert-wrapper' style='text-align: center; width: 100%'>
                    <p class='contact-form-error-message text-alert' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                    <p class='contact-form-success-message text-success' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                  </div>
                </div>
              </form>
        </b:includable>
          </b:widget>

We have simplified & optimised the new Blogger Contact Form widget here which strips off most of the default styling pre-included with Blogger & also added screen reader classes for additional semantic mark-ups .

You can edit the contact form field placeholder text at the highlighted ORANGE area.

Now click "Save Template" and view your current theme changes, You should have a new & awesome Blogger Contact Form using Bootstrap3 responsive mobile 1st classes with icons by Font Awesome.

Have a try! It looks awesome & your users can easily contact you right from your Blogger store (or blog) for FREE, without using any external services. Test the customised Blogger contact form here at a working demo page http://blogrcart-closet.blogspot.com ~ a responsive blogspot store/shop theme with shopping cart functionalities.