Masked input field

Phone number input mask

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_3 with 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_3 with 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_3 with the Text element unique ID
Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy