МАСКА ВВОДА ТЕЛЕФОНА на WordPress +7 (_ _ _) | Инструкция

---

Задача — сделать форму с маской ввода телефона на Вордпресс. Введенный телефонный номер должен отправляться на электронную почту. Это стандартная задача для страниц сбора данных. Например, интернет магазинов или одностраничников (лендинг пейдж).

Выглядит это примерно так:

В качестве механизма создания регистрационных форм и отправки на электронный адрес используем плагин Contact Form 7. Это удобное дополнение, которое полностью решает задачу создания необходимых форм. А также эффективно интегрируется в большинство конструкторов страниц, работающих в среде Ворпресс (например, Elementor).

После установки Contact Form 7 дополнительные настройки не требуются. В админ панели Вордпресс (столбец слева) появляется меню плагина:

Теоретически плагин может не сочетаться с твоей темой Вордпресс. Это мало вероятно, но такая возможность существует. То есть после установки просто не появляется новый пункт меню.

 

Используемые далее термины: ряд пиктограмм в плагине называются генераторами тегов формы. Далее по тексту эти пиктограммы и создаваемые ими данные будем называть просто тегами:

 

Функционала самого плагина нам будет недостаточно. По умолчанию есть тег «телефон». Частично он может выполнять функцию формы ввода номера телефона. Позволяя вводить только цифры. Однако выглядит как текстовое поле и не позволяет применить маску номера телефона.

Расширение функционала

Нам потребуется дополнительный плагин. Например, «Contact Form 7 — Маска ввода телефонного номера» автора Ruslan Heorhiiev.

Лично у меня этот плагин в статусе «Не тестировался с вашей версией WordPress». То есть имеются ограничения при поиске через Вордпресс. Если по названию это дополнение ты найти не можешь, попробуй использовать для поиска имя автора:

После установки дополнения автоматически в шаблонах формы Contact Form 7 появляется новый тег формы (пиктограмма) «маска ввода». Именно он позволяет решить нашу задачу.

Настройка формы

Создаем шаблон формы. Для этого кликаем на ссылку «Добавить новую» (меню слева). Появляется следующее поле:

Здесь можно убрать ненужные пункты. А также добавить маску номера телефона — кликаем на пиктограмму «маска ввода». Открывается следующая форма:

Заполняем поле «Маска». Например, указываем код страны (+7 или 8 для России), скобками и тремя символами нижнего подчеркивания размечаем код телефона посетителя. Далее символами нижнего подчеркивания и тире размечаем тело номера:

+7 (_ _ _) _ _ _-_ _-_ _

Нажимаем кнопку «Вставить тег». Например, следующая форма будет принимать имя посетителя и его номер телефона:

Сам синтаксис заполнения формы — совершенно отдельная тема. Обрати лишь внимание на то, как прописаны поля. Как используется тег <label> и выполнено описание каждого пункта.

Обрати внимание: указанные значения (mask-322) генерируются случайно. У тебя это могут быть другие значения.

Настройка письма

Заполняем шаблон письма, который плагин будет оправлять нам на почту. Кликаем на ссылку «Письмо» в панели вкладок плагина. Заполняем шаблон письма примерно следующим образом:

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

Сам электронный адрес подтягивается из настроек Вордпресс. Но мы можем в ручную его изменить в настройках пункта «Письмо».

Осталось только вставить нашу конструкцию. Для этого используем шорткод или функционал конструктора страниц. Проводим тестирование. Обрати внимание: письмо может приходить с задержкой. А также попасть в папку спам.

---

Поделиться в соц сетях

---