В этой статье мы рассмотрим, как в плагине Contact Form 7 реализовать автозаполнение поля телефона с маской ввода, что значительно улучшит удобство заполнения формы для пользователей и повысит качество вводимых данных. Маска телефона позволяет ограничить ввод только допустимыми символами и форматировать номер согласно нужному шаблону.
Почему важно использовать маску ввода для телефонных полей
Телефонные номера — одни из самых часто используемых контактных данных в формах обратной связи. Без маски пользователь может вводить номер в любом формате, что усложняет последующую обработку данных и повышает риск ошибок при наборе. Маска ввода:
- ограничивает ввод только цифрами и необходимыми символами (например, +, -, пробел);
- форматирует номер по заданному шаблону, например +7 (999) 999-99-99;
- делает форму удобнее и понятнее для пользователя;
- позволяет избежать ошибок на этапе ввода.
Contact Form 7 не имеет встроенной поддержки масок ввода, но мы можем расширить его функциональность с помощью JavaScript и сторонних библиотек.
Использование плагина Inputmask для маски телефона в Contact Form 7
Один из популярных способов — подключить библиотеку Inputmask, которая позволяет легко создавать маски для полей ввода.
Для начала загрузим библиотеку Inputmask и добавим ее на сайт. Например, в functions.php вашей темы добавьте следующий код для подключения скрипта:
function contactform7ru_enqueue_inputmask() {
if (is_page()) { // можно добавить условие для страниц с формой
wp_enqueue_script('inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.8/inputmask.min.js', array('jquery'), '5.0.8', true);
wp_enqueue_script('contactform7ru-phone-mask', get_stylesheet_directory_uri() . '/js/contactform7ru-phone-mask.js', array('inputmask'), '1.0', true);
}
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_inputmask');Далее создайте файл contactform7ru-phone-mask.js в папке js вашей темы со следующим содержимым:
document.addEventListener('DOMContentLoaded', function () {
var phoneInputs = document.querySelectorAll('input.wpcf7-tel');
phoneInputs.forEach(function(input) {
var im = new Inputmask('+7 (999) 999-99-99');
im.mask(input);
});
});В этом коде мы находим все поля с классом wpcf7-tel — это стандартный класс Contact Form 7 для телефонных полей — и применяем маску ввода российского телефонного формата.
Как создать телефонное поле с классом для маски в Contact Form 7
В админке WordPress перейдите к редактированию вашей формы Contact Form 7 и добавьте поле телефона так:
[tel* your-phone class:wpcf7-tel]Обратите внимание, что мы добавили класс wpcf7-tel, чтобы наш JavaScript смог найти это поле и применить к нему маску.
Автозаполнение телефона из локального хранилища браузера
Часто пользователи возвращаются на сайт и повторно заполняют форму. Чтобы сделать процесс еще удобнее, можно реализовать автозаполнение поля телефона из LocalStorage браузера, если пользователь ранее вводил номер.
Добавьте в contactform7ru-phone-mask.js следующий код:
document.addEventListener('DOMContentLoaded', function () {
var phoneInputs = document.querySelectorAll('input.wpcf7-tel');
phoneInputs.forEach(function(input) {
var im = new Inputmask('+7 (999) 999-99-99');
im.mask(input);
// Загрузка номера из localStorage
var savedPhone = localStorage.getItem('contactform7ru_phone');
if (savedPhone) {
input.value = savedPhone;
}
// Сохранение номера при изменении
input.addEventListener('input', function() {
localStorage.setItem('contactform7ru_phone', input.value);
});
});
});Теперь при вводе номера телефона он будет сохраняться в локальном хранилище и автоматически подставляться при повторном посещении страницы с формой.
Валидация номера телефона на стороне сервера Contact Form 7 (PHP)
Маска ввода облегчает ввод, но не гарантирует правильность номера. Чтобы дополнительно проверить номер на сервере, можно добавить кастомную валидацию в Contact Form 7.
Добавьте в functions.php следующий код:
add_filter('wpcf7_validate_tel*', 'contactform7ru_validate_phone', 20, 2);
function contactform7ru_validate_phone($result, $tag) {
$name = $tag->name;
$value = isset($_POST[$name]) ? trim($_POST[$name]) : '';
// Проверяем формат +7 (999) 999-99-99
if (!preg_match('/^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/', $value)) {
$result->invalidate($tag, 'Пожалуйста, введите номер телефона в формате +7 (999) 999-99-99');
}
return $result;
}Этот фильтр проверит, что номер телефона соответствует маске и, если нет, выдаст ошибку, не позволяя отправить форму.
Дополнительные рекомендации и плагины для работы с телефонами в Contact Form 7
Кроме Inputmask, есть и другие решения для масок и автозаполнения:
- jQuery Mask Plugin — также популярная библиотека, может использоваться аналогично;
- Плагин Contact Form 7 Input Mask — расширение для Contact Form 7, добавляет поддержку масок без дополнительного кода;
- Для интеграции с CRM или сервисами рассылок полезны автозаполнение и проверка номеров через API, например, через сервисы проверки телефонов.
Если используете тему Reboot от WPSHOP, там есть встроенные оптимизации для форм, которые можно дополнить описанным решением.
Итоги и практическое применение
Использование маски ввода телефона в Contact Form 7 повышает качество данных и удобство пользователей. Добавление автозаполнения из локального хранилища позволяет ускорить повторные заполнения формы. Серверная валидация гарантирует корректность номера.
Данный подход с подключением Inputmask и кастомной валидацией легко адаптируется под любые форматы телефонов и расширяется для других полей с масками. Это современное и эффективное решение для развития вашего сайта на WordPress с Contact Form 7.