Inserting column markup into WPForms

WPForms includes a visual layout builder for creating multi-column forms, but this only lets you break individual fields into columns. If you need a more complicated layout with multiple fields grouped in a column, you’ll need to add your own markup.

We can use the wpforms_display_field_before and wpforms_display_field_after hooks to insert markup before/after a field. These hooks include two parameters:

  • $field contains the settings for this particular field
  • $form_data contains the settings for the whole form


You can see the form I’m building in the screenshot above. I’m using the WPForms layout classes for the fields in the left side (First Name, Last Name, Company Name, Phone Number), but need additional markup to group these fields into a left column and put the textarea in a right column.

.wpforms-container#wpforms-57 {
.wpforms-field-container {
@include make-row;
.wpforms-field-container-right {
@include make-sm-column( 12 );
@include make-md-column( 6 );
view raw form.scss hosted with ❤ by GitHub
* Contact Form Two Column open
function ea_contact_form_two_column_open( $field, $form_data ) {
if( 57 != $form_data[ 'id' ] )
if( 1 == $field[ 'id' ] )
echo '<div class="wpforms-field-container-left">';
if( 6 == $field[ 'id' ] )
echo '</div><div class="wpforms-field-container-right">';
add_action( 'wpforms_display_field_before', 'ea_contact_form_two_column_open', 1, 2 );
* Contact Form Two Column Close
function ea_contact_form_two_column_close( $field, $form_data ) {
if( 57 != $form_data[ 'id' ] )
if( 6 == $field[ 'id' ] )
echo '</div>';
add_action( 'wpforms_display_field_after', 'ea_contact_form_two_column_close', 99, 2 );
view raw functions.php hosted with ❤ by GitHub

The first snippet shows the styling (SASS with mixins similar to Bootstrap 3). You’ll need to change this for your specific project, but it gives you an idea of what I’m doing. I’m displaying them as 6 columns (of a 12 column grid) on medium and larger screens.

In the PHP file, I’m limiting this code to the form with ID = 57 so it doesn’t affect other forms created on the site. Before the field with an ID = 1 (First Name) I’m adding a div .wpforms-field-container-left, and before the field with an ID = 6 (Comments or Questions) I’m closing the div and opening a new one, .wpforms-field-container-right. Then in the next function I’m closing the second div after the “Comments or Questions” field.

Join Our Team at CultivateWP

We design and build high-performance custom WordPress themes for market leading web publishers. We're looking for designers & developers to join our team.

Learn More

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions


Leave A Reply