How to Add Bootstrap class to the Contact-Form-7

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

Add the bootstrap CND in the functions.php

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Bootstrap form uses the class form-control for the input element. Let’s add this to the form.

// Bootstrap input element
<input type="text" class="form-control" id="username">

// Contact-Form-7
<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 "Send"]

Here’s the Output

Image01.jpg

Add the class to the button. Because the button requires two classes btn and btn-default separate them using the class tag

Make sure you place the classes before the “Send” tag.

// Correct
[submit class:btn class:btn-default "Send"]

// Will not work
[submit "Send" class:btn class:btn-default]

Here’s how you using Vertical form with Contact-Form-7 syntax. You can add these directly in the Contact-Form-7 Form tab.

Remove the form to wrap the form elements.

<form> // remove this
    <div class="form-group">
        <label for="txt">Your Name</label>
        [text your-name id:txt class:form-control]
    </div>
    <div class="form-group">
        <label for="email">Your Email (required)</label>
        [email* your-email id:email class:form-control]
    </div>
    <div class="form-group">
        <label for="sub">Subject</label>
        [text your-subject id:sub class:form-control]
    </div>
    <div class="form-group">
        <label for="msg">Your Message</label>
        [textarea your-message id:msg class:form-control]
    </div>
     [submit class:btn class:btn-default "Send"]
</form> // remove this

Replace <form class="form-horizontal"> with <div class="form-horizontal">

<form class="form-horizontal"> // Replace this with div
<div class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="txt">Your Name</label>
        <div class="col-sm-10">
            [text your-name id:txt class:form-control]
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Your Email (required)</label>
        <div class="col-sm-10">
            [email* your-email id:email class:form-control]
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="sub">Subject</label>
        <div class="col-sm-10">
            [text your-subject id:sub class:form-control]
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="msg">Your Message</label>
        <div class="col-sm-10">
            [textarea your-message id:msg class:form-control]
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            [submit class:btn class:btn-default "Send"]
        </div>
    </div>
</form> // Replace this with div
</div>

Copyright © 2006 - 2017 beekeepersblog. All rights reserved