Маска ввода телефона для плагина 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)

         

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

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

  1. Макс 17.04.2018

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

    • Виталий 17.04.2018

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

  2. Дмитрий 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

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

  3. Андрей 22.12.2017

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

    • Виталий 22.12.2017

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

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

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

    • Виталий 01.11.2017

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

  5. Дмитрий 22.10.2017

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

    • Виталий 23.10.2017

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

  6. Дмитрий 29.09.2017

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

    • Виталий 30.09.2017

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

  7. Виталий 04.09.2017

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

    • Виталий 05.09.2017

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

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

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

    • Дмитрий 11.10.2017

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

      • Виталий 12.10.2017

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

  9. Ярослав 30.06.2017

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

    • Виталий 02.07.2017

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

  10. Евгений 29.05.2017

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

    • Виталий 29.05.2017

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

  11. Евгений 21.05.2017

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

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

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

  13. Alexandr Lagram 05.04.2017

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

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

    • Виталий 05.04.2017

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

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

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

    • Виталий 04.04.2017

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

      • Mediashark.by 10.04.2017

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

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

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

    • Виталий 26.01.2017

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

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

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

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

 

×
Предварительный заказ

 

×