Set custom inputmode for Fluent Form number field

tdrayson

When using the Fluent Form number field on iOS, it shows the numeric keypad, however if you have decimals enabled as an option, then there’s no way to use the decimal point on iOS. This is where the inputmode property comes in. If we change the inputmode to decimal then the keypad on iOS will render with a decimal point.

We can change the inputmode easily with a little PHP snippet.

The snippet

Add the code below to functions.php or code snippet plugin.

You can set the specific forms and fields you want to target with the variables target_form and target_field.

PHP

        function tct_number_inputmode($inputMode, $data, $form){
	$target_forms = array(1, 5);
	$target_fields = array('numeric_field', 'another_field');
	
	$is_forms = in_array($form->id, $target_forms);
	$is_fields = in_array($data['attributes']['name'], $target_fields);
	
	if( !$is_forms || !$is_fields ){
		return $inputMode;
	}
	
	return 'decimal';
}
add_filter('fluentform/number_input_mode', 'tct_number_inputmode', 10, 3);
      
Copy

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise