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!
Try it yourself (hit the +-sign)
Read the Tutorial PDF to understand the structure
Download the PDF file to get more insight how to make a layout for your list like this.
Download PDF Tutorial Complex List
Which Gravity Forms List Add-ons are used?
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 {
float: left;
width: 33%;
}
.gfield_list_1_cell3 {
float: left;
width: 33%;
}
.gfield_list_1_cell4 {
float: right;
width: 33%;
}
.gfield_list_1_cell2 {
float: left;
width: 33%;
}
.gfield_list_1_cell3 {
float: left;
width: 33%;
}
.gfield_list_1_cell4 {
float: right;
width: 33%;
}
.gfield_list_1_cell5 {
float: left;
width: 25%;
}
.gfield_list_1_cell6 {
float: left;
width: 25%;
}
.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.
Share this Post