Форма обратной связи с помощью плагина Contact Form 7

В сентябре 2013 года я рассматривал процесс создания формы обратной связи на WordPress с помощью плагина Contact Form. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.

Вроде бы и проблемы-то нет, на самом деле. Но некоторым владельцам сайтов необходимо больше одной формы обратной связи, которые могут располагаться не только на странице «Обратная связь» или «Контакты», но и на любых других страницах или записях.

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

Форма обратной связи с помощью плагина Contact Form 7

Описание плагина

Плагин Contact Form 7 позволяет создавать множество разных форм для отправки результатов на ваш электронный ящик. Настройке поддаётся абсолютно всё — внешний вид формы, порядок полей, название надписей, формат электронных сообщений, выбор получателей ответов. В общем, плагин действительно очень функциональный и классный.

Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать сбор и хранение данных в базе вашего сайта, а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)

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

Плагин устанавливается стандартным способом в WordPress. Заходим в раздел «Плагины» — «Добавить новый», вводим название Contact Form 7 и устанавливаем его из репозитория. Не забываем активировать сразу после установки.

Настройка Contact Form 7

После активации плагина в главном меню WordPress появится новый пункт «Контакты (CF7)», это основное место настроек ваших форм обратной связи. Количество форм ничем не ограничено.
Форма обратной связи с помощью плагина Contact Form 7

Список существующих форм доступен в разделе «Contact Forms»:
Форма обратной связи с помощью плагина Contact Form 7

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:
Форма обратной связи с помощью плагина Contact Form 7

Добавление новой формы обратной связи

Как видите, каких-то особых дополнительных пунктов в меню нет, поэтому перейдём к созданию самой формы обратной связи. Для этого выбираем пункт «Добавить новую» в главном меню.

Первым делом нам предлагается выбрать язык интерфейса формы, которая будет создаваться. WordPress определяет установленную версию на вашем сайте и предлагает выбрать её по умолчанию:
Форма обратной связи с помощью плагина Contact Form 7

Но вы можете выбрать из списка любой доступный язык:
Форма обратной связи с помощью плагина Contact Form 7

После нажатия на кнопку «Добавить новую» появится конструктор формы.

Изменяем название формы

Первым делом нужно ввести название нашей формы, чтобы не потеряться в списке форм, когда их будет слишком много. Для этого достаточно нажать мышкой на слово «Заголовок» в верхней области экрана:
Форма обратной связи с помощью плагина Contact Form 7

После этого появится текстовое поле, в котором введём название с описанием:
Форма обратной связи с помощью плагина Contact Form 7

И нажмём кнопку «Сохранить».

Как только страница обновится, вы увидите следующее сообщение:
Форма обратной связи с помощью плагина Contact Form 7

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

Изменяем шаблон формы

Шаблон формы — это обычный HTML-код, который формирует внешний вид вашей формы. По умолчанию он содержит 4 поля (имя, электронный адрес, тему и сообщение) и кнопку отправки формы. Выглядит это следующим образом:
Форма обратной связи с помощью плагина Contact Form 7

Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:
Форма обратной связи с помощью плагина Contact Form 7

Или же можем удалить поле «Тема», чтобы оно не высвечивалось в нашей форме. Для этого достаточно удалить соответствующий блок текста в нашем шаблоне:
Форма обратной связи с помощью плагина Contact Form 7

«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:
Форма обратной связи с помощью плагина Contact Form 7

[subscribe_form button=»Я хочу получать материалы рассылки!»]

Как добавить новое поле в форму

Представьте, что вам необходимо в стандартную форму добавить поле с адресом сайта. Конструктор формы этого плагина позволяет безо всяких проблем реализовать задуманное. Достаточно воспользоваться кнопкой «Сгенерировать тэг»:
Форма обратной связи с помощью плагина Contact Form 7

При нажатии вывалится огромный список возможных дополнительных полей:
Форма обратной связи с помощью плагина Contact Form 7

Вам останется лишь выбрать тип нужного поля и выполнять ещё ряд простых действий.
Форма обратной связи с помощью плагина Contact Form 7

Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые :-)

Признак «Обязательное поле» позволяет установить дополнительную проверку и пока это поле будет оставаться пустым или иметь некорректное значение, форма не будет отправлена. Эта настройка есть практически у всех типов полей:
Форма обратной связи с помощью плагина Contact Form 7

Кроме этого, многие поля нашей формы имеют одинаковые настройки имени, указания ID элемента и класса CSS, через которые можно изменять внешний вид этих полей. Они присутствуют практически во всех полях:
Форма обратной связи с помощью плагина Contact Form 7

Поле «Имя» самое важное, именно оно используется и в шаблоне формы, и в шаблоне письма.

Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан :-)

Все текстовые поля в нашем конструкторе формы имеют дополнительные поля с размером самого поля и максимальной длиной значения, вот они:
Форма обратной связи с помощью плагина Contact Form 7

Так же специфические поля, типа URL или каких-то других, отличных от обычных текстовых, имеют свои особенные настройки. Например, наше поле URL имеет дополнительную настройку:
Форма обратной связи с помощью плагина Contact Form 7

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

Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:
Форма обратной связи с помощью плагина Contact Form 7

Например, я хочу разместить поле с адресом сайта после имени клиента. Мне необходимо будет ввести код по аналогии с другими полями, то есть добавить абзац, перенос строки и вставить шорткод этого нового поля:
Форма обратной связи с помощью плагина Contact Form 7

Ну и для того, чтобы значение этого поля пришло нам на электронный адрес, вот это значение нужно скопировать:
Форма обратной связи с помощью плагина Contact Form 7

И вставить в текстовое поле ниже в «Шаблон письма»:
Форма обратной связи с помощью плагина Contact Form 7

По аналогии добавляются и другие поля. Всё просто и понятно :-)

Адресат и шаблон письма

Теперь давайте рассмотрим настройки, которые учитываются при отправке сообщения. В нашем случае это получатель (практически всегда это вы и есть) и шаблон письма, которое будет приходить на указанный электронный адрес после отправки сообщения.

В первую очередь необходимо указать адресата, на чью электронную почту будут приходить сообщения с нашей формы. По умолчанию сюда подставляется электронный адрес из настроек WordPress.
Форма обратной связи с помощью плагина Contact Form 7

Я думаю вы уже обратили внимание что в этих формах используются непонятные коды, типа [your-name], [your-email]. Так вот, это то самое поле «Имя» из генератора поля, которое я рассматривал выше:
Форма обратной связи с помощью плагина Contact Form 7

Напоследок я бы рекомендовал вам установить опцию «Использовать HTML-формат письма», так вы можете сделать ваши сообщения с сайта более информативными, используя HTML при вёрстке шаблона.
Форма обратной связи с помощью плагина Contact Form 7

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:
Форма обратной связи с помощью плагина Contact Form 7

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

P.S. В настройках этого плагина есть довольно интересная возможность — указать второго адресата сообщения. Честно говоря я сходу не могу придумать зачем это может понадобиться, но раз возможность есть, то кто-то её в любом случае воспользуется.
Форма обратной связи с помощью плагина Contact Form 7

Настройка сообщений

Ну и какой же это плагин отправки сообщений, если он не позволяет изменить текст уведомлений или надписей? И плагин Contact Form 7 не исключение. Он позволяет перевести любую надпись или сообщение об ошибке:
Форма обратной связи с помощью плагина Contact Form 7

Не забудьте сохранить все изменения нажатием на кнопку «Сохранить», она в самом верху страницы :-)

Известные проблемы

Бывает так, что при использовании нестандартных контролов, типа email или url, внешний вид отдельных элементов на странице будет отличаться. Например, обратите внимание на поле «Адрес вашего сайта» в самой форме:
Форма обратной связи с помощью плагина Contact Form 7

Не увидели? А я покажу поближе:
Форма обратной связи с помощью плагина Contact Form 7

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

Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:
Форма обратной связи с помощью плагина Contact Form 7

Заключение

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

Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях :-)

Если вы хотите поблагодарить меня за материал — можете сделать это здесь :-)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Комментарии

  • Приветствую.. а можно реализовать сообщение об успешной отправке в модальном окне?

  • Контакт форм отличный плагин для обратной связи, правда в статье слабо описано взаимодействие с askimet для защиты от спама(

  • Я считаю, что Contact Form 7 на сегодняшний день лучший из предлагаемых бесплатных плагинов в своей нише. Настроек много, интерфейс достаточно понятен, дизайн без проблем можно под себя переделать. Один только минус, — это его тяжеловесность. В остальном всё супер.

  • Здравствуйте! С самим плагином и созданием форм вроде бы все понятно, но формы получаются слишком большие. А что делать если я хочу чтобы все поля (запись на консультацию) там имя, телефон, время — были в одну строчку. так то они занимают не много места, но почему-то не хотят вставать в строчку =(

    • Здравствуйте, Людмила!

      Вам следует воспользоваться тегами HTML для создания таблиц: table, tr и td, чтобы сформировать нужный вам вариант отображения.
      Например, вы можете использовать такой вариант для однострочного размещения вашей формы:
      <table>
      <tr>
      <td>Ваше имя: [здесь шорткод имени]</td>
      <td>Электронная почта: [здесь шорткод почты]</td>
      <td>Ваш вопрос: [здесь текстовое сообщение]</td>
      </tr>
      <tr><td colspan=3>[здесь кнопка отправки]</td></tr>
      </table>

  • Если в поле электронного адреса получателя анкеты «Кому» вставить свой адрес и значение [email] через запятую, то письмо также будет дублироваться и для отправителя. Так он будет уверен, что его сообщение дошло.
    Можно ли еще как-то настроить отправку письма отправителю?

    • Конечно, Мария :-)

      В настройках формы во вкладке «Письмо» в самом низу есть флажок «Письмо 2», которое как раз используется для отправки письма с подтверждением автору, который его написал. Попробуйте посмотреть эти настройки, уверен, что поможет :-)

  • Добрый день. У меня вообще вопрос нетипичный. Установлен плагин cf7, на сайте используется 10 разных форм (с разным дизайном). Так вот, а в админке отображается только 7, а 3 где-то пропали, хотя на фронтэнде сайта они показываются и работают. Как их «показать», может кто сталкивался?

    • Здравствуйте, Виталий!

      А в самой админке нет кнопок 1-2-3 снизу списка форм, чтобы перейти на вторую страницу?
      Может быть дело в каком-то из установленных плагинов, что он не показывает эти кнопки из-за ошибок.

      • Спасибо за ответ. Нету пегинации и показ ошибок включен и он чист ;( Отключал другие плагины, оставлял только этот. ситуация такая же.

    • Попробуйте ещё в разделе Contact Form 7 вашей админки в правом верхнем углу щёлкнуть по кнопке «Настройки экрана», там можно указать количество отображаемых элементов на странице. Может быть это ваш поможет как-то.

  • Здравствуйте! Что за переходы ко мне идут с сайтов gruz0.ru и —- — вы являетесь владельцем этих сайтов? Почему с них трафик редиректят на мой сайт?

  • Здравствуйте! можете подсказать, как с помощью Contact Form 7 каждой заявке присвоить номер? и второй вопрос: как сделать так, чтобы после отправки заявки поля формы исчезали и оставалось только сообщение об успешной отправке данных?

    • Добрый день, Юлия!

      Попробуйте вот этот плагин для сохранения ваших сообщений: https://wordpress.org/plugins/contact-form-7-to-database-extension/. Думаю, в ближайшее время сделаю по нему обзор в блоге.

      Во втором случае — можете привлечь программиста, который повесит событие on(‘submit’) на вашу форму для очистки полей, это самый простой вариант, как мне кажется. А вообще, лично моё мнение — удобство как раз в том, чтобы сохранять в куках текущего пользователя, т.к. ему не придётся в будущем вводить заново свои данные.

      • Спасибо за ответ!)
        1) необходимо, чтобы в шаблоне письма прописывался номер заявки, отправленного с сайта . возможно ли это сделать, с помощью плагина https://wordpress.org/plugins/contact-form-7-to-database-extension/

        2) задача заключается немного в другом. сейчас после отправки заявки с сайта сообщение об успешной отправки появляется под полями формы. многие пользователи его не видят и повторно заполняют заявку. нужно, чтобы вместо формы появлялось окно с текстом: «ваша заявка отправлена». куки очищать не нужно)

      • Александр, здравствуйте! спасибо за ответ!
        1) этот плагин поможет каждой заявке присвоить номер? то есть, чтобы в письме автоматически прописывался порядковый номер.
        2) сейчас после отправки заявки сообщение об успешной отправки данных выводится под формой. некоторые пользователи его не видят и повторно заполняют форму. необходимо, либо перенести сообщение вверх — разместить его над формой. либо окно с текстом: «Ваше сообщение отправлено» выводить ВМЕСТО полей формы. куки очищать не нужно. интересует, как изменить вывод информации. подскажите, пожалуйста, как это сделать

  • не смог нормально настроить у себя в блоге http://www.zoodogketblog.ru/ может подскажете более удобний плагин

    • На вашей теме нормально настраивается плагин, я несколько сайтов с использованием этого шаблона делал в своё время. Что именно не получилось у вас?

      • у Вас очень подробно описано как настраивать плагин но уделите пару строчек еще как его публиковать, вроде просто но я лично в этом вопросе не сразу разобрался, а теперь письма не доходят. но буду разбираться в Contact Form 7. другие плагины кажись не лучше.(((

        • А вот же прям на втором скриншоте в разделе «Настройка Contact Form 7» этой инструкции есть строка «Код для вставки», копируйте ваш код и просто вставляйте в нужную вам страницу. Он автоматически преобразуется в форму :-)

  • подскажите, пожалуйста, это нормально, что русификация плагина неполная? я устанавливаю плагин на «голую» русскоязычную последнюю версию WP, и в разделе «Уведомления при отправке формы» у меня все сообщения на английском. это нормально?

    • В прошлой версии Contact Form 7 после нажатия на кнопку создания формы, показывался интерфейс с выбором языка. Сейчас этого интерфейса нет и, якобы, настройки должны браться в зависимости от используемого языка в WordPress, но это не так. Самостоятельно в своём блоге проверил — выставил «Настройки» — «Общие» русский язык и удалил WP_LANG из wp-config.php, но на работу плагина это не повлияло.

      Мне кажется, что они в скором времени исправят эту недоработку и будет всё как прежде.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: