Style Contact Form 7 WordPress Plugin

The Contact Form 7 is a neat plugin when it comes to forms in WordPress. But using it, we have to customize it for our and our themes needs.

By default, CF7 hasn’t the best styles, so it is the best solution to turn it off. Please note that the plugin’s appearance not equal to your theme’s form styles. CF7 only add styles for related stuff like the error messages, loader and so on. All of the other styling – how your buttons, input fields look – is your theme territory.

There are some excellent practice which worth to follow if you want to use or support this plugin in your themes. Let’s see them!

Turn of The Default Script and Style Loading

To remove the default JS and CSS you can do the followings:

Remove It Through wp-config.php

define( 'WPCF7_LOAD_JS', false );
define( 'WPCF7_LOAD_CSS', false );

Remove It Through Filters

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

If your theme support CF7 this is the cleaner way because this is achievable from your functions.php.

Remove autop

By default, all of your fields will be wrapped with a <p> tag which isn’t necessary. To remove this behavior add the following to your wp-config.php:

define( 'WPCF7_AUTOP', false );

Modify The Form Templates

If you create a new form with the plugin, you get an editable default template which is essentially the inputs wrapped in a <label> element; this is not the best solution if you want to style. To better result add you own markup like the one we mostly use:

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

Rewrite The Default CSS

The safest way to reformat the CSS to get the default ones from the plugin directory and rewrite it. We mostly do this modification. It is a short file and you can include the rewritten one in your theme. Check out and use our rewrited and cleaned Contact Form 7 stylesheets .

 // Generic styles
.wpcf7 {
    .ajax-loader {
        display: none;
        width: 20px;
        height: 20px;
        background-color: #777;
        float: left;
        
        &.is-active {
            display: inline-block;
            animation: loader 1.2s infinite ease-in-out;
        }
    }

    .ajax-error {
        display: none;
    }

    .placeheld {
        color: map-get($colors, 'medium-gray');
    }

    input[type="file"] {
        cursor: pointer;
    }

    input[type="file"]:disabled {
        cursor: default;
    }

    .wpcf7-submit:disabled {
        cursor: not-allowed;
    }
}

// Validation messages
.wpcf7-response-output {
    margin: 1.5rem 0 0 0;
    padding: 0.8em 1em;
    border-radius: map-get($settings, 'border-radius');
    background: map-get($colors, 'medium-gray');
    color: map-get($colors, 'black');

    &.wpcf7-mail-sent-ok {
        background: map-get($colors, 'success');
        color: #fff;
    }

    &.wpcf7-mail-sent-ng,
    &.wpcf7-aborted {
        background: map-get($colors, 'error');
        color: #fff;
    }

    &.wpcf7-spam-blocked,
    &.wpcf7-validation-errors,
    &.wpcf7-acceptance-missing {
        background: map-get($colors, 'warning');
        color: #fff;
    }
}

// Field wrapper
.wpcf7-form-control-wrap {
    display: block;
    position: relative;
    
    .wpcf7-not-valid-tip {
        color: map-get($colors, 'error');
        font-size: 0.9rem;
        display: block;
        margin-top: 0.2rem;
    }

    .wpcf7-not-valid {
        border-color: map-get($colors, 'error') !important;
    }
}

// Radio and Checkbox list element
.wpcf7-list-item {
    display: inline-block;
    margin: 0 1rem 0 0;
    
    > label {
        display: flex;
        align-items: center;

        input {
            margin-right: 0.3rem;
        }

        .wpcf7-list-item-label {
            line-height: 1.2em;
        }
    }
}

// Hide element
.wpcf7-display-none {
    display: none;
}

@keyframes loader {
    0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}