Из коробки Contact Form 7 нет какой-либо встроенной функции проверки валидации поля телефонного номера, хотя поле с указанием телефона очень часто встречается в контактных формах типа «Заказать обратный звонок».

Идеальным решением было бы использование маски ввода, например, +7 (___) ___-__-__ и человек ничего не напутает, скрипт не пропустит неправильный ввод номера телефона!

Воспользуемся готовым JS скриптом Masked Input Plugin.

1.В конструкторе контактных форм Contact Form 7 создаем текстовое поле.

[text* telefon class:telefon placeholder "+7 (___) ___-__-__"]

Нужно отметить, что класс, маска и другие параметры добавляются после идентификатора поля, в противном случае ничего не отработает.

2. Скачиваем js скрипт тут jquery.maskedinput.min.js (подключаем в шаблон своего сайта как обычный js файл). Например:

<script type='text/javascript' src='https://ваш_сайт.ru/js/jquery.maskedinput.min.js'></script>

3. В файле functions.php своей темы добавляем следующий код:

add_action('wp_footer', 'wpmidia_activate_masked_input');
function wpmidia_activate_masked_input()

4. В файле footer.php своей темы добавляем следующий код:

<script type="text/javascript">
jQuery( function($){
     $(".tel").mask("+7 (999) 999-9999");
  });
</script>

Теперь появилось поле с вводом телефона по маске +7 (___) ___-__-__

Поле требует ввода только цифр, при не полном заполнении попросит его заполнить, и не даст прилететь спаму.

Количество просмотров: 287