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>

Can't find what you need?

Open a ticket