Урок №13. Настраиваем обратный звонок

Итак, по-порядку. Нам потребуется:

1). Плагин https://wordpress.org/plugins/contact-form-7/
2) Доступ к FTP
3) Скрипт JS jquery.maskedinput.min.js
4) Терпение и от 20 до 60 минут свободного времени.

Поехали:
1. Для начала качаем архив jquery.maskedinput.min.js и вставляем его в блог. Для этого входим в админку и проходм по адресу : 
Корневая папка>САЙТ.ru>wp-includes>js

Сюда и помещаем наш файл, не забываем распаковать, а архивный оригинал удалить. Сохраняем изменения.

2. Переходим в админ панель сайта (можно в WP) и в редакторе внешнего вида находим funktions.php:

Спускаемся вниз и вставляем два кода:

1.

1	add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');

2	function wpmidia_enqueue_masked_input(){

3	wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery'));

4

}

2. Вторая часть активирует срипт

1	add_action('wp_footer', 'wpmidia_activate_masked_input');

2	function wpmidia_activate_masked_input(){

3

?>

4	<script type="text/javascript">

5	jquery( function($){

6	$(".data").mask("99/99/9999");

7	$(".tel").mask("+7(999)99-999-99");

8	$(".cpf").mask("999.999.999-99");

9	$(".cnpj").mask("99.999.999/9999-99");

10

});

11

</script>

12

<?php

13

}

После этого сохраняем файл.

Идем дальше.

1. Переходим в плагин контактной формы (1);
2.Создаем новую форму (2);
3. Прописываем название, заголовок (3);
4. Вставляем текст (4). Можно добавить <p>, <br> (желаельно). 
Ваше имя (обязательно)
    [text* your-name] 
 Ваш номер телефона (обязательно)
[text* tel class:tel placeholder "+7 (___) ___-__-__"]
 Поставьте галочку или ответьте на вопрос*:
[recaptcha]
 Нажмите на кнопку:
[submit "Отправить"]
5. Копируем код вывода формы (5).И вставляем в нужное нам место.

Если это Footer, то код вставки нужно видоизмень 
с:
[contact-form-7 id="43" title="Контактная форма 1"]
на:
<?php echo do_shortcode('[соntact-form-7 id="43" title="Контактная форма 1"]');?>

И конечно, не все можно сделать при помощи простых скриптов и CSS, особенно начинающим блогерам. Поэтому нужны дополнительные плагины:

• Contact Form 7 reCAPTCHA Extension - плагин добавляет в Contact Form 7 каптчу
• Easy Modal  - плагин помогает создать всплывающие окна 
• Contact Form 7 Select Box Editor Button - плагин добавляет выпадающее меню с возможностью выбирать адресата
• Contact Form DB - плагин записывает отправленные контактные формы в базу данных сайта, ведет статистик
• Easy UTM tracking with contact form 7 -плагин для UTM меток в Contact Form 7
• Contact Form 7 Integrations - плагин интегрирует контактные формы сайта с сторонними сервисами, например Google Docs
• Contact Form 7 Dynamic Text Extension - специфический плагин, добавляющий новый тип поля — динамичное содержание (есть скрытое и открытое поле)
• Contact Form 7 Tiny MCE - плагин добавляет визуальный редактор в контактную форму
• Contact Form 7 Skins - плагин для оформления внешнего вида контактных форм CF7...