add an input mask to an input in a Gravity Forms list field column

ListFieldMaskedInput

// enable input mask for form #95 list field #3 columns 1 and 3
add_filter('gform_register_init_scripts_95', 'enable_list_input_mask');
function enable_list_input_mask($form) {
    $field_id = "3"; //set field id here
    $col_id = array('1','3'); //set column id here
    $mask = "9999"; //define mask here, examples at http://www.gravityhelp.com/documentation/page/Input_Mask
    //that's it nothing more to configure 

    $c_sel = array();
    foreach($col_id as $c) {
        $c_sel[] = ".gfield_list_{$field_id}_cell{$c} input";
    }
    $c_sels = json_encode($c_sel);
    $im_script = "jQuery(sel.join()).mask('{$mask}');";
    $script = "var sel = {$c_sels}; {$im_script} jQuery('#field_{$form["id"]}_{$field_id}').on('click', '.add_list_item', function(){{$im_script}});";
    GFFormDisplay::add_init_script($form['id'], 'list_input_mask', GFFormDisplay::ON_PAGE_RENDER, $script);
    return $form;
}
add_action( 'gform_enqueue_scripts_95', 'list_masked_input_script', 10, 2 );
function list_masked_input_script( $form ) {
    wp_enqueue_script( 'gform_masked_input', array( 'jquery' ), false, true );
}

Hi Richard,

This code works like a charm for a single list field on a form. Could you possibly tell me how to modify it so that it would work with multiple different list fields on the same form. Each of the different list fields needs a mask set on one or more columns.

Thanks.

@PAALS you can replicate the code to use with a different list field.

See below the code we wrote to create different masks in the same list field.

// Gravity Forms- Enable input mask for specific columns in list field- form id=1, field id=31 columns= 4,5,6,7 & 8
add_filter('gform_register_init_scripts_1', 'enable_list_input_mask');

function enable_list_input_mask($form) {
    $field_id = "31"; //set field id here
    $col_id = array('4','5','6','7','8'); //set column id here
    $mask = array ( '99/99/9999', '?99', '?999', '?999', '999-99-9999' ); //define masks here, examples at http://www.gravityhelp.com/documentation/page/Input_Mask    

    $array1 = [];

    foreach($col_id as $key => $column) 
    {
        $array1[] = "jQuery('.gfield_list_{$field_id}_cell{$column} input').mask('". $mask [$key]."')"; 
    }

    $javascript =  implode ( ";\n", $array1 );
    $script = $javascript.  ";\njQuery('#field_{$form["id"]}_{$field_id}').on('click', '.add_list_item', function(){{\n$javascript}});";

    GFFormDisplay::add_init_script($form['id'], 'list_input_mask', GFFormDisplay::ON_PAGE_RENDER, $script);
    return $form;
}

add_action( 'gform_enqueue_scripts_1', 'list_masked_input_script', 10, 2 );
function list_masked_input_script( $form ) {
    wp_enqueue_script( 'gform_masked_input', array( 'jquery' ), false, true );
}

@majeem thanks for the helpful code. I'm struggling to modify the code to handle two different lists in the same form. Say I have List Field 5 and List Field 6, each with a field which needs a mask. List Field 5 and 6 are in the same form. Do you have suggestions on how to modify the code for that circumstance?

@richardW8k I'm trying to modify your code to handle input masks on two list fields in the same form. Here's my modification. Unfortunately it's only applying the first input mask. Do you have suggestions on how to modify it? Thanks in advance for your help.

// enable input mask for form 2 list field #5 column 4, and form 2 list field #67 column #5
add_filter('gform_register_init_scripts_2', 'enable_list_input_mask_2_5');
function enable_list_input_mask_2_5($form) {
    $field_id = "5"; //set field id here
    $col_id = array('4'); //set column id here
    $mask = "(999) 999-9999"; //define mask here, examples at http://www.gravityhelp.com/documentation/page/Input_Mask
    //that's it nothing more to configure 

    $c_sel = array();
    foreach($col_id as $c) {
        $c_sel[] = ".gfield_list_{$field_id}_cell{$c} input";
    }
    $c_sels = json_encode($c_sel);
    $im_script = "jQuery(sel.join()).mask('{$mask}');";
    $script = "var sel = {$c_sels}; {$im_script} jQuery('#field_{$form["id"]}_{$field_id}').on('click', '.add_list_item', function(){{$im_script}});";
    GFFormDisplay::add_init_script($form['id'], 'list_input_mask', GFFormDisplay::ON_PAGE_RENDER, $script);
    return $form;
}
add_filter('gform_register_init_scripts_2', 'enable_list_input_mask_2_67');
function enable_list_input_mask_2_67($form) {
    $field_id = "67"; //set field id here
    $col_id = array('5'); //set column id here
    $mask = "(999) 999-9999"; //define mask here, examples at http://www.gravityhelp.com/documentation/page/Input_Mask
    //that's it nothing more to configure 

    $c_sel = array();
    foreach($col_id as $c) {
        $c_sel[] = ".gfield_list_{$field_id}_cell{$c} input";
    }
    $c_sels = json_encode($c_sel);
    $im_script = "jQuery(sel.join()).mask('{$mask}');";
    $script = "var sel = {$c_sels}; {$im_script} jQuery('#field_{$form["id"]}_{$field_id}').on('click', '.add_list_item', function(){{$im_script}});";
    GFFormDisplay::add_init_script($form['id'], 'list_input_mask', GFFormDisplay::ON_PAGE_RENDER, $script);
    return $form;
}
add_action( 'gform_enqueue_scripts_2', 'list_masked_input_script', 10, 2 );
function list_masked_input_script( $form ) {
    wp_enqueue_script( 'gform_masked_input', array( 'jquery' ), false, true );
}

Thanks for this snippet - exactly what I needed!

Can anyone please tell me how I can get gravity form col id?

Thanks for this!

Hi,

I was wondering if you could post the code to add input mask to a particular field.

I am using the address field and want to add a mask to the zip/postal code field but there is no option there.

I have used this but doesn't seem to work. From the GF website

add_filter( 'gform_input_masks', 'add_mask' );
function add_mask( $masks ) {
$masks['Address Postal Code'] = 'A9A 9A9';
return $masks;
}

Any help would be appreciated.
Thanks.

Hello, I'm in the same boat as @ByteOutfitters. I have two list item fields and tried the same solution he did by separating out the two filters, but the input mask only applies to the first filter. Was there ever a solution for this?

Thanks!