Columns & Block fields
In this article we’ll be discussing how to make certain fields within a Contact Form 7 setup display using columns. To accomplish this, we’ll make use of the handy helper classes provided with Salient called “nectar-wpcf7-inline-form” and “nectar-wpcf7-inline-field“.
Each field in your form that would like inside a column can be wrapped in a div with the class name “nectar-wpcf7-inline-field“.
You will find example snippets which you can copy/paste and modify as needed into the Contact Form 7 form creation editor. If you don’t already have that plugin installed, make sure to read over the Installing Plugins chapter.
<div class="nectar-wpcf7-inline-form">
<div class="nectar-wpcf7-inline-field">
[text* your-name placeholder "Name"]
</div>
<div class="nectar-wpcf7-inline-field">
[tel* tel-214 placeholder "Phone Number"]
</div>
</div>
[email* your-email placeholder "Email Address"]
[submit "Contact Us"]All Fields in Columns
Using the structure from above, it’s easy to create further columns. Simply wrap each field with the nectar-wpcf7-inline-field div as many times as needed, and the total column number will automatically adjust to the fill the space.
<div class="nectar-wpcf7-inline-form">
<div class="nectar-wpcf7-inline-field">
[text* your-name placeholder "Name"]
</div>
<div class="nectar-wpcf7-inline-field">
[tel* tel-214 placeholder "Phone Number"]
</div>
<div class="nectar-wpcf7-inline-field">
[email* your-email placeholder "Email Address"]
</div>
<div class="nectar-wpcf7-inline-field">
[submit "Contact Us"]
</div>
</div>Tweaking Mobile Columns
By default, the columns will persist through mobile viewports. Which works nicely when using 1-3 columns. However, if you’re using more per row and would like the fields to display at a reduced width on smaller screens, simply add the class name “mobile-2-col” or “mobile-1-col” on the wrapping div (nectar-wpcf7-inline-form). This will allow columns to alter their size for smaller screens.
<div class="nectar-wpcf7-inline-form mobile-fullwidth">
<!-- Form fields here -->
</div>