Как сделать маску телефона в контакт форм 7
Обновлено: 07.07.2024
Не теряйте заказы и клиентов из-за неправильно введенного номера телефона. Минимизируйте подобные случаи по максимуму. Используйте в формах заказа и обратной связи для поля Телефон маску ввода номера телефона.
Создать такую маску можно с помощью бесплатного плагина "Contact Form 7 - Phone mask field". Работает этот плагин в связке с основным плагином Contact Form 7.
00:00 Вступление.
00:58 Плагин Contact Form 7 - Phone mask field. Установка плагина. Настройка поля Телефон для формы обратной связи.
02:58 Тест формы.
04:28 Настройка поля Телефон для формы быстрого заказа.
05:56 Выводы.
Подключение плагина
После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :
Создание HTML маски ввода
Создания маски ввода осушествляется в js коде с помощью следующих знаков:
- Цифра 9 – соответствует цифре от 0 до 9.
- Символ a – представляет собой любой английский символ (A-Z, a-z).
- Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).
Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id="phone" :
Создание HTML элементу input маски ввода телефона
Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:
Использование различных заполнителей в масках ввода masked input
Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.
Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак '?' . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.
Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.
Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой
Настройка маски ввода Masked Input
Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.
Например, создадим для маски специальный символ ~ , который при вводе должен быть заменён на знак ( + ) или минус ( - ).
Демонстрация работы маски для ввода положительного или отрицательного числа
Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате
Пример создания маски ввода телефона
Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны
Плагин-конструктор обратных форм связи для WordPress "Contact Form 7" в особой рекламе не нуждается. Валидный, мультиязычный, простой в настройках, постоянно обновляемый в каталоге плагинов WP . Эти и другие качества сделали его любимчиком среди владельцев сайтов на WordPress, по состоянию на начало 2016 года плагин скачали и установили более 35 миллионов человек! На сегодняшний день Contact Form 7 является заслуженно продвинутым плагином контактных форм!
Разумеется, спасает ситуацию бесчисленное множество дополнений различных сторонних разработчиков в виде отдельных плагинов к CF7 (см.ниже). Но если есть возможность обойтись без плагина - всегда ее используйте!
Я опишу несколько ситуаций, в которые попадал во время работы с клиентскими сайтами, а также предоставлю решения возникших проблем с Contact Form 7.
Валидация телефонного номера в Contact Form 7
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем текстовое поле
Шаг 3. В файле functions.php своей темы добавляем следующий код:
Передача Get-запросов в форму Contact Form 7
Иногда на сайтах возникает такая необходимость, как передать в контактную форму связи какое-либо динамичное поле. Ну, например: есть сайт стоматологической клиники с огромным перечнем врачей и наша задача - создать форму обратной связи с возможностью записаться на прием к каждому врачу. Естественно, создавать для каждого врача свою форму связи мы не будем. Под фотографией каждого врача будет стоять кнопка "Записаться на прием к врачу" которая ведет на страницу с контактной формой Contact Form 7. В эту форму мы и будем передавать данные Get-запросом (фамилия врача будет передаваться в ссылке и добавляться в форму обратной связи Contact Form 7).
Как передать данные в форму Contact Form 7 Get-запросом? Шагов всего три:
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем поле:
Шаг 2. В functions.php своей темы добавляем следующий код:
Шаг 3. Чтобы передать данные в форму которая находится по адресу /contact.htm, мы должны сформировать ссылку таким образом:
Отправка SMS из Contact Form 7
Шаг 2. Для того чтобы подготовить SMS, нам надо перехватить передаваемые данные из Contact Form 7. Сделать это можно в файле functions.php Вашей темы:
Вызов Contact Form 7 лишь на отдельной странице
Как правило, формы обратной связи для посетителей размещаются на отдельно взятой странице сайта, типа "О нас", "Контакты", "Обратная связь" и т.д. Но если мы откроем исходный код нашего сайта на любой странице, то заметим там вызов файлов плагина Contact Form 7, например:
Получается, что файлы плагина грузятся в браузер пользователя даже тогда, когда вообще не нужны! Как вызвать Contact Form 7 лишь на отдельной (целевой) странице сайта? Нас выручит код, который размещаем в functions.php текущей темы:
Код разрешит активацию плагина Contact Form 7 только на странице наш_сайт.ру/contact
Переадресация после отправки формы Contact Form 7
Вывод Contact Form 7 в шаблоне сайта
Контактную форму CF7 можно вставить в любую запись или страницу сайта используя шорткод из раздела "Код вставки". Он выглядит примерно следующим образом:
Читайте также: