Force Numeric Keyboard for Number Fields on Mobile

Experimental Snippet 🧪

This snippet forces the numeric keyboard for Number fields on mobile devices by updating the “type” attribute of the input to “tel” instead of “number”. If you find there are any drawbacks to this approach, let us know!

Known Limitations

  1. This will not work if you’re collecting decimal numbers as mobile numeric keyboards do not support decimals or commas.

Code

Filename: gw-force-numeric-keyboard-on-mobile.php

<?php
/**
 * Gravity Wiz // Gravity Forms // Force Numeric Keyboard for Number Fields on Mobile
 * https://gravitywiz.com/
 *
 * Experimental Snippet 🧪
 *
 * This snippet forces the numeric keyboard for Number fields on mobile devices by updating the "type" attribute of the
 * input to "tel" instead of "number". If you find there are any drawbacks to this approach, let us know!
 *
 * Known Limitations
 *
 * 1. This will not work if you're collecting decimal numbers as mobile numeric keyboards do not support decimals or commas.
 */
add_filter( 'gform_field_content', function( $content, $field ) {
	if ( $field->get_input_type() === 'number' ) {
		$content = preg_replace( '/type=\'(number|text)\'/', 'type=\'tel\'', $content );
	}
	return $content;
}, 10, 2 );

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.