jasonsyourhuckleberry
3/29/2019 - 6:37 PM

How to Display Contact Form 7 Fields on 2 or More Columns

The .last class removes the margin-right value from the columns for perfect alignment to the container. Also, a media query specifies that if the screen is smaller than 768px(the width of a tablet screen), display columns one under another. In other words, the code creates responsive columns for Contact Form 7.

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

Source: https://deliciousthemes.com/contact-form-7-fields-columns/

cf7-cols
content_copyfile_download
.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.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;
    }
}
cf7-cols-html
content_copyfile_download
<div class="one-half">
<label> Your Name (required) 
     </label>
</div>
 
<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>
 
<label> Your Message
    [textarea your-message] </label>
 
[submit "Send"]