The Challenge
How can we receive complex tabular data in a Gravity Form?
For example, I recently had need of receiving the above information for a service profile. In this post, we’ll walk through how you can setup the native GF list field to meet this need.
The Tools
Apart from Gravity Forms, there are no other special tools needed to setup this solution.
The Solution
Add List Field & Define Columns
Our first step is to add a list field in our form. Enable multiple columns and add headings for each column. Take note of the heading you give the first column as you will need this to auto-populate the row headings.
Enable Dynamic Population
Under the Advanced tab, you will check to Allow field to be populated dynamically. Be sure to set a parameter name for dynamic population. You’ll need this later, too.
Dynamically Populate Row Headers
This is where the good stuff begins to happen. In order to populate the row headers, we will utilize the gform_field_value_$parameter_name filter. Using the code shown below, ensure you’ve properly set the filter name according to the dynamic population parameter name you set for the field. Then set the list array according to the column you want to populate.
- The key in each row’s array element must exactly match the header you set for the column.
- The value will define the row header you want for each row.
Set Row Headers As readonly & Prevent Row Removal
Finally, we add an HTML field at the beginning of our form which will contain some small javascript to prevent users changing the row headers or removing our rows. This script can also be found in the gist. Be sure to set your specific field ID in the selector. This script also modifies the CSS of these row headers (so that they don’t appear as a fillable field) and the tabindex attribute (so that they are removed from the tab flow of the form).
<?php
/*
Dynamically populates the first column of a Gravity Form multi-column list field
REQUIREMENTS
(1) The end of the the `gform_field_value_$parameter_name` filter must match the parameter you've set to allow field to be populated dynamically
(2) The key in each row's array element must match the header you have set for the column.
*/
add_filter( 'gform_field_value_certifications', 'typewheel_prefill_certifications_list' );
function typewheel_prefill_certifications_list( $value ) {
$list_array = array(
array(
"Certificate / License" => "Aquatics or Waterfront",
),
array(
"Certificate / License" => "Medical",
),
array(
"Certificate / License" => "Horsemanship",
),
array(
"Certificate / License" => "Wilderness",
),
array(
"Certificate / License" => "Food Service",
),
array(
"Certificate / License" => "",
),
);
return $list_array;
}/*
Sets inputs in column of Gravity Form multi-column list field as readonly
Removes icons for adding/removing rows from list field.
REQUIREMENTS
(1) Ensure you set the field ID & column number targeted in the jQuery selector
(2) Add this script to an HTML field at the start of your form
*/
<script>
jQuery(document).ready(function(){
jQuery( '.gfield_list_53_cell1' ).find( 'input, select, textarea' ).each(
function() {
if ( jQuery( this ).val() != '' ) {
jQuery( this ).prop( 'readonly', true );
jQuery( this ).css({'background':'none','border':'none','box-shadow':'none'});
jQuery( this ).attr('tabindex','-1');
jQuery( this ).parents('tr:not(:last-child)').find('.gfield_list_icons').hide();
}
});
});
</script>Wrapping It Up
That should do it. You’re now setup to receive tabular data via your Gravity Form. Questions? Connect with me @uamv or @typewxyz.
