Главная » Блог » Elementor » Маска ввода номера телефона в Elementor

Маска ввода номера телефона в Elementor

Привет друзья на связи Павел Гречко, сегодня расскажу вам как сделать маску в поле для телефона, для инвалидов которые не могут правильно написать свой номер телефона когда оставляют заявку.

  1. Скачиваем плагин Masks Form Fields, ссылка на плагин https://wordpress.org/plugins/masks-form-fields/
  2. Устанавливаем его.
  3. Это страница Help для разных ситуаций. https://gist.github.com/petermann/fd1a898e02ca91a0d7231a9f8ee662b4
  4. Я оттуда взял 2 варианта которые мне нужны что бы маска работала в pop up форме для Elementora другая это кастомный код который я хочу изменить в обычный форме.
  5. Дальше надо установить эти 2 кода на сайт. Переходу в настройки Elementor > Кастомный код
Маска ввода номера телефона в Elementor

6. Добавляю новый код в head

<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add mask in input phone the Elementor Forms.
-->
<script type="text/javascript">
jQuery(document).ready(function($){
  $("input[type='tel']").removeAttr("pattern").addClass("phone_us");
});
</script>


<!--
 * WordPress Plugin: Masks Form Fields - https://wordpress.org/plugins/masks-form-fields/
 * JavaScript - Custom script to add phone mask in field with Contact Form 7 in Popup Elementor.
-->
<script type="text/javascript">
jQuery(document).on('elementor/popup/show', function () {
    jQuery('input[type="tel"]').mask('0(000)-000-00-00');
});
</script>

7. У поля телефон надо прописать значение по умолчанию и ID сделать Tel

Маска ввода номера телефона в Elementor

8. На выходе получится вот такая красота

Маска ввода номера телефона в Elementor

Автор: Павел Гречко

Профессия: SEO-специалист, в Digital с 1995 года
Образование: Высшее, ULIM, Информационные технологии
Сотрудничество grechkopv@gmail.com

Эффективные digital-стратегии для роста продаж

Напишите какие задачи вы хотите решить

  • Отдать сайт на Аутсорсинг чтобы рулили маркетингом пока вы занимаетесь бизнесом

  • Увеличить SEO-трафик на сайте из Яндекс и Google

  • Покупать горячие и тёплые лиды

Напишите мне!
Copyright © 2022
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.
Следуй за мной

Битрикс24 помогает бизнесу работать! Перейди что бы начать


Топовый хостинг для бизнеса. Рекомендую перейти в Таймвеб.

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

Спасибо что доверились нам. Я и мой команда продвигаем сайты более 10 лет. Надеюсь на плодотворное долгосрочное сотрудничество.

Персональные данные только для личного пользования. В даркнет ничего не сливаю.