
Как сделать ввод телефона по маске в Contact Form 7 WordPress
Случилось такое дело, что столкнулся с созданием формы на Contact Form 7 и там были поля ввода телефона с маской для ввода. Вроде бы всё просто, но контакт форм не поддерживает маску, поэтому пришлось поискать решение, как это сделать. Изначально была надежда, что поставлю плагин для этого и всё будет сделано. Но плагина не оказалось, был один или два старых, которые не работали как надо. Значит пришлось решать этот вопрос, а, чтобы не забыть написать статью, возможно пригодится и другим такое решение.
Задача решения: сделать поле с маской ввода и placeholder поле в котором бы сразу отображалось, что нужно вводить номер и его вид. Начинаем решение задачи по пунктам:
Скрипт для отображения маски телефона
Нашёл разработку скрипта, вот его описание:
Это замаскированный вход плагин для JQuery библиотеки JavaScript. Это позволяет пользователю более легко вводить фиксированную ширину входа, где вы хотели бы их, чтобы ввести данные в определённом формате (даты, номера телефонов и т.д.). Он был протестирован на Internet Explorer, Firefox, Safari, Opera и Chrome. Маска определяется формат, состоящий из маски литералов и определения маски. Любой символ, не в списке определений ниже считается маска буквальным. Маска литералы будет автоматически введена для пользователя , как они печатают и не смогут быть удалены. Определения следующих масок предопределены:
а – Представляет альфа-символ (AZ, AZ)
9 – Представляет цифровой символ (0-9)
* – Представляет алфавитно-цифровые символы (AZ, AZ, 0-9)
Теперь его надо скачать к себе, брать тут.
Заливаем скрипт в шаблон сайта
После того как вы скачали скрипт надо залить его с названием jquery.maskedinput.min.js в папку JS вашего шаблона сайта. Если такой папки нет, то создать её.
Добавление в function.php
После того как файл залит, нам необходимо добавить функцию в function.php темы сайта. Заходим в шаблон, находим function.php и в конце добавляем сразу вот такой код вызова функции и исполнения:
add_action(‘wp_enqueue_scripts’, ‘wpmidia_enqueue_masked_input’);
function wpmidia_enqueue_masked_input(){
wp_enqueue_script(‘masked-input’, get_template_directory_uri().’/js/jquery.maskedinput.min.js’, array(‘jquery’));
}
add_action(‘wp_footer’, ‘wpmidia_activate_masked_input’);
function wpmidia_activate_masked_input(){
?>
<script type=”text/javascript”>
jQuery( function($){
$(“.data”).mask(“99/99/9999”);
$(“.tel”).mask(“(99) 9999-9999”);
$(“.cpf”).mask(“999.999.999-99”);
$(“.cnpj”).mask(“99.999.999/9999-99”);
});
</script>
<?php
}
Настройка вида маски телефона
Для того чтобы настроить правильно маску телефона, используйте вариацию $(“.tel”).mask(“(99) 9999-9999”);. Я например сделал вот так у себя.
<div class=”col-md-4″>
<div class=”form-group”>
<label for=”contact-name”>Телефон *</label>
[tel* tel id:tel class:tel placeholder”+345 (__) ___-__-__”]
</div>
</div>
Соответственно дальше в поле формы вставляете вот таким вот кодом, как на картинке ниже. После этого у вас будет работать маска телефона в обычном contact form 7 на сайте wordpress. Удачной вам работы!
Tags: вордпресс советыконтакт форм 7маска ввода