Все секреты плагина Contact Form 7

Плагин-конструктор обратных форм связи для 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).

ПОЛЕЗНО  Добавить тэг ALT к изображением (там, где его нет)

Как передать данные в форму  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...
ПОЛЕЗНО  Защита wp-login

На этом все! Кому помог, благодарственные комментарии приветствуются!

источник информации

  • Иван

    Здравствуйте!
    Подскажите насчет Get-запроса.
    Если у меня форма не на отдельной странице а в всплывающем модальном окне?
    Как тогда передать данные в форму?
    У меня почти такой же пример как у вас с врачами, около 50 наименований.
    Получается надо писать скрипт, который будет по клику на кнопке вызывающей модальное окно передавать GET-параметр?

    • Roman NMSK

      привет, по идее без разницы, т.к. форма все равно физически находится на этой странице и такой ГЕТ-запрос тоже должен сработать

      • Иван

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

        • Roman NMSK

          там же ниже есть пример - как должна вызываться форма
          >/contact.htm?vrach=фамилия врача
          т.е. GET-данные должны быть в параметре url

          • Иван

            Да какая разница, в любом случае идет перезагрузка страницы. Решил проблему другим способом. На кнопку вызова модального вношу значение data-tour="название тура", при клике скрипт считывает значение и заносит в поле input с нужным id.