Как добавить маску для поля с номером телефона на любом сайте WordPress

Одна из частых задач по добавлению маски номера телефона для формы обратной связи. Это позволяет посетителям вашего сайта не ошибиться в наборе номера, а вам не потерять клиента и не спустить бюджет рекламной кампании в трубу.

В этом поможет сниппет, который необходимо разместить в funktion.php вашей темы или в плагине Code Snippets (что предпочтительнее).

Вместо id поля et_pb_contact_phone вам необходимо подставить id вашего поля.

// Подключаем jQuery Mask Plugin
function enqueue_phone_mask_script() {
    wp_enqueue_script('jquery-mask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_phone_mask_script');

// Инициализация маски для конкретного телефонного поля
function initialize_phone_mask() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Выбираем конкретное поле по точному ID
            var $input = $('#et_pb_contact_phone');
            
            if ($input.length) {
                // Устанавливаем начальное значение +7 если поле пустое
                if ($input.val() === '') {
                    $input.val('+7');
                }

                // Инициализация маски
                $input.mask('+7 (000) 000-00-00', {
                    autoclear: false,
                    placeholder: '+7 (___) ___-__-__',
                    translation: {
                        '0': { pattern: /\d/ }
                    },
                    onChange: function(value) {
                        // Защита от удаления +7
                        if (!value.startsWith('+7')) {
                            $input.val('+7');
                        }
                    }
                });

                // Блокировка бэкспейса на первых символах
                $input.on('keydown', function(e) {
                    if ((e.keyCode === 8 || e.keyCode === 46) && $input.val().length <= 2) {
                        e.preventDefault();
                    }
                });
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_phone_mask');

Как добавить маску для множества полей одновременно

В том случае если у вас на странице множество форм и они отличаются id с добавлением уникальной цифры или буквы, например, такие элементы:

• et_pb_contact_phone_1
• et_pb_contact_phone_2
• et_pb_contact_phone_abc
• и т. д.

то можно воспользоваться следующим сниппетом, где мы прописываем только постоянный ID: «et_pb_contact_phone_», а оставшаяся часть может быть любой.

// Подключаем jQuery Mask Plugin
function enqueue_phone_mask_script() {
    wp_enqueue_script('jquery-mask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_phone_mask_script');

// Инициализация маски для телефонных полей
function initialize_phone_masks() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Выбираем все поля с id начинающимся на et_pb_contact_phone_
            $('input[id^="et_pb_contact_phone_"]').each(function() {
                var $input = $(this);
                
                // Устанавливаем начальное значение +7 если поле пустое
                if ($input.val() === '') {
                    $input.val('+7');
                }

                // Инициализация маски
                $input.mask('+7 (000) 000-00-00', {
                    autoclear: false,
                    placeholder: '+7 (___) ___-__-__',
                    translation: {
                        '0': { pattern: /\d/ }
                    },
                    onChange: function(value) {
                        // Защита от удаления +7
                        if (!value.startsWith('+7')) {
                            $input.val('+7');
                        }
                    }
                });

                // Блокировка бэкспейса на первых символах
                $input.on('keydown', function(e) {
                    if ((e.keyCode === 8 || e.keyCode === 46) && $input.val().length <= 2) {
                        e.preventDefault();
                    }
                });
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_phone_masks');