Contact Form 7: от первого знакомства до мельчайших настроек

Приветствую, уважаемые читатели. Что-то углубились мы в дебри социальных кнопок и виджетов, совсем забыв про дела насущные — настройку и оптимизацию сайта. Сегодня хочу слегка наверстать упущенное, рассказав про замечательный плагин Contact Form 7. Как понятно из названия, он используется для организации обратной связи. А вот что удивительно — так это его популярность: более миллиона скачиваний! Что же особенного в данном расширении? Давайте разбираться.

Пожалуй, это самая полная русскоязычная статья по Contact Form 7. Из нее вы узнаете:

  1. О преимуществах плагина;
  2. Как создать новую форму;
  3. Как настроить шаблон, письмо и уведомления;
  4. Назначение полей, их дополнительные параметры;
  5. Как добавить готовую форму на сайт;
  6. Использование сторонних сервисов для эффективной работы;
  7. На десерт — полезный БОНУС: руководство по изменению дизайна формы.


Нужна ли вашему сайту обратная связь?

Первым делом, зачем вообще нужны эти сложности? Можно ведь просто указать email, Skype, ICQ, разместить виджет Вконтакте (и других соцсетей) со ссылкой на свою страницу и ждать результатов.

Вот только простота — залог успеха. Будет ли посетитель копировать адрес, лезть в почтовый клиент или, еще хуже, устанавливать возможно отсутствующий на его устройстве Скайп? Стоит ли вся эта возня контакта с вами? Особенно обидно ресурсам, оказывающим коммерческие услуги, терять клиента из-за такой ерунды.

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

Контактная форма, форма обратной связи для сайта 1

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

Возможности

  1. Широкая область применения: обратная связь, опросы, анкеты, резюме, техподдержка, формы заказа и многое другое — была бы фантазия;
  2. Создание нескольких форм с дальнейшим управлением ими;
  3. Интеграция с сервисами Akismet и reCAPTCHA для защиты от спама;
  4. Возможность менять оформление (правда только вручную);
  5. Больше десятка различных полей под любые задачи: от стандартных текстовых до прикрепления файлов и тестовых вопросов;
  6. Гибкость настроек каждого блока — помимо основных параметров можно вручную прописать дополнительные: размеры, различные условия, упрощенное заполнение для зарегистрированных пользователей и прочие.



Как создать новую форму в Contact Form 7


красивая форма обратной связи, contact form 7, настройка contact form 7

Contact form в админке

После установки плагина в панели инструментов админки WordPress появится одноименная вкладка, включающая в себя разделы:

  • Формы. Здесь находятся ссылки на необходимую документацию, а также полный список созданных элементов с поиском и возможностью их редактировать, копировать, удалять. В списке даже присутствует одна готовая форма — простенький блок обратной связи (имя, email, тема, текст). Для страницы контактов обычного сайта/блога ее вполне достаточно: универсальное оформление, все необходимые поля;
  • Добавить новую — собственно редактор для тех, кому стандартное решение не подошло. Его подробно рассмотрим далее;
  • Integration — объединение со сторонними сервисами. К плагину можно подключить дополнение reCaptcha, чтобы защититься от спама. Удобнее всего это выполнить на данной странице.
красивая форма обратной связи, contact form 7, настройка contact form 7

Интерфейс редактора Contact Form 7

После нажатия кнопки «Добавить новую» предлагается выбрать язык, затем мы попадаем в редактор. Здесь находятся поле для ввода названия («Enter title here») и 4 вкладки:

  1. Шаблон;
  2. Письмо;
  3. Уведомления при отправке;
  4. Дополнительные настройки.


Настройка шаблона

Этот раздел предлагает отредактировать внешний вид формы: добавить поля, текст и другие элементы. На первый взгляд, это кажется неимоверно запутанным, но на самом деле не все так страшно. Текстовое поле изначально содержит параметры той стандартной формы, о которой мы говорили. Сотрем их и начнем с нуля, чтобы как следует все понять.

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

красивая форма обратной связи, contact form 7, настройка contact form 7,

В Contact Form 7 есть больше десятка полей — под любые задачи.

Итак, какие поля нам предлагает Contact Form?


Text

Строка для ввода любой текстовой информации: имени, фамилии, темы письма, других данных.

В настройках ставим галочку напротив «Required Field», если ее заполнение является обязательным. Далее задаем «Имя» (можно оставить как есть или придумать свое — на странице с готовой формой оно фигурировать не будет) и «Значение по умолчанию». Отметка возле «Use this text as the placeholder of the field» сделает данные, введенные вами в строчку «Значение…», видимыми постоянно. Другими словами, пользователь увидит в самом поле подсказку, что писать.

красивая форма обратной связи, contact form 7, настройка contact form 7,

Опции поля «text»

Еще два поля — id и class — не являются обязательными к заполнению. «Id Attribute» — уникальный идентификатор, а «Class Attribute» редактирует внешний вид. Вопреки первому впечатлению, менять оформление в Contact Form можно — просто придется прописывать все вручную.

Важно: параметры id, class, required field, имя и значение по умолчанию являются универсальными, то есть аналогичные настройки встречаются у всех остальных полей. Запомните их значения.

Параметры заданы? Отлично! Жмем «Insert tag», добавляя первую строчку нашей формы.

Email, Url, Tel

Поля для ввода электронного адреса, ссылки и телефонного номера. Окна с параметрами для этих блоков абсолютно идентичны настройкам text (разве что у tel отсутствует проверка с помощью Akismet), так что не будем заострять на них внимание.

Number

красивая форма обратной связи, contact form 7, настройка contact form 7,

Опции «Number»

Строка «Number» предназначена для ввода числовых значений. Сложно представить, зачем это может понадобиться на стандартной странице контактов, но вот для создания опроса для сайта, анкеты или резюме пригодится. Помимо стандартных настроек, вы можете задать диапазон допустимых чисел (Range) и выбрать интерфейс поля: карусель (Spinbox) или шкала-слайдер (Slider).

Date

Элемент «Date» позволяет пользователю ввести дату — незаменимая вещь для все тех же анкет и резюме. В настройках можно указать минимальную и максимальную границу (Range).

Text area

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

Drop-down menu

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

красивая форма обратной связи, contact form 7, настройка contact form 7,

Drop-down menu

В настройках необходимо заполнить поле «Options», указав список вариантов (по одному на каждой строчке). Параметр «Allow multiple selections» задает возможность выбрать несколько ответов, «Insert a blank item as the first option» добавляет в список пустое поле.

Checkboxes

красивая форма обратной связи, contact form 7, настройка contact form 7,

Настройки Checkboxes

Checkboxes — флажки, галочки, которыми отмечается выбранный ответ. В окошке «Options» перечисляем все варианты. Далее решаем,  что размещать первым: ответ или флажок («Put a label first, a checkbox last»). Галочками обычно отмечать можно несколько вариантов: параметр «Make checkboxes exclusive» изменит условия, сделав допустимой лишь одну отметку.

Radio buttons

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

Acceptance

красивая форма обратной связи, contact form 7, настройка contact form 7,

Настройка блока «Acceptance»

Кнопка «Принять» знакома каждому по типичным пользовательским соглашениям, которые нельзя пролистать, пока не поставил галочку «Согласен». Уникальных опций всего две: «Make this checkbox checked by default» сделает флажок установленным по умолчанию, а «Make this work inversely» — задаст обратный принцип работы, т.е. кнопка отправки будет неактивной, пока не галочка не снята.

Quiz

Стандартная борьба со спамом включает использование других плагинов (reCAPTCHA, Akismet). Многих людей раздражают неразборчивые картинки капчи, плюс ее использование иногда технически невозможно. Quiz — это простая замена капчи: устанавливается вопрос/пример, на который надо ввести верный ответ, чтобы сообщение отправилось.

красивая форма обратной связи, contact form 7, настройка contact form 7, Quiz

Quiz

Контрольный вопрос и ответ вводится в область «Options», между ними ставится знак «|». Допускается использование нескольких заданий (указывайте по одному в каждой строке) — они будут задаваться в случайном порядке.

File

красивая форма обратной связи, contact form 7, настройка contact form 7, file

Опции загрузки файлов

Наша форма допускает прикрепление файлов, сделать это можно с помощью данного блока. В опциях указываем допустимые форматы и максимальный размер «File size limit » (по умолчанию в байтах, можно прописать kb, mb).

Submit

Кнопка отправки сообщения завершает наши танцы с бубнами вокруг каркаса формы обратной связи. Все, что требуется — вписать «Ярлык», т.е. надпись на кнопке.

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

красивая форма обратной связи, contact form 7, настройка contact form 7,

Стандартные пояснения


Дополнительные параметры

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

Например, у текстовых полей можно изменить размер, добавив параметры:

  • minlength:нужное_значение, maxlength:число — это минимальная и максимальная длина;
  • size:здесь_пишем_циферки;
  • высота×ширина — размер textarea (вместо слов подставляем свои числа).

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


default:user_login;

default:user_first_name;

default:user_last_name;

default:user_nickname;

default:user_display_name;

default:user_email;

default:user_url.

Элементам, связанным с числами и датами можно задать условие step:ваше_число. Оно укажет, в скольких шагах от минимального значения должны находиться вводимые данные. Например, для step:3 это 10, 13, 16, 19…

Для чекбоксов и меню предусмотрено 3 опции:

  • default:номер(а) — один или несколько вариантов изначально отмечены галочками;
  • free text — в конце списка появится поле для свободно ответа;
  • data:название — загрузка данных из Listo (подробнее о сторонних сервисах см. в «Других возможностях»)

Для Quiz тоже можно задать величину блока. Достаточно указать: размер/максимальная_длина.


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

С шаблоном разобрались. Спешу вас обрадовать: самое трудное позади, нам осталось сделать всего пару штрихов.

красивая форма обратной связи, contact form 7, настройка contact form 7,

Не забудьте указать в настройках письма свои данные

Во вкладке «Письмо» большинство настроек сделано по умолчанию. Помните параметр «Имя» в опциях полей? Вам нужно заменить [your-name], [your-email], [your-subject], [your-message] на названия, которые указали в шаблоне. Ниже находится галочка «Письмо 2» — при активации копия послания будет улетать в почтовый ящик отправителя. На мой взгляд — лишняя функция, но если выберете, не забудьте сменить теги и для него.

красивая форма обратной связи, contact form 7, настройка contact form 7, уведомления

Уведомления при отправке формы

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


Как добавить форму на сайт

Форма готова. Что теперь?

красивая форма обратной связи, contact form 7, настройка contact form 7,

Шаг 1. Копируем код

Как только нажмете на кнопку «Сохранить», сверху появится строка с шорткодом. Скопируйте его.

красивая форма обратной связи, contact form 7, настройка contact form 7, Контакты

Шаг 2. Вставляем код на страницу контактов

Теперь отправляемся в раздел админки «Страницы». Нажимаем «Добавить новую», указываем все необходимые данные и вставляем код формы. Это работает в обоих редакторах: визуальном и текстовом.

Важно: обязательно отправьте пробное сообщение самому себе, чтобы убедиться, что все работает.

Мои поздравления! Теперь у вас есть надежная связь с читателями.

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


Другие возможности плагина

Contact Form тесно связан со многими дополнениями и сервисами: от красочных дат-календариков до готовых скинов. Вы можете использовать их или нет, но возможности с плагинами сильно расширяются. Расскажу про несколько из них.

Listo

Здорово, когда у вас есть список из 5-10 ответов, добавить которые в редактор не составит труда. А что, если вариантов сотня? Создание формы грозит превратиться в головную боль.

Поэтому разработчик создал дополнительное расширение Listo, имеющее готовые списки. Например, все страны мира, валюты или (внезапно) штаты США (автор обещает расширять перечень). Установите «Листо», добавьте опцию data:нужный_список в код поля и получите результат. Параметр работает только с кнопками «checkboxes», «radio buttons», «drop-down menu».

reCAPTCHA

красивая форма обратной связи, contact form 7, настройка contact form 7, reCAPTCHA

Настройка капчи

Для использования reCAPTCHA нужно зарегистрировать сайт, получить 2 ключа. Затем во вкладке «Integration» жмем на «Configure Keys» и указываем эти пароли. Блок капчи вставляется в форму соответствующей кнопкой «Шаблона».

Google Analytics

красивая форма обратной связи, contact form 7, настройка contact form 7, Google Analytics

Связываем форму с Google Analytics

Для удобства анализа использования формы вы можете воспользоваться Гугл Аналитикс. Прежде всего, нужно зарегистрировать сайт и добавить на страницы код счетчика. Затем отправляемся в настройки, вкладку «Additional Settings». Там, если вы используете новейшую Universe Google Analytics, пропишите строчку:


Код для старой версии:


Новые данные появятся в Гугл в течение 48 часов, найти их можно в разделе «События».

красивая форма обратной связи, contact form 7, настройка contact form 7, Google Analytics 2

Данные находятся в разделе «События»

Flamingo

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

красивая форма обратной связи, contact form 7, настройка contact form 7, Flamingo

Flamingo

После установки сбоку в панели инструментов появится одноименный раздел со списком посланий и адресной базой отправителей.


Как сделать классное оформление в Contact Form 7?


Вы решили сделать страницу контактов, но стандартное оформление не подходит к стилю проекта и вызывает уныние?

Все поправимо!

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

Ну что, готовы? Поехали.

Внешний вид формы состоит из 3 элементов:

  1. общий фон;
  2. поля;
  3. кнопка.

Поля по умолчанию имеют универсальное оформление, подходящее к любому дизайну. Но если вам нужно сделать что-то особенное, нужно при добавлении поля заполнить графу «Стили CSS»: прописать там название поля (например, form_field). Теперь открываем файл style.css и добавляем в конце оформление form_field. Например, такое:

Содержимое скобок {} замените на нужное вам.

Кнопка, в теории, меняется так же, как и поле. По крайне мере, графа «Стили CSS» в настройках имеется. Но в моем случае на манипуляции с данным полем кнопка совершенно не реагировала, поэтому пришлось искать обходной путь. Если у вас тоже не срабатывает добавление стиля для нее стандартным способом, воспользуйтесь такими строчками:

где вместо background впишите нужные вам стили. В этом случае при добавлении кнопки в редакторе формы уже не нужно ничего вписывать в поле «class».

Внесу еще пять копеек, добавив мини-гайд по изменению фона контактной формы.

Нам понадобится фоновое изображение. Я использовала картинку 1000х500px. Заливаем ее на сайт: в админке ищем раздел «Медиафайлы—>Добавить новый». Копируем url файла.

В файл style.css («Внешний вид—>Редактор») добавляем такой блок:


где border-radius отвечает за скругленные уголки, border — рамка, solid grey — ее цвет, box-shadow — тень, отбрасываемая рамкой, background — путь к нашей картинке, repeat-y — заставляет фон повторяться по вертикали, padding — отступ блоков и текста от краев рамки. Значения всех этих элементов вы можете корректировать в зависимости от своих нужд.

Фоновый блок добавили, теперь нужно вставить его в редактор. Открываем вкладку «Шаблон» и пишем следующие строчки:

Заключение

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

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

© 2015 — 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

20 комментария(ев) на “Contact Form 7: от первого знакомства до мельчайших настроек

  1. Если опуститься еще ниже, то можно увидеть настройки сообщений. Здесь всё на русском, поэтому можете править под свои нужды, как хотите. Здесь думаю сами разберетесь

    [Ответить]

  2. А как сделать перенаправление с кнопки отправить на страницу оплаты какой-либо платежной системы?

    [Ответить]

    Marie Reply:

    Интеграции с какой-либо платежной системой, насколько я понимаю, у плагина нет. Но перенаправление сделать можно. О том, как сделать редирект на определенный url после отправки формы, разработчик подробно рассказывает в этой статье: http://contactform7.com/redirecting-to-another-url-after-submissions/ . Если вкратце, то нужно в разделе Дополнительных Настроек добавить такую строчку:

    где вместо example.com будет адрес нужной страницы.

    [Ответить]

  3. Ol:

    Добрый день!
    Если попытаться изменить текст Уведомлений при отправке форме, то выяснится, что применение html здесь запрещено. А так хочется воткнуть!
    Как быть?

    [Ответить]

    Marie Reply:

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

    Откройте файл css через админку («Плагины—>Редактор—>Contact Form 7—>Contact-Form-7/wp-contact-form-7—>Contact-Form-7/includes/mail—>Contact-Form-7/includes/css/style.css») или из корневого каталога («Wp-content—>Plugins—>Contact Form 7—>includes—>css—>ctyle.css») и найдите там стили, отвечающие за нужное Вам уведомление. Например, div.wpcf7-mail-sent-ok отвечает за уведомление об успешной отправке.

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

    [Ответить]

    Ol Reply:

    Marie, не совсем понял что мне даст styles.css, если я хочу свой текст более удачно по строкам разбить (а не выводить все в одной строке), например, вставив в конец каждой строки br?

    [Ответить]

    Marie Reply:

    Прошу прощения, я не так поняла Ваш вопрос. Вот здесь: http://contactform7.com/admin-screen/ разработчик сообщает, что использовать html-теги в уведомлениях невозможно. Так что похоже, что никак.

    Ol Reply:

    Данная проблема решается следующим образом, не самым удачным, но тем не менее.

    Ищем файл: wp-content/plugins/contact-form-7/includes/contact-form.php
    Там есть такая функция: public function message( $status, $filter = true )
    Нашли? Если что, строка 653.
    Берем и ставим $filter = false
    И проверка html отключена! Пишем в Уведомлениях при отправке формы что угодно. Не смотря на ругательства, html будет выведен.

    Но это же дурно! Плохо это! Гадко! Подло, я бы сказал!

    Поэтому делаем так:
    В тексте, где мы хотим вставить разрыв строки вместо тега br пишем текст str-br, а затем заменяем его при помощи preg_replace

    Вот что имеем:
    public function message( $status, $filter = true ) {
    $messages = $this->prop( ‘messages’ );
    $message = isset( $messages[$status] ) ? $messages[$status] : »;
    //$filter = false;

    if ( $filter ) {
    $message = wp_strip_all_tags( $message );
    $message = wpcf7_mail_replace_tags( $message, array( ‘html’ => true ) );
    $message = apply_filters( ‘wpcf7_display_message’, $message, $status );
    }
    // Вот оно, чудо-то чудесное!
    // Поскольку html и здесь срезается имеется ввиду что
    // тег br заключается в соответствующие скобки, ну как это обычно пишется.
    $message = preg_replace (‘/str-br/’, ‘br’, $message);
    return $message;
    }

    [Ответить]

    Ol Reply:

    НО!!!
    Примечание: тег br (второй аргумент preg_replace) заключен в стандартные скобки тега «», поскольку html на этом сайте запрещен и будет обрезан.

    1) Для начала разрешаем html ($filter = false;)
    2) Отключаем замену (//$message = preg_replace (‘/str-br/’, ‘br’, $message);)
    3) Сохраняем contact-form.php
    4) Редактируем Уведомления при отправке формы
    5) Сохраняем форму
    6) Включаем замену ($message = preg_replace (‘/str-br/’, ‘br’, $message);)
    7) Запрещаем html ($filter = true;)
    8) В редактирование Уведомления при отправке формы БОЛЬШЕ НЕ ЛЕЗЕМ! Для редактирования начинаем с шага 1 !!!

    Лучше ничего не придумалось, икскюзьми плизз!

    [Ответить]

    Marie Reply:

    Ol, спасибо Вам за упорный поиск решения)

  4. Ol:

    Marie, буду рад, если это окажется кому-нибудь полезным!

    Желаю Вам всех благ, отличного настроения и удачи во всем!
    Ol Egorow

    [Ответить]

  5. Очень подробная статья без воды!) Спасибо!

    [Ответить]

  6. eslo:

    красиво вышло спасибо

    [Ответить]

  7. Почему-то кнопка «отправить» уродски маленькая… нужно или её увеличить или заменить на картинку… помогите плиз… буду благодарен ответу на е-мэйл :)

    [Ответить]

  8. Альберт:

    Здравствуйте!
    Подскажите, пожалуйста, как в редирект на другую страницу (по on_sent_ok) вставить текущие дату-время, типа «201701311835»?
    Спасибо

    [Ответить]

  9. Альберт:

    Здравствуйте!
    Подскажите, пожалуйста, как в редирект на другую страницу (по on_sent_ok) вставить текущие дату-время в виде числа, типа «201701311835»?
    Спасибо.

    [Ответить]

  10. Диментий:

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

    [Ответить]

  11. Сергей:

    Добрый день!
    Расскажите как можно изменить стиль кнопки «выберите файл» для отправки
    Чет никак не могу сообразить

    Спасибо

    [Ответить]

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

    [Ответить]

  13. eslo:

    Все хорошо и понятно но вот как сделать по горизонтали типо Имя — Телефон +7— Заказать

    [Ответить]

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

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

19 − 13 =