Полное руководство по Contact Form 7

Настройка Contact Form 7 — популярного бесплатного WordPress-плагина обратной связи с посетителями Вашего блога или магазина. Подробная инструкция по установке, интеграции и расширению, советы по оформлению внешнего вида формы, исправлению ошибок.

Установка плагина

1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.

contact form 7 установка
Установка плагина Contact Form 7 из админки WordPress

2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.

contact form 7 плагин

Вывод на сайте

После активации в админке откройте раздел Contact Form 7.

формы contact form 7
Список форм

В списке уже есть готовая форма. Вы можете создать их сколько нужно. Для каждой автоматически создается уникальный шорткод. Чтобы показать форму на сайте, его нужно вставить в редакторе контента или в шаблоне темы. Для примера выведем на отдельной странице.

1. Кликните Страницы > Добавить новую.

добавление формы contact form 7
Создание новой страницы на сайте WordPress

2. Укажите название (например Контакты).

3. Скопируйте шорткод.

шорткод contact form 7
Шорткод формы

4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.

cf7 добавление шорткод
Блок Шорткод

В итоге пользователь увидит:

форма contact form 7
Страница с формой CF7

Как создавать формы

Перейдите Contact Form 7 > Добавить новую.

Создание контактной формы

CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нажмите кнопку нужного элемента.

В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:

  • элементы HTML (позволяют создать произвольную HTML-структуру),
  • шорткоды плагина (добавляют элементы формы).
Символом "*" отмечены обязательные к заполнению поля.
элементы формы contact form 7
Элементы формы в Contact Form 7
Если вы пока не определились с полями, оставьте как есть. К ним сможете вернуться позже.

Настройка письма

Когда заполненная пользователем форма обратной связи будет отправлена, администратор сайта получит email-уведомление. В нем указано имя посетителя, контакты и текст сообщения. Вы можете настроить формат этого уведомления. Для этого откройте вкладку Письмо.

contact form 7 письмо
Настройка формата письма

Тут можно использовать имена полей. Например, есть поле [text* telephone]. Если в письме вписать [telephone], на его месте поставится номер телефона, который ввел пользователь.

В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.

Настройка уведомлений

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

Настройка уведомлений при отправке формы

Интеграция reCaptcha

В плагин уже встроена система спам-защиты от Google. Установим последнюю версию - v.3. Чтобы ее добавить, следуйте простой инструкции.

1. В браузере наберите https://www.google.com/recaptcha/admin/create

2. В опции Ярлык введите произвольное название, отметьте reCAPTCHA v3, в настройке Домены укажите имя сайта, примите Условия использования и кликните Отправить.

contact form 7 капча
Добавление reCAPTCHA на сайте Google

3. Скопируйте ключи.

защита от спама

Ключи reCAPTCHA

4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.

Настройки интеграции в плагине

5. Добавьте скопированные ключи, сохраните изменения.

contact form 7 recaptcha
Для Капчи v.2 нужно вставить тег [recaptcha]. В последней версии нет дополнительных полей.

Установка целей метрики

В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.

1. В Метрике зайдите Настройка > Цели > Добавить цель.

contact form 7 метрика
Настройка цели в Яндекс-Метрике

2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.

contact form 7 цели
Настройка цели в Яндекс-Метрике

3. Добавьте в файл functions.php активной Ворпресс-темы код

add_action( 'wp_head', 'add_yandex_target' );
function add_yandex_target() {
    ?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            if ( '999' == event.detail.contactFormId ) {
                ym(555, 'reachGoal', 'wptest_form'); return true;
            }
        });
    </script>
    <?php
}

Замените 999 на ID формы, 555 - на Номер цели, а wptest_form - на идентификатор события в Метрике.

ID формы можно посмотреть, если открыть ее на редактирование.

Редактирование формы

Готовые шаблоны

Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.

Плагин Contact Form 7 Style

Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.

Чтобы задать внешний вид форме:

  • выберите форму;
  • перейдите на вкладку Contact Form 7 Style Template;
  • используя стрелки, выберите дизайн.
Применение шаблона к выбранной форме в Contact Form 7

Решение проблем и исправление ошибок

Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.

Не отправляются письма

Тут может быть несколько проблем:

  • электронные письма не отправляются вообще;
  • попадают в СПАМ.

Их причины:

  • неправильные настройки сайта;
  • ограничения на хостинге.

Как исправить?

Чтобы заставить работать почту, есть несколько способов.

1. Стандартные настройки

Откройте вкладку Письмо в своей форме и в опции Кому проверьте, правильно ли указан адрес. Он должен быть рабочим.

2. WP Mail SMTP

Если ваш хостинг ставит жесткие ограничения на отправку писем или запрещает их вообще, тогда нужно стороннее решение. Такое бывает, если использовать почтовые ящики, созданные на хостинге.

Рассмотрим универсальный вариант - бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.

  1. Создайте ящик на Gmail.com.
  2. Установите WP Mail SMTP.
  3. Откройте Настройки > WP Mail SMTP.
  4. Заполните поля От (email) и От имени.
    Настройка плагина WP Mail SMTP
  5. В опции Метод отправки почты отметьте Прочие SMTP.
  6. Заполните:

    SMTP сервер - smtp.gmail.com
    Шифрование - TLS
    SMTP порт - 587
    Авторизация - ВКЛ
    Имя пользователя SMTP - контактный email
    Пароль SMTP - пароль к ящику
  7. Чтобы проверить работу почты, откройте вкладку Проверка почты и нажмите Отправить email. В ящике должно быть тестовое письмо.
    Отправка тестового письма в плагине WP Mail SMTP

Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.

3. Код

Использовать SMTP можно без плагина, с помощью кода в functions.php.

function cf7_setup_phpmailer_init( PHPMailer $phpmailer ) {
    // Хост почтового сервера
    $phpmailer->Host = 'smtp.gmail.com';
    // Номер порта 
    $phpmailer->Port = 465;
    // Имя пользователя для SMTP авторизации 
    $phpmailer->Username = 'wptester54@gmail.com';
    // Пароль пользователя для SMTP авторизации 
    $phpmailer->Password = 'password'; 
    // Включение/отключение шифрования
    $phpmailer->SMTPAuth = true; 
    // Тип шифиования (ssl или tls)
    $phpmailer->SMTPSecure = 'ssl'; 
    // Обратный Email
    $phpmailer->From = 'wptester54@gmail.com'; 
    // Название сайта в поле От
    $phpmailer->FromName = get_bloginfo( 'name' ); 
    $phpmailer->IsSMTP();
}
add_action( 'phpmailer_init', 'cf7_setup_phpmailer_init' );

В коде нужно вписать свой email-адрес и пароль.

Добавь в закладки и поделись с друзьями:

⭐⭐⭐⭐⭐