Contact Form 7 meets Bootstrap

Contact Form 7 meets Bootstrap

Some pages on my site include “affiliate links”. When you follow these and buy something on the other end, I get a small commission. This commission does not raise the price of your purchase. Ever. Not even a little bit.

Have you ever visited a site that is using Bootstrap, but were disappointed to find that the pleasant and usable interface design strangely skips the contact form?

Many WordPress sites use Bootstrap for the entire implementation, but strangely leave Bootstrap out of the mix when it comes to contact pages that are displaying Contact Form 7 forms (CF7).

The reason for this, of course, is that CF7 does not include Bootstrap integration out of the box. And, frankly, we shouldn’t expect it to account for Bootstrap. One of the reasons that CF7 is so popular is precisely the fact that it doesn’t force any particular integration, thereby allowing users to choose their own approach.

So, how do you get CF7 to play nicely with Bootstrap?

Add this…

There is plenty of advice online for getting this done. Here are two approaches that have worked for me in the past (though I’ll be recommending an easier approach below):

  1. Bootstrap for Contact Form 7 by Felix Arntz is a fine plugin by a very talented developer, though I haven’t used it with recent releases of Bootstrap. Visit the plugin page to determine whether it could be a good fit for you.
  2. You can also add style to your theme that applies Bootstrap goodness to your form. Simply determine which Bootstrap styles you want to apply to your CF7 controls (using your browser inspector, for example), and add those styles to your theme, targeting the applicable CF7 classes. There used to be quite a few posts covering these techniques online, but I’ve noticed less of this sort of advice when hunting for a few examples to include in this article. There is good reason for this…

CF7 is crafted in a way that makes adding supplemental classes quite easy. So, instead of using an extra plugin, or replicating Bootstrap styles in your own stylesheets, why not use CF7 to Bootstrapify your forms using its existing capabilities?

Add nothing… Almost…

The existing CF7 form creation interface allows you to add whatever markup you wish, so you can simply wrap the form elements in Bootstrap structures.

Then, you can add class attributes to the CF7 form-tags to specify class names that CF7 will pour into the class attributes of the form markup that is generated by the plugin.

Here’s an example:

<div class="row">
<div class="col-12 col-md-6 required">
<label for="gilad-contact-first-name">First Name</label>

</div>
<div class="col-12 col-md-6">
<label for="gilad-contact-last-name">Last Name</label>

</div>
</div>

<div class="row">
<div class="col-12 col-md-6 required">
<label for="gilad-contact-your-email">Your Email</label>
[email* your-email class:form-control id:gilad-contact-your-email]
</div>
<div class="col-12 col-md-6">
<label for="gilad-contact-your-website">Your Website</label>
[url your-website class:form-control id:gilad-contact-your-website]
</div>
</div>

<div class="row">
<div class="col-12 required">
<label for="gilad-contact-your-message">Your Message</label>
[textarea* your-message class:form-control id:gilad-contact-your-message]
</div>
</div>

<div class="row">
<div class="col-12">
[submit class:btn class:btn-block class:btn-lg "Send Message"]
</div>
</div>

Of note in the above:

  1. The entire block is added as-is (modified to your needs, of course) in your CF7 form’s edit box (go to the first tab in the edit box; the one labeled “Form”)
  2. Most of the markup is traditional Bootstrap rows and columns
  3. To get Bootstrap classes to appear within the form elements generated by CF7, all you need to do is name the class within the CF7 form tag:
    1. The first example of this in the above is the class:form-control form-tag attribute in the first-name form-tag
    2. The last examples in the above are the class:btn, class:btn-block, and class:btn-lg form-tag attributes in the submit form-tag
  4. For these classes to affect your form as expected, all you need beyond the above code, is the Bootstrap CSS to be enqueued on the pages displaying this form

Simple, right?

Wanna see it in action? Visit my contact form. Like it? Use my contact form!

Leave a Reply

Your email address will not be published. Required fields labeled in bold.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>