Маска ввода телефона для плагина Contact Form 7
Пользуюсь давно прекрасным плагином контактной формы для Wordpress “Contact Form 7″. Недавно задался целью сделать удобный ввод телефона по маске типа +38 (___) ___-__-__ . Нашел дополнительный плагин именно под Contact Form 7 (оказывается таких вспомогательных плагинов для расширения функционала CF7 много) с названием Contact Form 7 Phone Module, НО! Есть несколько причин, почему я не стал его использовать:
- Плагин оказался не рабочим (хотя мне удалось его заставить работать) это уже было не приятно.
- Сам факт установки еще одного плагина меня не радовал.
- И главное – не было возможности задать placeholder. То есть само поле выглядело пустым, а маска появлялась только при нажатии курсора в него. По скольку я не любитель описывать поле сверху или снизу, мне этот метод не подошел.
И я нашел простой способ сделать маску через маленький настраиваемый скрипт.
Маска ввода для поля в Contact Form7 через скрипт
- Качаем сам скрипт отсюда, выбрав версию Minified.
- Скорее всего откроется код скрипта в отдельном окне браузера, поэтому просто копируем код, создаем новый файл с названием jquery.maskedinput.min.js и вставляем его туда. Или можно скачать готовый скрипт здесь.
- Сохраняем в директорию своей темы с названием js (если есть). Если нету создаем или добавляем куда надо, но тогда нужно будет в коде ниже изменить путь к исполняемому файлу.
- Далее в файле function.php своей темы создать функцию с помощью такого кода
1234add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');function wpmidia_enqueue_masked_input(){wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery'));} - В том же файле function.php активируем функцию
12345678910111213add_action('wp_footer', 'wpmidia_activate_masked_input');function wpmidia_activate_masked_input(){?><script type="text/javascript">jQuery( function($){$(".data").mask("99/99/9999");$(".tel").mask("(99) 9999-9999");$(".cpf").mask("999.999.999-99");$(".cnpj").mask("99.999.999/9999-99");});</script><?php} - Здесь мы изменяем маску как нам надо или добавляем свои.
- Теперь в настройках своей формы contactform7 в соответствующее поле (например телефон) добавляем соответствующий класс.
- Добавляем такой же placeholder и получаем маску для телефона.
Маска только на определенных страницах
Если нужно чтоб маска срабатывала только на определенной странице, например в контактах, то добавляем условие через функцию is_page ().
- Для погрузки файла скрипта (изменяем код пункт 4)
1234567add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');function wpmidia_enqueue_masked_input(){if( is_page('contato') ) //vai carregar somente na pagina Contato.wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery'));}
- Для вызова функции (изменяем код пункта 5)
12345678910111213141516171819202122add_action('wp_footer', 'wpmidia_activate_masked_input');function wpmidia_activate_masked_input(){if( is_page('contato') ){ //mais uma vez, feito isso, o script abaixo só aparecerá na página Contato.?><script type="text/javascript">jQuery( function($){$(".data").mask("99/99/9999");$(".tel").mask("(99) 9999-9999");$(".cpf").mask("999.999.999-99");$(".cnpj").mask("99.999.999/9999-99");});</script><?php}}
Собственно все. Будут вопросы, пишите в комментариях
Интересное наблюдение. Да решение рабочее, но когда оно на отдельной странице.
Форму связи я делал через popup окно. В нем же есть поле телефона, но маска не работает. В то же время на отдельной странице маска работает.
Что не понравилось: для того, чтобы заполнить номер телефона правильно, необходимо попасть курсором на первый символ после префикса (например +7) если кликнуть в произвольное место на поле ввода телефона, то заполняется оно с того самого места (например +7___96122)
На мой взгляд решение так себе, больше похоже на какой -то костыль, который к тому же будет бесить клиента …
Дима, Вам просто не удалось корректно настроить скрипт. В окнах pop-up работает отлично, курсор тоже становится в правильное положение при любом клике. Проверьте конфликты скриптов. Вот скринкаст с окна формы на pop-up.
Все отлично работает, спасибо большое!
при использовании Contact Form 7 не обязательно прописывать дополнительный класс в самой форме, можно просто в functions.php маске указать $(“.wpcf7-tel”).mask(“+7(999)999-99-99″); например
Просто сейчас как раз искал решение для CF7 и наткнулся на вашу статью.
Возможно, но я не проверял. Давно уже все это делал
Виталий, не подскажешь как зацепить эту маску в поле ввода телефона на странице checkout? Никак не могу сообразить где подключить. Был бы очень признателен а-то напрягает что пользователи как попало свои телефоны вводят.
Это инструкция для плагина ContactForm7 (wordpress). Для других случаев, используйте чистый скрипт maskedinput. Ссылка есть в статье, на том же сайте можно увидеть логику подключения
Все оказалось в миллион раз проще!!!!!!! Нужно просто добавить к маскам вот такой тип:
$(“#billing_phone”).mask(“+7 (999) 999-99-99″);
И все))) Не нужно больше ничего менять и качать полную версию файла тоже не обязательно.
Добавьте это к статье, полезно для всех!
Теперь маска работает и ContactForm7 и в форме заказа
Я не использую этот плагин для подобных страниц и форм, поэтому не могу проверить вашу инструкцию, соответственно в статью не добавлю пока. Но пусть будет в комментариях, может кому понадобиться.
Спасибо! Очень полезно! Себе сделал по вашей инструкции, все летает. Раньше плагином пользовался, пока он не перестал работать.
Рад что все вышло! Поэтому я и не очень люблю плагины.
Маска работает идеально за исключением одного но.
Подскажите, пожалуйста, что может мешать данному коду “placholder”+7(___) ___-__-__” при отображении на сайте?
При обновлении страницы он на несколько секунд погружается, а затем исчезает.
Так просто не смогу сказать, нужно смотреть детальнее. Также в Вашем комментарии указана лишняя кавычка перед placeholder. В кавычки нужно оборачивать только значение placeholder, но не сам параметр. Проверьте у себя на сайте, может это и есть причина!
Спасибо тебе огромное! Редко встретишь на просторах интернета грамотных людей которые умеют так легко и быстро все объяснить. Затратил 3 минуты, 2 из которых ушло на чтение данного опуса. Все быстро и качественно, спасибо.
Спасибо за приятный отзыв! Рад что все вышло и моя статья помогла Вам )
Маска заработала с первого раза. Спасибо. Подскажите пожалуйста как добавлять к заполняемому номеру телефона, +7?
Здравствуйте, просто добавьте к коду скрипта в function.php +7 перед девятками, например $(“.tel”).mask(“+7(999) 999-99-99″); Место для ввода цифр срабатывает только на девятки
Здравствуйте, хотел бы уточнить, данный способ маски ввода еще актуален? Несколько раз пытался все повторить, делал все точно как в примере, но результата нет.., В поле телефона во время ввода поле очищается и все.
Какая версия Contact Form 7? Возможно не верно подключен скрипт и он конфликтует с другими. Вариантов много. Покажите ссылку на форму
Если используется дочерняя тема, то в первом пункте при загрузке скрипта вместо переменной “get_template_directory_uri()” нужно использовать get_stylesheet_directory_uri(), иначе скрипт пытается запустится из родительской темы.
В случае использования дочерней темы нужно править functions.php именно дочерней темы?
Можно или в дочернюю или в родительскую, но считается правильней в дочернюю.
Заметил странное поведение на мобильнике.
Когда вводишь номер по маске $(“.tel”).mask(“(99) 9999-9999″); при вводе 4 знака (первого после правой скобки), знак вводится, но курсор остаётся слева и так после каждого разделителя.
Попробуйте не устанавливать minlength или maxlength параметры
Большое человеческое спасибо! С вашими инструкциями с первого раза осилил!
Рад что у Вас все получилось!
Супер!! Всё работает
Большое спасибо! все работает!
Когда вставляю код из шага 5 перестает всплывать форма связи, реализованная через Easy FancyBox. Подскажите, в чем может быть причина?
upd. Попробовал на отдельной странице обычную форму создать, там маска не работает. В файл function.php код в любое место вставлять можно?
Не совсем понятно зачем вы контактную форму реализовали через FancyBox ? Если вам нужен поп-ап (модальное окно), то лучше использовать Easy Modal.
Иначе, попробуйте выводить скрипт в саму верстку (например в футере) а не в файле функции. Но, рекомендую просто подключить правильно форму.
А если у поля уже прописан класс
Добавьте рядом еще один. Например, class: myclass tel
Не верно, нужно продублировать слово class, т.е. class:myclass class:tel
Не отрабатывает маска! Текст не вводиться
Простите, на курсы экстрасенсорики так и не записался