Маска ввода телефона для плагина Contact Form 7

Пользуюсь давно прекрасным плагином контактной формы для Wordpress “Contact Form 7″. Недавно задался целью сделать удобный ввод телефона по маске типа +38 (___) ___-__-__ . Нашел дополнительный плагин именно под Contact Form 7 (оказывается таких вспомогательных плагинов для расширения функционала CF7 много) с названием Contact Form 7 Phone Module, НО! Есть несколько причин, почему я не стал его использовать:

  1. Плагин оказался не рабочим (хотя мне удалось его заставить работать) это уже было не приятно.
  2. Сам факт установки еще одного плагина меня не радовал.
  3. И главное – не было возможности задать placeholder. То есть само поле выглядело пустым, а маска появлялась только при нажатии курсора в него. По скольку я не любитель описывать поле сверху или снизу, мне этот метод не подошел.

И я нашел простой способ сделать маску через маленький настраиваемый скрипт.

Маска ввода для поля в Contact Form7 через скрипт

  1. Качаем сам скрипт отсюда, выбрав версию Minified.
  2. Скорее всего откроется код скрипта в отдельном окне браузера, поэтому просто копируем код, создаем новый файл с названием jquery.maskedinput.min.js и вставляем его туда. Или можно скачать готовый скрипт здесь.
  3. Сохраняем в директорию своей темы с названием js (если есть). Если нету создаем или добавляем куда надо, но тогда нужно будет в коде ниже изменить путь к исполняемому файлу.
  4. Далее в файле function.php своей темы создать функцию с помощью такого кода
  5. В том же файле function.php активируем функцию
  6. Здесь мы изменяем маску как нам надо или добавляем свои.
  7. Теперь в настройках своей формы contactform7 в соответствующее поле (например телефон) добавляем соответствующий класс.
    1маска-телефона-contactform7
  8. Добавляем такой же placeholder и получаем маску для телефона.
    2маска-телефона-contactform7

Маска только на определенных страницах

Если нужно чтоб маска срабатывала только на определенной странице, например в контактах, то добавляем условие через функцию  is_page ().

      1. Для погрузки файла скрипта (изменяем код пункт 4)

         
      2. Для вызова функции (изменяем код пункта 5)

         

        Собственно все. Будут вопросы, пишите в комментариях

Автор: Виталий


Спасибо за отзыв
Рейтинг: 4.9 из 5 Голосов: 754

37 комментариев

  1. Алексей 14.09.2020

    Здравствуйте не могу подключить Art WooCommerce Order One Click

  2. Дима 13.06.2020

    Интересное наблюдение. Да решение рабочее, но когда оно на отдельной странице.
    Форму связи я делал через popup окно. В нем же есть поле телефона, но маска не работает. В то же время на отдельной странице маска работает.

    Что не понравилось: для того, чтобы заполнить номер телефона правильно, необходимо попасть курсором на первый символ после префикса (например +7) если кликнуть в произвольное место на поле ввода телефона, то заполняется оно с того самого места (например +7___96122)

    На мой взгляд решение так себе, больше похоже на какой -то костыль, который к тому же будет бесить клиента …

    • Виталий 13.06.2020

      Дима, Вам просто не удалось корректно настроить скрипт. В окнах pop-up работает отлично, курсор тоже становится в правильное положение при любом клике. Проверьте конфликты скриптов. Вот скринкаст с окна формы на pop-up.
      скринкаст

  3. Max 30.01.2020

    Все отлично работает, спасибо большое!

  4. Макс 17.04.2018

    при использовании Contact Form 7 не обязательно прописывать дополнительный класс в самой форме, можно просто в functions.php маске указать $(“.wpcf7-tel”).mask(“+7(999)999-99-99″); например :) Просто сейчас как раз искал решение для CF7 и наткнулся на вашу статью.

    • Виталий 17.04.2018

      Возможно, но я не проверял. Давно уже все это делал

  5. Дмитрий 15.01.2018

    Виталий, не подскажешь как зацепить эту маску в поле ввода телефона на странице checkout? Никак не могу сообразить где подключить. Был бы очень признателен а-то напрягает что пользователи как попало свои телефоны вводят.

    • Виталий 15.01.2018

      Это инструкция для плагина ContactForm7 (wordpress). Для других случаев, используйте чистый скрипт maskedinput. Ссылка есть в статье, на том же сайте можно увидеть логику подключения

    • Дмитрий 15.01.2018

      Все оказалось в миллион раз проще!!!!!!! Нужно просто добавить к маскам вот такой тип:
      $(“#billing_phone”).mask(“+7 (999) 999-99-99″);
      И все))) Не нужно больше ничего менять и качать полную версию файла тоже не обязательно.
      Добавьте это к статье, полезно для всех!

      • Дмитрий 15.01.2018

        Теперь маска работает и ContactForm7 и в форме заказа

      • Виталий 16.01.2018

        Я не использую этот плагин для подобных страниц и форм, поэтому не могу проверить вашу инструкцию, соответственно в статью не добавлю пока. Но пусть будет в комментариях, может кому понадобиться.

  6. Андрей 22.12.2017

    Спасибо! Очень полезно! Себе сделал по вашей инструкции, все летает. Раньше плагином пользовался, пока он не перестал работать.

    • Виталий 22.12.2017

      Рад что все вышло! Поэтому я и не очень люблю плагины.

  7. Екатерина 31.10.2017

    Маска работает идеально за исключением одного но.
    Подскажите, пожалуйста, что может мешать данному коду “placholder”+7(___) ___-__-__” при отображении на сайте?
    При обновлении страницы он на несколько секунд погружается, а затем исчезает.

    • Виталий 01.11.2017

      Так просто не смогу сказать, нужно смотреть детальнее. Также в Вашем комментарии указана лишняя кавычка перед placeholder. В кавычки нужно оборачивать только значение placeholder, но не сам параметр. Проверьте у себя на сайте, может это и есть причина!

  8. Дмитрий 22.10.2017

    Спасибо тебе огромное! Редко встретишь на просторах интернета грамотных людей которые умеют так легко и быстро все объяснить. Затратил 3 минуты, 2 из которых ушло на чтение данного опуса. Все быстро и качественно, спасибо.

    • Виталий 23.10.2017

      Спасибо за приятный отзыв! Рад что все вышло и моя статья помогла Вам )

  9. Дмитрий 29.09.2017

    Маска заработала с первого раза. Спасибо. Подскажите пожалуйста как добавлять к заполняемому номеру телефона, +7?

    • Виталий 30.09.2017

      Здравствуйте, просто добавьте к коду скрипта в function.php +7 перед девятками, например $(“.tel”).mask(“+7(999) 999-99-99″); Место для ввода цифр срабатывает только на девятки

  10. Виталий 04.09.2017

    Здравствуйте, хотел бы уточнить, данный способ маски ввода еще актуален? Несколько раз пытался все повторить, делал все точно как в примере, но результата нет.., В поле телефона во время ввода поле очищается и все.

    • Виталий 05.09.2017

      Какая версия Contact Form 7? Возможно не верно подключен скрипт и он конфликтует с другими. Вариантов много. Покажите ссылку на форму

  11. Станислав 05.07.2017

    Если используется дочерняя тема, то в первом пункте при загрузке скрипта вместо переменной “get_template_directory_uri()” нужно использовать get_stylesheet_directory_uri(), иначе скрипт пытается запустится из родительской темы.

    • Дмитрий 11.10.2017

      В случае использования дочерней темы нужно править functions.php именно дочерней темы?

      • Виталий 12.10.2017

        Можно или в дочернюю или в родительскую, но считается правильней в дочернюю.

  12. Ярослав 30.06.2017

    Заметил странное поведение на мобильнике.
    Когда вводишь номер по маске $(“.tel”).mask(“(99) 9999-9999″); при вводе 4 знака (первого после правой скобки), знак вводится, но курсор остаётся слева и так после каждого разделителя.

    • Виталий 02.07.2017

      Попробуйте не устанавливать minlength или maxlength параметры

  13. Евгений 29.05.2017

    Большое человеческое спасибо! С вашими инструкциями с первого раза осилил!

    • Виталий 29.05.2017

      Рад что у Вас все получилось!

  14. Евгений 21.05.2017

    Супер!! Всё работает :)

  15. Ленка-человек 04.05.2017

    Большое спасибо! все работает!

  16. Alexandr Lagram 05.04.2017

    Когда вставляю код из шага 5 перестает всплывать форма связи, реализованная через Easy FancyBox. Подскажите, в чем может быть причина?

    upd. Попробовал на отдельной странице обычную форму создать, там маска не работает. В файл function.php код в любое место вставлять можно?

    • Виталий 05.04.2017

      Не совсем понятно зачем вы контактную форму реализовали через FancyBox ? Если вам нужен поп-ап (модальное окно), то лучше использовать Easy Modal.
      Иначе, попробуйте выводить скрипт в саму верстку (например в футере) а не в файле функции. Но, рекомендую просто подключить правильно форму.

  17. Александр Кириллов 04.04.2017

    А если у поля уже прописан класс

    • Виталий 04.04.2017

      Добавьте рядом еще один. Например, class: myclass tel

      • Mediashark.by 10.04.2017

        Не верно, нужно продублировать слово class, т.е. class:myclass class:tel

  18. Иван Чистополов 27.01.2017

    Не отрабатывает маска! Текст не вводиться

    • Виталий 26.01.2017

      Простите, на курсы экстрасенсорики так и не записался

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перезвонить?

 

×
Оставить заявку

 

×