Masks Form Fields - WordPress Plugin

.Masks Form Fields

Masks Form Fields - WordPress Plugin
Link: https://wordpress.org/plugins/masks-form-fields/

Custom script to add BR phone mask in the field with Contact Form 7 in Popup Elementor and initialize the form correctly.

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add BR phone mask in the field with Contact Form 7 in Popup Elementor and initialize the form correctly.
 * Add an HTML code widget below the form inside the Popup with the code below and change the FORM-ID with the ID of the form in the popup.
-->
<script type="text/javascript">
    var wpcf7_popup_load = false;
    jQuery(document).on('elementor/popup/show', () => {
        if (!wpcf7_popup_load) {
            document.querySelectorAll("form#FORM-ID").forEach((
                function(e) {
                    wpcf7_popup_load = true;
                    return wpcf7.init(e)
                }
            ));
            var PhoneMaskBehavior = function(val) {
                return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
            },
            nonoOptions = {
                onKeyPress: function(val, e, field, options) {
                    field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options);
                }
            };
            jQuery('input.phone').mff_mask(PhoneMaskBehavior, nonoOptions);
        }
    });
</script>

Custom script to add Brazilian phone mask in phone field

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Custom script to add Brazilian phone mask in phone field.
-->
<script type="text/javascript">
jQuery(document).ready(function () {
    if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
        var PhoneMaskBehavior = function(val) {
            return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
        },
        nonoOptions = {
            onKeyPress: function(val, e, field, options) {
                field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options);
            }
        };
        jQuery('input[name="form_fields[phone]"]').mff_mask(PhoneMaskBehavior, nonoOptions);
    }
});
</script>

Custom script to apply a Ukrainian phone mask to the phone field

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Custom script to apply a Ukrainian phone mask to the phone field.
-->
<script type="text/javascript">
jQuery(document).ready(function($){
    // To apply the custom mask, add the class 'phone_custom' to the desired input field in your form
    // Apply the mask '+38(0__) ___-__-__' for the custom phone number format
    // Added 'X' for fixed '0' in the formatting using translation
    // The {placeholder: '+38(0__) ___-__-__'} defines the guide text for the mask
    jQuery('input.phone_custom').mff_mask('+38(X00) 000-00-00', {
        translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
        placeholder: "+38(0__) ___-__-__"
    });
});
</script>

Default translation

'0': {pattern: /\d/}, // (Numbers)
'9': {pattern: /\d/, optional: true}, // (Optional Numbers)
'#': {pattern: /\d/, recursive: true}, // (Recursive Numbers)
'A': {pattern: /[a-zA-Z0-9]/}, // (Alphanumeric, Letters and Numbers)
'S': {pattern: /[a-zA-Z]/} // (Letters only)

Function to activate the mask plugin in the admin area.

/**
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Code to activate the mask plugin in the admin area.
 * Add the code below in the theme functions file. /wp-content/themes/YOUR-THEME/functions.php
 */

if (function_exists('mff_do_enqueue_scripts') and is_admin()) {
    add_action('admin_enqueue_scripts', 'mff_do_enqueue_scripts');
}

Function to add custom mask

/**
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Function to add custom mask. /wp-content/themes/YOUR-THEME/functions.php
 * Documentation, Demos & Usage Examples - jQuery Mask Plugin v1.14.16 - https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
 */
function custom_masks_form_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $("input[name='input_name']").mff_mask('(000) 000-0000');
            // $("input.class_name").mff_mask('custom-mask');
        });
    </script>
    <?php
}

add_action('wp_footer', 'custom_masks_form_fields', 111);

Phone mask script for Contact Form 7 in Popup Elementor.

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add phone mask in field with Contact Form 7 in Popup Elementor.
-->
<script type="text/javascript">
jQuery(document).on('elementor/popup/show', function () {
    jQuery('input[type="tel"]').mff_mask('(000)000-0000');
});
</script>

Reload the Masks Form Fields script by clicking the button.

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Reload the Masks Form Fields script by clicking the button.
-->
<script>
jQuery(document).ready(function ($) {
    $('#BUTTON_ID').on('click', function () {
        var mff_id = 'masks-form-fields-js';
        var mff_src = '/wp-content/plugins/masks-form-fields/includes/js/scripts.js';
        if ( $('#'+mff_id).length > 0 ) {
            var mff_src = $('#'+mff_id).attr('src');
            $('script#' + mff_id).remove();
        }
        $('<script>').attr('src', mff_src).attr('id', mff_id).appendTo('head');
    });
});
</script>

Script for Custom Mask in US Phone Number Format with Placeholder.

/**
 * Title: Script for Custom Mask in US Phone Number Format with Placeholder.
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Function to add custom mask. /wp-content/themes/YOUR-THEME/functions.php
 */
function custom_masks_form_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            // To apply the custom mask, add the class 'phone_us_custom' to the desired input field in your form
            // Apply the mask '(000) 000-0000' for the US phone number format
            // The {placeholder: '(___) ___-____'} defines the guide text for the mask
            // The {clearIfNotMatch: true} allows clearing the field if the input doesn't match the mask
            jQuery('input.phone_us_custom').mff_mask('(000) 000-0000', {placeholder: '(___) ___-____', clearIfNotMatch: true});
        });
    </script>
    <?php
}

add_action('wp_footer', 'custom_masks_form_fields', 111);

Script to add an invalid class

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Custom script to add an invalid class when entering an invalid digit.
-->
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("input[name='INPUT_NAME']").mff_mask("(000) 000-0000", {
            reverse: false,
            onComplete: function(val) {
                $("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME');
            },
            onChange: function(val) {
                $("input[name='INPUT_NAME']").removeClass('INVALID_CLASS_NAME');
            },
            onInvalid: function(val, e, f, invalid, options) {
                $("input[name='INPUT_NAME']").addClass('INVALID_CLASS_NAME');
            }
        });
    });
</script>

Script to add mask in input phone the Divi Theme.

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add mask in input phone the Divi Theme.
 * Go to Divi Theme Options -> Integration set "Enable header code" and add below code in "Add code to the < head > of your blog".
-->
<script type="text/javascript">
jQuery(document).ready(function($){
  $("input[name='PHONE-INPUT-NAME']").addClass("phone_us");
});
</script>

Script to add mask in input phone the WooCommerce - JavaScript or PHP

/**
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add mask in input phone the WooCommerce.
*/
jQuery(document).ready(function($){
  $("input[name='billing_phone']").mff_mask("(000) 000-0000");
});


/**
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * PHP - Custom script to add mask in input phone the WooCommerce. /wp-content/themes/YOUR-THEME/functions.php
*/
add_action('wp_footer', function () {echo "<script type=\"text/javascript\">jQuery(document).ready(function($){ $(\"input[name='billing_phone']\").mff_mask('(000) 000-0000'); });</script>";}, 111);

Script to add Russian phone mask

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * Custom script to add Russian phone mask in phone field.
-->
<script type="text/javascript">
jQuery(document).ready(function($){
  $("input[name='PHONE-INPUT-NAME']").mff_mask("(000) 000-00-00");
});
</script>