Integrating Contact Form 7 With Bootstrap in WordPress

Contact Form 7 is one the most popular contact form plugins in WordPress with 27,000,000+ downloads. This post is for WordPress theme developers who wants integrate Contact Form 7 plugin with Bootstrap CSS Framework.

Useful Read: How to restrict users to view only media library items

Here’s an example to make the integration process easier to understand. We are using id and class which are built-in options in Contact Form 7.

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

<div class="form-group">
    <label for="your-email">Your Email (required) : </label>
    [email* your-email  class:form-control id:your-email]
</div>

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

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

<div class="form-group">
    [submit class:btn class:btn-primary "Send"]
</div>

As you can see, we need to use multiple class options to apply multiple classes to same element.

0 Comments

Leave a Comment.