Плагин-конструктор обратных форм связи для WordPress "Contact Form 7" в особой рекламе не нуждается. Валидный, мультиязычный, простой в настройках, постоянно обновляемый в каталоге плагинов WP. Эти и другие качества сделали его любимчиком среди владельцев сайтов на WordPress, по состоянию на начало 2016 года плагин скачали и установили более 35 миллионов человек! На сегодняшний день Contact Form 7 является заслуженно продвинутым плагином контактных форм!
В Contact Form 7 (CF7) можно конструировать всевозможные формы для обратной связи, используя для этого различные типы полей. И хотя у плагина есть постоянные обновления и довольно полная документация на сайте http://contactform7.com, время от времени возникают нетривиальные ситуации, когда функционала плагина явно недостаточно.
Разумеется, спасает ситуацию бесчисленное множество дополнений различных сторонних разработчиков в виде отдельных плагинов к CF7 (см.ниже). Но если есть возможность обойтись без плагина - всегда ее используйте!
Я опишу несколько ситуаций, в которые попадал во время работы с клиентскими сайтами, а также предоставлю решения возникших проблем с Contact Form 7.
Валидация телефонного номера в Contact Form 7
В CF7 нет какой-либо встроенной функции проверки валидации телефонного номера, хотя поле с указанием телефона очень часто встречается в контактных формах типа "Заказать обратный звонок". Идеальным решением было бы использование маски ввода, по типу +7 (___) ___-__-__ и человек ничего не напутает и скрипт не пропустит не правильный номер телефона!
Как сделать в Contact Form 7 поле для ввода телефона? Это не сложно, мы воспользуемся помощью готового JS скрипта «Masked Input Plugin».
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем текстовое поле
[text* telefon class:tel placeholder "+7 (___) ___-__-__"]
Шаг 2. Скачиваем js скрипт тут http://digitalbush.com/projects/masked-input-plugin/ (подключаем в шаблон своего сайта как обычный js файл).
Шаг 3. В файле functions.php своей темы добавляем следующий код:
add_action('wp_footer', 'wpmidia_activate_masked_input'); function wpmidia_activate_masked_input(){ ?> <script type="text/javascript"> jQuery( function($){ $(".tel").mask("+7 (999) 999-9999"); }); </script> <?php }
Теперь у нас появилось поле с вводом телефона по маске +7 (___) ___-__-__ Поле требует ввода только цифр, при не полном заполнении попросит его заполнить. Такими нехитрыми шагами мы реализовали валидацию телефонного номера в поле формы Contact Form 7.
Передача Get-запросов в форму Contact Form 7
Иногда на сайтах возникает такая необходимость, как передать в контактную форму связи какое-либо динамичное поле. Ну, например: есть сайт стоматологической клиники с огромным перечнем врачей и наша задача - создать форму обратной связи с возможностью записаться на прием к каждому врачу. Естественно, создавать для каждого врача свою форму связи мы не будем. Под фотографией каждого врача будет стоять кнопка "Записаться на прием к врачу" которая ведет на страницу с контактной формой Contact Form 7. В эту форму мы и будем передавать данные Get-запросом (фамилия врача будет передаваться в ссылке и добавляться в форму обратной связи Contact Form 7).
Как передать данные в форму Contact Form 7 Get-запросом? Шагов всего три:
Шаг 1. В конструкторе контактных форм Contact Form 7 создаем поле:
[getzapros vrach]
Шаг 2. В functions.php своей темы добавляем следующий код:
wpcf7_add_shortcode('getzapros', 'wpcf7_getzapros_shortcode_handler', true); function wpcf7_getzapros_shortcode_handler($tag) { if (!is_array($tag)) return ''; $name = $tag['name']; if ($_GET[$name]=='') { $html = ''; } else { $html = '<input type="hidden" name="' . $name . '" value="'. $_GET[$name] . '" />'; } return $html; }
Шаг 3. Чтобы передать данные в форму которая находится по адресу /contact.htm, мы должны сформировать ссылку таким образом:
/contact.htm?vrach=фамилия врача
Отправка SMS из Contact Form 7
Основное предназначение контактных форм на сайтах - отсылать заполненные пользователем данные на адрес электронной почты владельца сайта. Владелец сайта прочитает письмо посетителя лишь открыв свою электронную почту. А если это интернет-магазин и вам нужно максимально быстро реагировать на письмо посетителя? В таком случае необходимо отсылать SMS сообщение владельцу сайта, телефон всегда при нем - обратная связь получится практически мгновенной. От нажатия кнопки "Отправить" и прочтением адресатом пройдет всего пару секунд! На просьбу посетителя (например, перезвонить ему), вы сможете отреагировать максимально быстро!
Как отправить SMS из Contact Form 7? Шагов всего два:
Шаг 1. Определиться с отправителем SMS. Бесплатных отправителей я не знаю, поэтому рекомендую использовать SMS-шлюзы от специальных сервисов, например - http://seozona.sms.ru (в зависимости от ежедневного количества нужных Вам SMS, Вы можете пользоваться сервисом даже совершенно бесплатно). Такие SMS-шлюзы работают очень просто, вы отправляете нужные вам данные на специальный урл адрес и Ваша SMS доставляется адресату (я покажу ниже пример для только что упомянутого SMS шлюза, если Вы надумаете использовать его в качестве отправителя).
Шаг 2. Для того чтобы подготовить SMS, нам надо перехватить передаваемые данные из Contact Form 7. Сделать это можно в файле functions.php Вашей темы:
add_action( 'wpcf7_mail_sent', 'your_wpcf7_mail_sent_function' ); function your_wpcf7_mail_sent_function( $contact_form ) { $title = $contact_form->title; $posted_data = $contact_form->posted_data; if ('Контактная форма 1' == $title ) { //замените на свое название контактной формы $submission = WPCF7_Submission::get_instance(); $posted_data = $submission->get_posted_data(); //далее мы перехватывает те поля из формы, которые хотим запихнуть в SMS $yourphone = $posted_data['your-message']; //перехватываем поле [your-message] $yourname = $posted_data['your-name']; //перехватываем поле [your-name] $mes = $yourphone.' '.$yourname; //выстраиваем перехваченные переменные в одно сообщение //...здесь мы должны отправить ваше SMS, которое находится в переменной $mes //Вариант 1. Использование функции Email to SMS у украинского мобильного оператора Киевстар //$mail = mail ('380971234567@sms.kyivstar.net','',$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email"); //Вариант 2. Использование SMS-шлюза http://seozona.sms.ru //$sms = str_replace(' ','+', $mes); //$idapi = 00000-0000-0000-000 //уникальный api_id, выдается после регистрации //$nomer =701231234567 //телефон получателя //$urlsms="http://sms.ru/sms/send?api_id=$idapi&to=$nomer&text=$sms"; //$body=file_get_contents($urlsms); } }
Вызов Contact Form 7 лишь на отдельной странице
Как правило, формы обратной связи для посетителей размещаются на отдельно взятой странице сайта, типа "О нас", "Контакты", "Обратная связь" и т.д. Но если мы откроем исходный код нашего сайта на любой странице, то заметим там вызов файлов плагина Contact Form 7, например:
/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js /wp-content/plugins/contact-form-7/includes/js/scripts.js
Получается, что файлы плагина грузятся в браузер пользователя даже тогда, когда вообще не нужны! Как вызвать Contact Form 7 лишь на отдельной (целевой) странице сайта? Нас выручит код, который размещаем в functions.php текущей темы:
add_action ( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript () { if ( !is_page ('contact') ) { wp_deregister_script ( 'contact-form-7' ); } }
Код разрешит активацию плагина Contact Form 7 только на странице наш_сайт.ру/contact
Переадресация после отправки формы Contact Form 7
По умолчанию, после заполнения и отправки данных с формы Contact Form 7, пользователь остается на той же странице, получая по Ajax сообщение о статусе отправки сообщения. В некоторых случаях и для некоторых целей иногда полезно переадресовать пользователя на отдельную страницу. Сделать это можно используя встроенные возможности. В конструкторе контактной формы перейдите на вкладку "Дополнительные настройки" и добавьте строчку кода:
on_sent_ok: "location.replace('http://ваш_сайт.ру/spasibo/');"
случае успешной отправки письма с контактной формы, пользователь будет переадресован на http://ваш_сайт.ру/spasibo/
Вывод Contact Form 7 в шаблоне сайта
Контактную форму CF7 можно вставить в любую запись или страницу сайта используя шорткод из раздела "Код вставки". Он выглядит примерно следующим образом:
[соntact-form-7 id="39865" title="Заголовок"]
А если нужно контактную форму CF7 вставить в нижнюю сайта, непосредственно в файл footer.php вашей текущей темы WordPress? В таком случае, код придется немного модифицировать:
<?php echo do_shortcode('[соntact-form-7 id="39865" title="Заголовок"]');?>
Дополнительный функционал для CF7
Некоторые задачи с CF7 невозможно решить путем встраивания несложного кода в functions.php, поэтому можно обратиться за помощью к сторонним плагинам, которые расширяют и дополняют функционал CF7. Их можно найти на любой вкус и цвет, для самых разнообразных задач (можно искать в каталоге плагинов WordPress по ключу CF7). Возможно, Вам пригодятся:
- Contact Form 7 reCAPTCHA Extension - плагин добавляет в Contact Form 7 каптчу
- Contact Form 7 Select Box Editor Button - плагин добавляет выпадающее меню с возможностью выбирать адресата
- Contact Form DB - плагин записывает отправленные контактные формы в базу данных сайта, ведет статистику
- Contact Form 7 Integrations - плагин интегрирует контактные формы сайта с сторонними сервисами, например Google Docs
- Contact Form 7 Dynamic Text Extension - специфический плагин, добавляющий новый тип поля — динамичное содержание (есть скрытое и открытое поле)
- Contact Form 7 Tiny MCE - плагин добавляет визуальный редактор в контактную форму
- Contact Form 7 Skins - плагин для оформления внешнего вида контактных форм CF7...
На этом все! Кому помог, благодарственные комментарии приветствуются!