Petermann

Hi @mirazhyk,

Try using this code, but remember to apply the tel-new class to the phone field.

function talisman_custom_masks_form_fields() {
    ?>
    <script type="text/javascript">
        if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
            function mff_mask_custom_script() {
                jQuery('input.tel-new').mff_mask('+38(X00) 000-00-00', {
                    translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
                    placeholder: "+38(0__) ___-__-__"
                });
            }
            jQuery(document).ready(function ($) {
                mff_mask_custom_script();
                $(document).on('pumAfterOpen', function () {
                    mff_mask_custom_script();
                });
            });
        }
    </script>
    <?php
}

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

Hi @marcosalexandre,

Change the CEP field from ‘numeric’ to ‘text’ and add the code below to the /wp-content/themes/YOUR-THEME/functions.php file to see if it resolves the issue for you.

<?php
function my_custom_masks_form_fields() {
    ?>
    <script type="text/javascript">
        if (typeof jQuery !== 'undefined' && typeof jQuery.fn.mff_mask === 'function') {
            function mff_mask_custom_script() {
                jQuery('input[name="cep"]').mff_mask('00000-000');
                jQuery('input[name="ddi-geral"]').mff_mask('009');
                jQuery('input[name="ddd"]').mff_mask('00');
                var PhoneMaskBehavior = function(val) {
                    return val.replace(/\D/g, '').length === 9 ? '00000-0000' : '0000-00009';
                },
                nonoOptions = {
                    onKeyPress: function(val, e, field, options) {
                        field.mff_mask(PhoneMaskBehavior.apply({}, arguments), options);
                    }
                };
                jQuery('input[name="telefone"]').mff_mask(PhoneMaskBehavior, nonoOptions);

            }
            if ( typeof wpb_pcf_on_cf7_form_init !== "function" ) {
                function wpb_pcf_on_cf7_form_init() {
                    mff_mask_custom_script();
                }
            }
            jQuery(document).ready(function () {
                mff_mask_custom_script();
            });
        }
    </script>
    <?php
}

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

Hi @franck-awo,

Try this.

<?php
function custom_masks_form_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $("input[type='tel']").mff_mask('00 00 00 00 00').on('change', function () {
                var currentValue = $(this).val();
                if (currentValue !== undefined && currentValue !== null && currentValue != '') {
                    $(this).val('+33 ' + currentValue);
                }
            });
        });
    </script>
    <?php
}

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

Hi @mirazhyk

Try using the code below.

jQuery('input.tel-new').mff_mask('+38(X00) 000-00-00', {
    translation: { 'X': { pattern: /[0]/, optional: false, fallback: '0'}},
    placeholder: "+38(0__) ___-__-__"
});

Hi @daprop,

You can try using the following script to implement a custom mask.

<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>

Click here for more details on how to add custom mask.

Should you need any further information, please do not hesitate to contact me. Thank you very much for your contact.

Hi @it-hertz,

You can try using the following script to implement a custom mask in the US phone number format with the use of a placeholder.

<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>

Click here for more details on how to add custom mask.

Should you need any further information, please do not hesitate to contact me. Thanks for your suggestions!