How To

Display Contact Form 7 Fields on 2 or More Columns with HTML markup

This is a trick I picked up from Madalin that allows you to use columns with simple HTML markup, There are multiple ways of dong this but I like this one the best. Using columns for your forms improves usability and overall looks better.

Create a series of classes for the columns: one-half, one-third, last.

.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 20px;
    z-index: 999;

.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
    margin-right: 0 !important;
    clear: right;

@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;

Insert this code in your child theme or you could use a plugin for code injection like the Simple Custom CSS & JS.

Edit the CF7 form and wrap it with divs like <div class="one-half"> ... </div>.

[text* your-name placeholder "Name*"]

<div class="one-half">
[email* your-email placeholder "Email*"] 
<div class="one-half last">
[tel* your-phone placeholder "Phone"]

<div class="one-half">
[text your-timeline placeholder "Estimated Timeline"]
<div class="one-half last">
[text your-budget placeholder "Budget Range"]

[textarea* your-message placeholder "Project Summary*"]
[submit "Submit"]

Your from should look like this.