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

         

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

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

  1. Дмитрий 22.10.2017

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

    • Виталий 23.10.2017

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

  2. Дмитрий 29.09.2017

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

    • Виталий 30.09.2017

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

  3. Виталий 04.09.2017

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

    • Виталий 05.09.2017

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

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

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

    • Дмитрий 11.10.2017

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

      • Виталий 12.10.2017

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

  5. Ярослав 30.06.2017

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

    • Виталий 02.07.2017

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

  6. Евгений 29.05.2017

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

    • Виталий 29.05.2017

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

  7. Евгений 21.05.2017

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

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

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

  9. Alexandr Lagram 05.04.2017

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

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

    • Виталий 05.04.2017

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

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

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

    • Виталий 04.04.2017

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

      • Mediashark.by 10.04.2017

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

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

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

    • Виталий 26.01.2017

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

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

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

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

 

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

 

×