Bootstrap Style For Contact Form 7

If you are using the popular CSS framework Bootstrap and also the Contact Form 7 plugin in your blog, you might have noticed that the forms fields generated from the Contact Form plugins are quite different in style. If you’re using Bootstrap for your WordPress theme, you will certainly love the fact that you can do it easily without using any plugin, adding function code or tweaking the CSS file. It will all look like Bootstrap so that it fits into your website design. Of course, there is already a Bootstrap plugin for Contact Form 7 which modifies all the output of the popular Contact Form 7 plugin to be fully compatible with the current version 3 of the popular CSS framework Bootstrap, this easy to use tutorial will save you from using more plugin in your blog.

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, use this html and shortcodes below for your form.

<div class="form-group">
<label class="required" for="yourName">Your Name</label>
[text* your-name id:yourName class:form-control]
</div>
<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! For the alert messages to look like the Bootstrap way, I will investigate another day.

Leave a Reply