GravityWP

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

Erik van Beek

Complex List Field Gravity Forms

· ·

Do you want to add a very complex list field to your Gravity Form? This is the way to do it. Add dates, dropdowns, uploads and numbers (and calculations of these numbers) to your list field. it’s amazing what extra power you give to your form… for your users!

Download tutorial PDF Download GF List Add-ons
  1. Install Gravity View List Add-ons
  2. Add CSS to style the complex list
  3. Tip: Wrap your CSS code within a @media rule (with min-width)

Install Gravity View List Add-ons

First see the the screenshot how your complex list could look like. We are working on a demo.
You have to download several plugins to create the complex list field for Gravity Forms:

Add CSS to style the complex list

First you have to add CSS code to the page you embed the form on:
.gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
    padding: 0;
} 
. gfield_list_cell { 
    display: block !important;
} 

//show labels under fields within List
.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;
}
Other CSS used in this example
#field_95_1 .ginput_container .ginput_container_list.ginput_list .gfield_list.gfield_list_container thead  {
  display:none;
}
 
.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;
}
 
.gform_wrapper table.gfield_list td + td, .gform_wrapper table.gfield_list th + th {
    padding: 0;
    padding-right:15px;
}
 
.gfield_list_cell {
    display: block !important;
}
 
.gfield_list_cell.gfield_list_1_cell1 {
    margin-top: 20px !important;
    border-top: 5px solid #65a9cc !important;
}

.gfield_list_1_cell1 {
float: left;
width: 100%;
}
 
.gfield_list_1_cell2, .gfield_list_1_cell3 {
float: left;
width: 33%;
}
 
 
.gfield_list_1_cell4 {
float: right;
width: 33%;
}
 
.gfield_list_1_cell5, .gfield_list_1_cell6, .gfield_list_1_cell7 {
float: left;
width: 25%;
}
 
 
.gfield_list_1_cell8 {
float: right;
width: 25%;
}
 
 
.gfield_list_1_cell9 {
float: left;
width: 50%;
}
 
.gfield_list_1_cell10 {
float: right;
width: 50%;
}

Tip: Wrap your CSS code within a @media rule (with min-width)

Use the CSS @media Rule: http://www.w3schools.com/cssre… when you add the css code. That way, the list is also readable (and fillable) on mobile devices. If your list is only properly visible at a minimum width of for example 1120 pixels. Wrap around your css code for your list this media screen rule:
@media screen and (min-width: 1120px) {
//here your code
}
And check if your list than shows okay on lower screen resolutions.