phone mask in CF7 popup window

Hello,
Firstly, congratulations on the plugin ??

I was opening a ticket about this but I believe we are using the same popup plugin (https://br.www.ads-software.com/plugins/wpb-popup-for-contact-form-7/)

On a page that already displays the form (without a popup) in its body, the plugin works correctly (phone field):
https://quimatic.greeky.co/teste-formulario-trabalhe-conosco/

However, on a page where the form only appears when we click to open the popup (“where to buy” button), the mask does not work (phone field):
https://quimatic.greeky.co/produto/aquatic-fluido-de-corte-a-base-dagua/

Any solution to help us?

Hi @mirazhyk,

Modify the existing code as indicated below.

<?php
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__) ___-__-__"
                });
            }
            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', '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);

Hello!
I try to use more popular plugin – Popup maker
But mask in form in popup window doesn’t work, although everything is fine in static forms

Code in functions.php is now

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__) ___-__-__"
                });
            }
            if ( typeof wpbean_fopo_form_popup !== "function" ) {
                function wpbean_fopo_form_popup() {
                    mff_mask_custom_script();
                }
            }
            jQuery(document).ready(function () {
                mff_mask_custom_script();
            });
        }
    </script>
    <?php
}

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

https://prnt.sc/c5jvMbsKclCp form in header https://prnt.sc/p0SxGZe-AdSR

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

@ivanpetermann thank You very much – it works)))
lovely support)))