Как добавить маску ввода телефона в Contact Form 7 без плагинов

Если вы используете плагин Contact Form 7 на своём сайте WordPress и хотите, чтобы пользователи вводили номер телефона строго по заданному формату, например: +7 (\_) \_--, то можно легко реализовать это без установки дополнительных плагинов — с помощью популярной JavaScript-библиотеки Inputmask.

🔧 Что такое Inputmask?

Inputmask — это мощная библиотека JavaScript, которая позволяет ограничить формат ввода в поля формы, например: телефон, дату, ИНН, индекс и т.д. В нашем случае она поможет создать маску для поля с телефоном.

Пошаговая инструкция по добавлению маски

Шаг 1. Подключаем Inputmask в functions.php

Откройте файл functions.php вашей активной темы (или дочерней темы) и добавьте следующий код:

function cf7_phone_mask_scripts() {
// Подключаем библиотеку Inputmask с CDN
wp_enqueue_script( 'inputmask', 'https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js', [], null, true );

  // Скрипт для применения маски ко всем полям type="tel"
  wp_add_inline_script( 'inputmask', "
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('input[type=\"tel\"]').forEach(function(input) {
      Inputmask('+7 (999) 999-99-99').mask(input);
    });
  });
" );
}
add_action( 'wp_enqueue_scripts', 'cf7_phone_mask_scripts' );

✅ При необходимости вы можете изменить формат номера. Примеры:

Украина: `+380 (99) 999-99-99`
Беларусь: `+375 (29) 999-99-99`
Международный: `+9{1,3} (999) 999-9999`

Шаг 2. Обновите Contact Form 7

В редакторе вашей формы Contact Form 7 добавьте поле телефона так:

<label> Телефон:
[tel* phone placeholder "+7 (___) ___-__-__"]
</label>

Это обычное поле типа `tel`, но благодаря нашему скрипту к нему применится маска автоматически при загрузке страницы.

✅ Преимущества такого подхода

• Не нужны дополнительные плагины, которые могут замедлить сайт.
• Минимум кода, легко поддерживать и редактировать.
• Гибкая настройка маски — можно задать любую структуру номера.
• Работает во всех современных браузерах.

🧪 Проверка

После добавления кода:

1. Очистите кэш сайта и браузера.
2. Перейдите на страницу с формой.
3. Начните ввод телефона — маска должна примениться автоматически.
4. Проверьте в мобильной версии — также будет работать.

🛠️ Возможные доработки

• Выбор маски в зависимости от страны (по значению выпадающего списка).
• Маска для нескольких полей (телефон, факс и т.д.).

📌 Заключение

Маска телефона — это простой и эффективный способ улучшить юзабилити вашей формы. Благодаря подключению Inputmask напрямую вы получаете надёжную, быструю и расширяемую функциональность без лишнего кода и плагинов. Такой подход особенно важен для сайтов с высокой нагрузкой и требованиями к оптимизации.

Если у вас остались вопросы или нужна адаптация под международный формат — напишите, помогу!