Beekeepersblog logo

Contact Form 7 WordPress plugin image icon

How to Add Bootstrap 4 classes to the Contact-Form-7 [Updated 2019]

/ Contact Form 7

This tutorial is Updated with Latest Boostrap 4

Introduction

You can add Bootstrap class to the Contact-Form-7 in the Form tab directly.

Before you add the class, first call the Bootstrap in the functions.php using the enqueue method. To get the latest Bootstrap – go here Latest Boostrap CDN. For older versions – go here Older Bootstrap CDN

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Basic form

Bootstrap form uses the class form-control for the input element. Let’s add this class in the form using the contact-form-7 syntax.

<label> Your Name
    [text your-name class:form-control] </label>

<label> Your Email (required)
    [email* your-email class:form-control] </label>

<label> Subject
    [text your-subject class:form-control] </label>

<label> Your Message
    [textarea your-message class:form-control ] </label>

[submit class:btn class:btn-dark "Send"]

Your form should look like this

Bootstrap 4 classes applied - Basic form image
Figure 1: Screenshot of the Front end form with the Boostrap classes are added.

Label

By default the Label in the Contact-Form-7 wraps the input field

<label> Your Name
    [text your-name] </label>

You can also separate them. If you do, make sure you add the for and id attributes for reference. Also notice the label has standard HTML attributes with quotes wrapping for="yourname" but not for the input id:yourname

<label for="yourname">Your Name</label>
    [text your-name id:yourname]

Submit

Make sure you place the classes before the “Send” tag. It will not work if you place the “Send” before the classes.

<!-- Works -->
[submit class:btn class:btn-dark "Send"]

<!-- Will not work -->
[submit "Send" class:btn class:btn-dark]

Help text

You can use form help text under the input field. Doing so you might ran into some css issue. Lets look at that.

...
<label for="youremail">Your Email (required)</label>
    [email* your-email id:youremail class:form-control]
    <small class="text-muted">We'll never share your email with anyone else.</small>
...

It will look something like this.
Now you might notice an ugly space between the input field and the help text

Help text added with Ugly space - Basic form image
Figure 2: Screenshot of the Front end form with extra space between the form input field and the Boostrap form help text.

If you inspect the element you will notice the <p> and a <br> tags between the elements. We did not add them, but Contact-form-7 did. Lets see how we remove them.

Inspect help text - Basic form image
Figure 3: Screenshot of the Front end form inspect element window.

Contact-form-7 provide the code to turn it off. Copy and paste this code in your wp-config.php which is location in your root directory.

/* for Contact-Form-7 */
define('WPCF7_AUTOP', false);

/* That's all, stop editing! Happy blogging. */

It does fix the spacing issue, because the <span> is a inline element, the Subject displays on the same line.

Help text spacing fixed - Basic form image
Figure 4: Screenshot of the Front end form where <p> and <br> tags are removed with the Contact-Form-7 php function.

use the original Bootstrap form-group class to wrap all the blocks.

<div class="form-group">
    <label for="yourname">Your Name</label>
    [text your-name id:yourname class:form-control]
</div>

<div class="form-group">
    <label for="youremail">Your Email (required)</label>
    [email* your-email id:youremail class:form-control]
    <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</div>

<div class="form-group">
    <label for="yoursubject">Subject</label>
    [text your-subject id:yoursubject class:form-control]
</div>

<div class="form-group">
    <label for="yourmessage">Your Message</label>
    [textarea your-message id:yourmessage class:form-control ]
</div>

[submit class:btn class:btn-dark "Send"]
All form blocks are wrapped with Bootstrap 4 - Basic form image
Figure 5: Screenshot of the Front end form with Boostrap .form-group div is added to the form elements for proper spacing.

Horizontal Form

Use the same code Bootstrap 4 provides for the wrapping. Pay attention to the quotes for the ‘label’ and colon for the ‘input’ field class.

<div class="form-group row">
    <label for="yourname" class="col-sm-2 col-form-label">Your Name</label>
    <div class="col-sm-10">
        [text your-name id:yourname class:form-control]
    </div>
</div>
...
Bootstrap 4 horizontal form - image
Figure 6: Screenshot of the Front end Bootstrap Horizontal form.