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.

Highlight Table Row using CSS

In one of the previous posts, we have already seen How to Make a Zebra Striped Table With CSS 3. In this post, I am going share a simple CSS code snippet which allows you to highlight table rows on mouse hover without using any JavaScript.

See Also : Create Image Zoom Effect Using CSS3 Transitions

Highlight two table rows on hover with CSS

Highlight two table rows on hover with CSS

tr:hover {
    background-color: #ffff99;
}

The above, code will affect all the rows within every table on your webpage or website. But, you can use class or ID to limit this effect to a specific table.