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: http://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.
