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.
