Маска ввода номера телефона в 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-специалист. Руковожу бутиковым отделом маркетинга на аутсорсе.
Опыт: 10 лет в SEO и разработке сайтов.
Умения (навыки, скилы): SEO, Сайты для бизнеса, Маркетинг, Управление репутацией.
Работаю с предпринимателями и маркетологами.
Напишите на почту grechkopv@gmail.com

Мои услуги

Оптимизация сайта

Технический аудит + подготовка рекомендация по исправлению ошибок

SEO Продвижение сайта

Увелечие трафика и продаж, Комплексное решение к маркетингу

Консультация

Помогу с вопросами SEO и продвижения бизнеса с помощью сайта
Следующие статьи

Подпишись что бы не пропустить новые посты

Личный канал про SEO

Канал ТГ для сеоников и вебмастеров
Подписаться

Личный паблик про SEO

Паблик ВК для сеоников и вебмастеров
Подписаться
Добавить комментарий

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

  1. Маски работают по разному. В Popup все работает как надо. А в стандартной форме 8 входит в скобки так как подтягивается форма phone_us’).mask(‘(000) 000-0000’) Как это поправить

    • У тебя маска подает в поле?

  2. Огромное спасибо! Мучалась два дня, благо добралась до вашего решения. Процветания и удачи.

    • Спасибо, вам того же.

Давайте прямо сейчас

Обсудим потенциал вашего cайта

Напишите какие задачи вы хотите решить с помощью сайта

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

  • Найти слабые места сайта и точки роста?

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

О компании

ИП ГРЕЧКО ПАВЕЛ ВЛАДИМИРОВИЧ
ИНН 781446683349
ОГРН 319470400115482

E-mail это лучшее средство связи на планете земля.

Copyright © 2022
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.

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

Следуйте за мной

Мой соц. сети для предпринимателей. Рассказываю на понятном языке как развивать бизнес онлайн. С помощью сайта+seo и других инструментов маркетинга.

Сопровождение бизнеса в интернете с 1995 года.

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

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