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-half,
.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> <div class="one-half last"> [tel* your-phone placeholder "Phone"] </div> <div class="one-half"> [text your-timeline placeholder "Estimated Timeline"] </div> <div class="one-half last"> [text your-budget placeholder "Budget Range"] </div> [textarea* your-message placeholder "Project Summary*"] [submit "Submit"]
Your from should look like this.
