Bootstrap 3 Horizontal Form

Hi!

Just add your Bootstrap code to the WPCF7 form. Something like this:

<div class="form-group">
            <label class="control-label" for="email">Your email</label>
            <div class="controls">
            [email* email /50 id:email class:form-control class:input-md placeholder "YOUR EMAIL"]
            </div>
          </div>

Note that you append several class declarations by just repeating the class:form-control class:input-md and so on.

Good luck!
/T

Correction: You should add it to the form’s ADMIN in WPCF7.

Inside edit-contact-form.php?

No, you insert the code inside the WPCF7 main form field, where you create your form in the plugin’s WP-admin (wp-admin/admin.php?page=wpcf7).

The plugin’s form field (called “Form”) accepts plain html, but to make it work the form fields need to be coded with WPCF7 shortcode.

Read up on it here: https://contactform7.com/tag-syntax/

In case anybody comes looking for this answer. I found a fantastically thorough solution to integrating Contact Form 7 with Bootstrap 3. Just add these lines to your forms.less file or theme.less file and recompile Bootstrap.

input[type="text"].wpcf7-form-control,
input[type="password"].wpcf7-form-control,
input[type="datetime"].wpcf7-form-control,
input[type="datetime-local"].wpcf7-form-control,
input[type="date"].wpcf7-form-control,
input[type="month"].wpcf7-form-control,
input[type="time"].wpcf7-form-control,
input[type="week"].wpcf7-form-control,
input[type="number"].wpcf7-form-control,
input[type="email"].wpcf7-form-control,
input[type="url"].wpcf7-form-control,
input[type="search"].wpcf7-form-control,
input[type="tel"].wpcf7-form-control,
input[type="color"].wpcf7-form-control,
select.wpcf7-form-control
{
    .form-control
}

.wpcf7-checkbox .wpcf7-list-item
{
    .checkbox
}

.wpcf7-checkbox.checkbox-inline .wpcf7-list-item
{
    .checkbox-inline
}

.wpcf7-radio .wpcf7-list-item
{
    .radio
}

.wpcf7-radio.radio-inline .wpcf7-list-item
{
    .radio-inline
}

Then, recompile bootstrap using a command like this:
lessc -x bootstrap.less > path/to/my/folder/bootstrap.min.css
I hope this helps someone.