Contact Form 7 Columns

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.

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.

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.