This is a post for WordPress developers out there who use (what was once called Twitter) Bootstrap v3 within your WordPress themes and want it to play nice with the Contact Form 7 plugin.

Note: this refers to Bootstrap v3. If you want info about older Bootstrap v2 please go here.

1: Get The Formatting Right

Let’s make sure our Contact Form 7 form uses the proper Bootstrap html structure and css class names. When you are in the Contact Form 7 settings section of your WordPress admin, editing the form, drop in the blob of html & shortcodes below for your form.

<div class="form-group">
	<label class="required" for="yourEmail">Your Email</label>
	[email* your-email id:yourEmail class:form-control]
</div>
<div class="form-group">
	<label class="required" for="yourMessage">Your Message</label>
	[textarea* your-message id:yourMessage class:form-control]
</div>
<div class="form-group">
	[submit class:btn class:btn-primary class:btn-lg "Send"]
</div>

That’s it! Done.


2: Let Your Submit Button Be A Bootstrap-styled Button

You’ll notice in the blob of html above that we are not using the Contact Form 7 submit form shortcode but instead the full html button.

[submit class:btn id:someid "Contact Us"]

Not using this shortcode, which only allows you to add one class

Contact Form 7 says they recommend the above shortcode method, but what if you want to add two or more classes? The method below — which gives you the freedom to add multiple classes — can also work with the Contact Form 7 plugin.

<button type="submit" class="btn btn-large btn-primary">Send</button>
<img class="ajax-loader" src="http://www.YOURSITE.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

If you want to roll your own submit button, make sure you change YOURSITE.com.

UPDATE 2:
Thanks to Damian (and Scott R. followed up and let me know too, though I didn’t get it working before now) for letting me know that CF7 now allows for multiple classes to be assigned to the submit shortcode. The first html snippet at the top of the page now accounts for this.

However, I’ll leave the “create your own submit button” html directly above here if anyone ever wants to roll their own.

UPDATE 1:
Thanks to Scott R. for emailing me this head’s up:

Replacing CF7′s own submit button with Bootstrap’s <button> removes the CF7′s visual feedback icon as the form is being processed. This leaves visitors in the dark because the form takes several seconds to process before receiving a success message.

Hopefully your server is quick enough to return a response in a matter of milliseconds rather than seconds. I haven’t experienced any noticeable delays where this seems to be an issue. But I do understand the benefit and I have updated the code on this page to allow for the ‘loading’ spinning animated gif.


1: Horizontal Bootstrap Forms And Contact Form 7

So the code in step 1 above will give you the the standard form where the labels display above above the text fields and textareas. What if you want the labels to appear to the left of the form fields?

We don’t have access to the form element to add a ‘form-horizontal’ class to it so we could use a filter (in our functions.php) to add it:

/**
 * ====================================================
 * Help Contact Form 7 Play Nice With Bootstrap
 * ==================================================== 
 * Add a Bootstrap-friendly class to the "Contact Form 7" form
 */
add_filter( 'wpcf7_form_class_attr', 'wildli_custom_form_class_attr' );
function wildli_custom_form_class_attr( $class ) {
	$class .= ' form-horizontal';
	return $class;
}

BUT, we really don’t need to do that. We can wrap an additional div around our form with a class of ‘form-horizontal’. Then we add the rest of the form along with its Bootstrap grid classes as defined here.

<div class="form-horizontal">
<div class="form-group">
	<label class="col-sm-2 control-label required" for="yourEmail">Your Email</label>
	<div class="col-sm-10">[email* your-email id:yourEmail class:form-control]</div>
</div>
<div class="form-group">
	<label class="col-sm-2 control-label required" for="yourMessage">Your Message</label>
	<div class="col-sm-10">[textarea* your-message id:yourMessage class:form-control]</div>
</div>
<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-large btn-primary">Send</button><img class="ajax-loader" src="http://www.YOURSITE.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;"></div>
</div>
</div>

Success And Error Message Styling

Now if we could just apply the default Bootstrap alert styles to the Contact Form 7 alerts – and place it better (bad UI! yuck!). Will have to investigate that for another day!

Hope this helps. Happy coding!

Replay & Share

Let me know what you think: Twitter: @natguy or consider sharing it on Facebook.