Контактные формы с плагином Contact Form 7

Взаимодействие с посетителями стало неотъемлемой частью продвижения. Поисковики обращают внимание на наличие формы обратной связи. А пообщаться с читателями, узнать их мнение о творчестве, услышать советы порой просто необходимо.

Рекомендуем воспользоваться отличным бесплатным плагином Contact Form 7 для WordPress. Он позволяет создавать контактные формы практически любой сложности всего за несколько шагов. Плагин гибок и удобен в настройке. В результате вы сможете организовать связь с посетителями веб-сайта без публикации своих данных в широкий доступ.


Преимущества и особенности

  • дата последнего обновления: 7.12.2020 г.
  • совместим с WordPress от 5.4 и выше;
  • хорошая гибкость при настройке;
  • есть русскоязычная версия;
  • подробная документация, но только на английском языке;
  • более 5 миллионов скачиваний;
  • совместим с CAPTCHA, Akismet, Flamingo, Bogo;
  • пользовательский рейтинг: 4,1.

Пошаговая инструкция установки и настройки

Настройка плагина вызывает у многих пользователей трудности. Но все интуитивно понятно и достаточно просто. Давайте вместе по шагам пройдем путь от установки плагина до настройки дополнительных приложений.

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

Начнем с установки плагина. В админ-панели сайта из бокового меню зайдите в раздел плагины. Затем на вкладку «Добавить новый». Ведите в поисковую строку название дополнения.

Сначала нажмите кнопку «Установить» в карточке, а затем «Активировать».

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

После активации в панели управления слева появится пункт меню «Contact form 7». При нажатии раскроется подменю. Плагин позволяет делать бесконечное число форм. Для создания выберите «Добавить новую».

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

В области ниже будут появляться поля, которые в данный момент выбраны и показываются посетителям. Перед редактированием формы рекомендуем прочитать инструкцию «Правка шаблона формы».

В ней сказано, что для редактирования можно использовать HTML-теги (соблюдая синтаксис, представленный в документации) либо уже готовые шорткоды плагина.

Разберем предложенный разработчиком синтаксис, чтобы вручную создавать свои теги.

Составляющие тег компоненты делятся на 4 части: тип (type), имя (name), параметры (options) и значение (value). Их порядок очень важен, нельзя ничего поменять местами.

  • «тип» является важным составляющим, потому что определяет, какие данные будут передавать через это поле;
  • «имя» используется для идентификации. У большинства необходимых полей уже есть назначенные имена;
  • «параметры» – это не обязательная опция. Определяет внешний вид и детали поведения поля;
  • «значение» отвечает за ввод данных по умолчанию. Т.е. в этом поле возможен выбор только заранее указанных значений.

Символом «*» можно пометить поля обязательные для заполнения.

Перейдем к настройке письма, которое будет приходить на email администратора после заполнения формы. Мы можем изменить формат этого уведомления. Для редактирования нажмите на вкладку «Письмо».

Разберем каждое поле:

  • «кому» добавьте рабочий email администратора, куда будут приходить письма;
  • «от кого» – не нужно трогать;
  • «тема» задает тематику, используя почтовые теги;
  • «дополнительные заголовки» предназначены для прочих тем, сюда можно вставлять любые теги, но каждый с новой строки;
  • «тело письма» будет содержать данные из формы, которые введет пользователь.

Обратите внимание, если вы в шаблоне форме добавили новые поля, то скопируйте шорткод во вкладку письма. В противном случае они не отобразятся.

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

Создание сложной формы

В предыдущем пункте разобрали простой (стандартный) вариант. А теперь подробнее разберем каждый из предложенных типов полей для ввода.

По порядку расшифруем каждый из готовых шорт-кодов:

  • «текст», «текстовая область» – простые текстовые поля, различаются количеством строк для ввода;
  • «email», «URL», «телефон» – данные, вводимые в эти поля, соответствуют названиям;
  • «номер», «дата» – числовые поля, ввод возможен только цифрами и в определенном порядке;
  • «в раскрывающемся меню», «чекбокс», «радио-кнопка» предназначены для выбора заготовленных вариантов ответов;
  • «принятие» – флажок для согласия с правилами;
  • «опрос» – понятно из названия, размечается в формате Вопрос|Ответ;
  • ·         «файл» предназначен для загрузки и отправки документов различных форматов (gif, png, jpg,doc, txt и др.) весом не более 1 мб.

Совместимость с плагинами

  • Flamingo создан этим же автором. CF7 не сохраняет письма и данные пользователей, поэтому вы можете случайно удалить или потерять нужные сообщения. Flamingo же сохраняет их в базе данных;
  • Contact Form 7 Style – это аддон для придания пользовательского стиля. В базовой версии есть несколько готовых шаблонов оформления;
  • Akismet и reCAPTCHA помогут защититься от спама с помощью фильтров и умной капчи. А для запрета комментариев с определенными словами можно воспользоваться стандартным средством WP «Запрещенные ключевые слова». Для их создания перейдите в левом меню в пункт «Настройки» затем «Обсуждение»;
  • Bogo предназначен для воплощения многоязычности. Один из лучших в данной категории. Отлично переводит на различные языки административную панель, сайт в целом и отдельные страницы, а также форму связи.

Уведомление о конфиденциальности

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

Но если активировать сторонние приложения (reCaptcha, Akismet), то личные данные могут стать известны третьим лицам. В том числе все, что пользователи ввели в контактную форму, а также IP-адреса. Поэтому рекомендуют оформить «политику об обработке персональных данных».

Интеграция reCaptcha

Спамеры атакуют любые сайты не зависимо от их размера, возраста и популярности. Для своих целей зачастую выбирают комментарии и формы. Поэтому в плагин уже встроена система спам-защиты от Google.

Давайте перейдем к настройке:

  • найдите в боковом меню раздел CF7 и подменю «Интеграция»;
  • в верхнем углу карточки есть ссылка на официальный сайт Google recaptcha;
  • переходим по ссылке;
  • здесь представлено краткое описание сервиса;
  • нажмите на кнопку Аdmin console для авторизации в своём аккаунте Гугл или создания учётной записи;
  • после авторизации в личном кабинете найдите значок «+» для добавления ресурса;
  • заполните все необходимые поля:
    • «ярлык» – идентификатор капчи для вашего удобства;
    • «тип» – разработчик советует выбирать последнюю версию v3 с автоматическим распознаванием роботов;
    • далее укажите домен сайта и согласитесь с правилами пользования;
  • в результате вам должны выдать ключ сайта и секретный ключ;
  • сохраните их в файле или пока что оставьте открытой эту вкладку;
  • вернитесь к «Настройке интеграции» и скопируйте в нужные поля предоставленные ключи;
  • сохраните изменения.

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

Установка целей Я.Метрики

Хотите отслеживать поведение посетителей своего сайта и смотреть статистику конверсий по заполнению формы связи? Тогда на помощь вам придет Яндекс.Метрика. Нужно проделать всего 4 шага.

  • откройте Яндекс.Метрику и зайдите в настройки нужного счётчика;
  • в боковом меню найдите «Цели» и создайте новую;
  • напишите понятное название, поставьте тип JavaScript-событие, укажите Id для отслеживания событий;
  • измените файл functions.php активной Ворпресс-темы добавив код;
  • в коде замените IDForm на ID формы (его можно посмотреть при редактировании) , ID.ya – на Номер счетчика в метрике, а wptest_form – на идентификатор в Я.Метрике.

Изменение внешнего вида

Стандартное оформление в CF7 не отличается грандиозным дизайном. Чтобы форма вписывалась в сайт желательно изменить внешний вид. Для этого можно было бы дописать css код. Но проще установить официальное дополнение CF 7 Style. В нем есть готовые шаблоны, которые можно выбрать для своего сайта.

Дизайн применяется в режиме редактирования формы:

  • выберите нужную форму и перейдите к изменению;
  • щелкните на вкладку CF7 Style Template;
  • при помощи кнопок стрелок, выберите и активируйте подходящее оформление из 12 вариантов;
  • сохраните результат.

Кроме того, с помощью аддона можно менять представленные шаблоны под себя через CSS editor, а также добавлять новые.

Как вставить на сайт

После прохождения всех предыдущих шагов можно вставить готовую форму на сайт. Для этого создайте новую страницу или запись. Затем на панели приложения CF 7 найдите и скопируйте уникальный шорткод формы.

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

Аналогичным способом форма добавляется в боковую панель (через виджеты), статьи, футер и т.д.

Решение частых проблем

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

Она на английском языке, но даже со стандартным переводчиком браузера все вполне понятно.

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

Может быть несколько вариантов данной проблемы:

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

Существует два пути исправления:

  • стандартные настройки;
  • проверьте вкладку “Письмо” (через редактирование формы) чтобы в опции “Кому” был правильно указан рабочий email-адрес;
  • особенности работы хостинга;
  • ваш провайдер может устанавливать ограничения на отправку писем.

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

  • если у вас еще нет почтового ящика Gmail.com, то создайте его;
  • установите дополнение WP Mail SMTP;
  • в меню слева найдите Mail-SMTP;
  • в поле «От» – введите свой Email ;
  • «От имени» – любое имя;
  • «Метод отправки» отметьте последнюю опцию «Прочие SMTP» ;
  • заполните:
    «SMTP сервер» – smtp.gmail.com;
    «Шифрование» – пункт TLS;
    «SMTP порт» – оставьте без изменения (587);
    «Авторизация» – оставьте без изменения (ВКЛ);
    «Имя пользователя» – свой e-mail;
    «Пароль»– укажите свой пароль от почты;
  • для проверки правильности работы во вкладке «Проверка почты» внизу страницы нажмите кнопку «Отправить email»;
  • на почту вам должно прийти проверочное письмо.

Контактная форма не показывается. Выдает ошибку 404 «Not Found».

Проверьте правильность введённого шорткода. Желательно копировать его, а не вводить вручную, чтобы не пропустить символы.

Капча не работает.

Для корректной работы CAPTCHA вы должны установить на сервер библиотеки GD и FreeType. Также удостоверьтесь, что папка CAPTCHA доступна для записи (предоставить доступ через PHP).

Загрузка файлов не работает.

Для правильной настройки нужно выполнить два шага:

  • добавить поля для загрузки файлов;
  • настроить параметры электронной почты для прикрепления загруженных файлов.

Возможно превышен максимальный размер файла. Либо формат не поддерживается. Больше информации о настройке найдете в документации.

Заключение

Мы подробно рассмотрели установку, настройку, размещение на страницах и решение проблем плагина для создания форм обратной связи Contact Form 7. И считаем его одним из самых простых и в то же время надёжных приложений. Это подтверждается высоким пользовательским рейтингом и количеством скачиваний.