Complex List Field Gravity Forms

Erik van Beek · Apr 3, 2018 ·

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

Install Gravity View List Add-ons
Add CSS to style the complex list
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.

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 Other GF Add-ons (like Complex List Field 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

Download tutorial PDF Download GF List Add-ons