GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

Erik van Beek

Styling multiple columns List Gravity Forms

· ·

When you have some kind of repetition in your form (every time the same block), for sure the Gravity Forms List field is best to use. But sometimes it’s difficult to fit everything in one single row. With a little CSS you can change that easily.

  1. Don't display the thead in the list
  2. Show column names below the list columns
  3. Style the columns in your list
  4. All the CSS used in this example
DEMO

Try it yourself (hit the +-sign)

Don't display the thead in the list

To do this, it’s first important to loose the thead of the list. It’s better to show the column names below the column (as in the example). To remove the thead:
#field_6_5 thead {
    display: none;
}

Show column names below the list columns

.gform_wrapper ul.gform_fields.form_sublabel_above table.gfield_list td::before, .gform_wrapper ul.gform_fields.form_sublabel_below table.gfield_list td::after {
  content: attr(data-label);
  font-size: 14px;
  letter-spacing: .5pt;
  white-space: nowrap;
  display: block;
  clear: both;
}

Style the columns in your list

.gfield_list_cell.gfield_list_2_cell1, .gfield_list_cell.gfield_list_2_cell2, .gfield_list_cell.gfield_list_2_cell3 {
    display: block;
    float: left;
}
 
.gfield_list_cell.gfield_list_2_cell4 {
    display: block;
    float: right;
}

All the CSS used in this example

#field_6_5 thead {
    display: none;
}

.gfield_list_cell.gfield_list_2_cell1, .gfield_list_cell.gfield_list_2_cell2, .gfield_list_cell.gfield_list_2_cell3 {
    display: block;
    float: left;
}
 
.gform_wrapper ul.gform_fields.form_sublabel_above table.gfield_list td::before, .gform_wrapper ul.gform_fields.form_sublabel_below table.gfield_list td::after {
  content: attr(data-label);
  font-size: 14px;
  letter-spacing: .5pt;
  white-space: nowrap;
  display: block;
  clear: both;
}

.gfield_list_cell.gfield_list_5_cell1 {
    width: 100%;
}

.gfield_list_cell.gfield_list_5_cell1, .gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3, 
.gfield_list_cell.gfield_list_5_cell4 {
    display: block;
    float: left;
}

.gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3, 
.gfield_list_cell.gfield_list_5_cell4 {
    width: 30% !important;
}

.gfield_list_cell.gfield_list_5_cell2, .gfield_list_cell.gfield_list_5_cell3 {
    margin-right:5% !important;
}

.gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
    padding: 0 0 0 0 !important;
}

Hire the best developers for Gravity Forms

If you’re looking for good and experienced Gravity Forms developers to help you with your questions about Gravity Forms (like Styling multiple columns List Gravity Forms) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.

Click here to visit Codeable