This guide will show you how to add an input mask to a Text element. We’ll use the jQuery Mask Plugin to add a mask for a phone number in the format (000) 000-0000.
Step 1
Add a Text element to the form.
Step 2
Go to Forms → Settings → Custom CSS & JS and enter the following code into the Custom JavaScript field.
1
2
34
5
| jQuery(function ($) { if ($.fn.mask) { $('.quform-field-1_3').mask('(000) 000-0000'); } }); |
jQuery(function ($) {
if ($.fn.mask) {
$('.quform-field-1_3').mask('(000) 000-0000');
}
});- On line 3, replace
1_3with the Text element unique ID
Step 3
Finally we need to load the script for the jQuery Mask Plugin onto the page. Also for users with JavaScript disabled it is possible to enter a value that does not have the format of the mask, to prevent this we can use a custom validator. Add the following code to your theme functions.php file (or create a plugin for it).
1
2
3
4
56
7
8
9
10
11
12
| add_action('wp_enqueue_scripts', function () { wp_enqueue_script('jquery-mask-plugin', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js', array(), '1.14.15', true); }); add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Field $element) { if ( ! preg_match('/^\(\d{3}\) \d{3}\-\d{4}$/', $value)) { $element->addError('Enter a phone number in the format (000) 000-0000'); $valid = false; } return $valid; }, 10, 3); |
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('jquery-mask-plugin', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js', array(), '1.14.15', true);
});
add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Field $element) {
if ( ! preg_match('/^\(\d{3}\) \d{3}\-\d{4}$/', $value)) {
$element->addError('Enter a phone number in the format (000) 000-0000');
$valid = false;
}
return $valid;
}, 10, 3);- On line 5, replace
1_3with the Text element unique ID
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | function my_enqueue_input_mask() { wp_enqueue_script('jquery-mask-plugin', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js', array(), '1.14.15', true); } add_action('wp_enqueue_scripts', 'my_enqueue_input_mask'); function my_input_mask_validator($valid, $value, Quform_Element_Field $element) { if ( ! preg_match('/^\(\d{3}\) \d{3}\-\d{4}$/', $value)) { $element->addError('Enter a phone number in the format (000) 000-0000'); $valid = false; } return $valid; } add_filter('quform_element_valid_1_3', 'my_input_mask_validator', 10, 3); |
function my_enqueue_input_mask()
{
wp_enqueue_script('jquery-mask-plugin', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js', array(), '1.14.15', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_input_mask');
function my_input_mask_validator($valid, $value, Quform_Element_Field $element)
{
if ( ! preg_match('/^\(\d{3}\) \d{3}\-\d{4}$/', $value)) {
$element->addError('Enter a phone number in the format (000) 000-0000');
$valid = false;
}
return $valid;
}
add_filter('quform_element_valid_1_3', 'my_input_mask_validator', 10, 3);- On line 16, replace
1_3with the Text element unique ID