Приветствую вас, друзья. Сегодняшний урок поможет вашему wordpress сайту обзавестись симпатичной и функциональной формой обратной связи. Сделаем мы ее с помощью плагина Contact Form 7. В свое время я потратил немало времени на поиски нормальной контактной формы и достойной альтернативы данному плагину так и не нашел.
Возможности плагинаЕще раз напомню, что мы будем работать с плагином, поэтому, если вам нужна обратная связь без плагина, вам лучше посетить статью про , там настройка чуть посложнее, но, зато, вариант более универсальный (подойдет каждому сайту) и меньше нагружает сервера.
Главное достоинство контактной формы на Contact Form 7 в простоте ее настройки, почти неограниченной функциональности и автоматической подстройке дизайна под любые шаблоны WordPress . С ее помощью можно сделать не только форму для отправки сообщений с сайта. Плагин можно использовать для создания кнопки заказа, обратного звонка или сложной анкеты с чекбоксами и выпадающими списками. Также, есть возможность прикреплять для передачи файлы.
Одним словом, плагин мегафункциональный.
Если вас до сих пор волнует вопрос «делать или не делать форму связи?» (можно обойтись простым размещением контактных данных на нужных страницах), то я скажу однозначно – делать стоит.
Во-первых, отправлять сообщение прямо с сайта удобнее, чем открывать почтовую программу и там заполнять все вручную. Экономия времени никому не помешает.
Во-вторых, контактную форму можно настроить и это позволит вам получать письма стандартного образца – в них будет проще ориентироваться. Например, вы можете поставить стандартный заголовок для сообщения «Заказ» и все письма со страницы заказов будут приходить с таким заголовком.
В-третьих, использование контактной формы позволяет скрыть ваш адрес электронной почты и, тем самым, избавиться от возможного спама, который неизбежно появляется при попадании электронного ящика в свободный доступ.
В-четвертых, это просто стильно и современно.
Установка и настройка плагина Contact form 7Плагин есть в общей базе wordpress, поэтому нет необходимости искать где-то его файлы, скачивать их себе и потом закидывать на хостинг. Все делается проще – через админку wordpress входите в раздел плагины, набираете в поле для поиска «Contact form 7» и устанавливаете его. Если вы никогда плагины не ставили, то подробная инструкция как установить плагин .
Настройка плагина состоит из двух этапов.
Первый – это настройка конкретной формы. Разных форм может быть много, каждая из них может содержать свой набор полей. Одним словом, под каждую задачу и каждую страницу на сайте вы можете отдельно создать форму обратной связи, wordpress это позволяет – их список будет храниться в базе плагина.
Второй этап – это вставка формы на страницы сайта. Каждая форма, созданная нами внутри плагина, будет иметь собственный уникальный шорткод. Для вставки на страницу достаточно будет вставить только его.
Итак, поехали.
Для начала в левом меню панели администратора находим вкладку Contact form 7. Под ней всплывет меню с двумя пунктами – «Формы» и «Добавить новую».
Пока у нас нет готовых форм, поэтому, переходим в раздел «Добавить новую». Там откроется страница, предлагающая выбрать язык, и там же указан язык по умолчанию. Просто нажимаем синюю кнопку «Добавить новую».
Настройка формы разделена на отдельные блоки. Рассматривать их я буду по порядку.
Блок «Название формы»Первый блок отвечает за название вашей формы – поставьте курсор на надпись «Без названия» и введите нужное вам имя. Это название будет отображаться только вам в списке контактных форм плагина, так что делайте его понятным для вас, чтобы в будущем не запутаться во всем многообразии.
Изначально в этом блоке задана стандартная конфигурация полей. Она содержит имя отправителя письма, его электронный адрес, тему письма, содержимое письма и кнопку отправить.
Звездочками помечены поля обязательные для заполнения. Если такое поле оставить пустым, то сообщение не будет отправляться.
Расположение полей можно настраивать с помощью обычной html разметки.
Что касается настройки самих полей, то вы можете удалить ненужные и добавить те, которые вам потребуются. Если вы не хотите, чтобы тему письма вносили вручную – просто удалите соответствующий блок.
Добавляются поля тоже очень просто. С правой стороны есть кнопка сгенерировать тег, нажав на нее, вы увидите список всех возможных полей, которые поддерживает этот плагин.
Выберите нужный элемент и настройте его параметры. Плагин на русском, поэтому все настройки интуитивно понятны.
Первый чекбокс указывает на обязательность или необязательность поля (он добавляет звездочку).
После настройки поля у вас появятся 2 шорткода:
- «Скопируйте этот код и вставьте его в шаблон формы слева» – этот код вставляется в код формы аналогично со всеми остальными;
- «И вставьте следующий код в шаблон письма ниже» – этот код понадобится нам для оформления письма в следующем блоке.
Таким образом вы можете добавить в форму любое количество полей, чекбоксов, выпадающих списков, элементов для прикрепления файлов и т.д.
Блок «Письмо»Теперь наша задача настроить письмо, которое мы будем получать. Письмо никак не влияет на работоспособность формы обратной связи, оно служит только для передачи той информации, которую ввели в форме.
Наша задача включить в письмо всю информацию.
Первым пунктом мы указываем электронный адрес, на который будет отправляться сообщение (он может быть любым).
Вторым пунктом указывается электронный ящик, с которого письмо будет отправлено вам. Я бы ничего тут не менял, по умолчанию указан почтовый ящик вашего блога и к нему добавлен тег с именем человека, отправляющего сообщение.
Дальше мы указываем тему письма. Стандартно, тема берется из поля , которое заполняется в форме. Но можно из формы этот элемент удалить, а в поле вписать конкретную тему, задаваемую в каждом письме автоматически. Я так сделал для форм обратной связи со страниц об услугах и рекламе. Сообщения оттуда всегда приходят с одной и той же темой «Заказ услуг» или «Заказ рекламы» – просто и понятно.
Поле дополнительных заголовков содержит тег «Reply-To: » для того, чтобы при ответе на письмо, полученное с вашего блога вы отсылали сообщение на на блог, а на тот адрес, который указывал отправитель письма в поле формы . Менять это поле не стоит.
Поле «Шаблон письма» отвечает за внутреннее содержание полученного вами сообщения. По умолчанию оно содержит информацию об отправителе, теме и текст сообщения, введенный в поле .
В конце указывается сайт, с которого отправлено письмо.
Если вы вносили в форму какие-то дополнительные поля, не установленные по умолчанию, то в шаблоне письма не забудьте добавить соответствующий тег. Он был вам дан в блоке «Шаблон формы», там, где вы генерировали соответствующий тег (поле «И вставьте следующий код в шаблон письма ниже»).
Любую текстовую информацию этого блока (кроме тегов) можно менять по своему вкусу. Также вы можете добавить любые описания и менять теги местами, расставляя их в том порядке, который вам удобен.
Блок «Письмо 2»Если вы хотите, чтобы отправленное вам сообщение получал кто-то еще, то можно поставить галочку в этом блоке.
Настраивается этот блок аналогично предыдущему. По умолчанию все поля в нем заполнены для того, чтобы письмо ушло тому человеку, который заполнял форму (видимо, чтобы он не забыл).
Вы можете настроить отправку копии, например, своему менеджеру или бухгалтеру.
Блок «Уведомления при отправке формы»В этом блоке можно настроить сообщения, которые видит пользователь, после того, как он нажмет кнопку отправить сообщение. Хотите что-либо поменять – пожалуйста, я оставил все как есть.
Активация формыПосле того, как вы заполнили все поля, вернитесь в начало к блоку «Название формы» и нажмите кнопку «сохранить», расположенную справа.
Плагин поместит созданную вами форму в список действующих и присвоит ей специальный код примерно такого вида:
[ contact - form - 7 id = "5464" title = "Проверка" ] |
Вставив этот код в любое место на вашем сайте, вы получите готовую форму для общения с вашими потенциальными клиентами.
Борьба со спамом – Akismet и CaptchaСпамеры доставляют немало хлопот владельцам сайтов, а каждая новая форма, позволяющая что-то писать, только добавляет количество спам ботов.
Если вы оставите плагин контактной формы в базовом варианта, то, спустя некоторое время, будете атакованы множеством пустых и бессмысленных сообщений.
Избавиться от спамеров можно двумя способами:
Первый вариант неудобен тем, что заставляет посетителей вручную вводить дополнительные символы. Это не так сложно, но некоторым не нравится.
Использование плагина Akismet удобнее тем, что он самостоятельно анализирует вводимые данные (имена, email адреса, ссылки) и на основании наработанной базы делает выводы о спамности или неспамности сообщения.
Кроме того, akismet стоит на большинстве wordpress сайтов для защиты от спама в комментариях к статьям. Значит, при его использовании не потребуется устанавливать дополнительные плагины и создавать лишнюю нагрузку на сайт.
Защита от спама с помощью Akismet1. Устанавливаем плагин Akismet на ваш сайт и активируем его – .
2. Добавляем в теги контактной формы дополнительные данные:
- в поле с именем автора дописываем akismet:author
- в поле с email отправителя письма akismet:author_email
- в поле для адреса сайта akismet:author_url
Должно получиться вот так:
После сохранения, контактная форма должна блокировать все сообщения, отправляемые спамерами. Проверить работу фильтра можно с помощью специального тестового имени “viagra-test-123? – при его вводе должно появляться сообщение об ошибке.
Чтобы проверка была менее жесткая, вы можете проверять лишь часть полей, например имя и электронную почту, а адрес сайта оставить без проверки. В этом случае вероятность прохождения спамных сообщений увеличится, но вы с меньшей вероятностью потеряете нужные сообщения.
Защита от спама с помощью Really Simple CAPTCHAЕсли вы обнаружите, что Akismet вас не устраивает (пропускает много спама или блокирует нужные сообщения), то вы можете подключить капчу. Для этого установите плагин Really Simple CAPTCHA.
Открываем для редактирования нужную контактную форму
В списке тегов выбираем Captcha. В настройках тегов можно выбрать размер картинки с символами, в остальном ничего менять не стоит. В нижней части настроечного окна появятся 2 тега, один отвечает за вывод картинки, второй выводит поле для ввода данных с этой картинки.
Чтобы капча начала работать, необходимо скопировать и вставить оба этих тега в левое окно шаблона формы, после чего сохранить изменения.
Размещение формы обратной связи во всплывающем окнеНе всегда контактная форма должна располагаться в каком-то определенном разделе сайте, порой, клиент должен иметь возможность получить к ней доступ с каждой страницы ресурса.
В таких случаях размещать полноценную форму не всегда удобно. Гораздо проще поместить на видное место кнопку, привлекающую внимание. Нажатие этой кнопку уже должно вести к открытию формы.
Таким образом, человек сможет отправлять сообщения с сайта, не покидая нужной ему страницы.
Делается это с помощью еще одного плагина – Easy FancyBox.
1. Установка плагина
Первым делом устанавливаем сам плагин, он есть в общей базе плагинов, поэтому, достаточно в админке вашего блога в поиске плагинов ввести его название. После установки плагина в разделе «настройки» появится вкладка «медиафайлы».
В этой вкладке нужно найти перечень типов контента, который должен отображаться во всплывающем окне. По умолчанию стоит только Images, нужно добавить Inline content.
На этом настройка плагина закончена, переходим к настройке кнопки обратной связи.
2. Вставляем код на сайтВ принципе, можно использовать обычную текстовую ссылку, но кнопка-картинка будет выглядеть лучше.
На вашем сайте, там где вы хотите вывести кнопку для формы связи (в шапке, подвале или сайдбаре) вставьте следующий код:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "контактная форма" alt = " контактная форма " src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "id вашей формы" title = "название вашей формы" ] < / div > < / div > |
В коде вам необходимо указать адрес картинки, которую вы используете в качестве кнопки обратной связи, и отредактировать шорткод самой формы – прописать ваш id и title.
3. Снимаем ограничение на шорткоды в сайдбареЭтот пункт необходим, если вы хотите установить кнопку в сайдбаре. Не всегда сайдбар в вордпрессе позволяет выполнять шорткоды.
Чтобы эту функцию разрешить, требуется открыть для редактирования файл function.php (прямо из админки wordpress) и вставить перед закрывающей скобкой «?>» следующий код:
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
Он даст возможность выполнять все шорткоды в сайдбаре.
У меня получилась вот такая симпатичная всплывающая форма:
Иногда возникает необходимость разместить на сайте несколько форм с разными настройками и полями.
Например, одна кнопка у вас ведет на форму с именем и телефоном и служит для заказа обратного звонка с сайта, а вторая должна открывать другую форм где идет подробная заявка на заказ (с адресом, полем для описания, возможностью прикрепить файл и т.д.). В самом плагине Contact Form 7 вы можете сделать бесконечное количество вариантов форм, но как их впихнуть в разные кнопки одной страницы?
Для этого необходимо корректировать код кнопки из предыдущего пункта. Первая кнопка использует представленный выше вариант. Во второй меняются два значения:
Контактные формы являются необходимым атрибутом большинства сайтов. С их помощью осуществляется непосредственное общение с посетителем, особенно если на сайте не представлено иных способов связи.
Каталог WordPress насчитывает десятки плагинов контактных форм. Но наиболее популярным среди них (более миллиона установок) является Contact Form 7 , на примере которого мы и будем рассматривать создание контактной формы на сайте.
Создание формыЕсли Вы используете темы или , то Вам нет необходимости устанавливать какие-либо плагины, — все уже реализовано! Для этого достаточно вставить на страницу контактной формы шорткод .
После установки и активации плагина в админ-панели появляется целый раздел:
Создадим простую форму, которая будет доступна на странице Связаться с нами . Для начала переходим Contact Form 7 > Добавить новую , где необходимо ввести название формы. Ниже располагается блок шаблона формы, т.е. набор полей, которые будет видеть и заполнять пользователь на сайте.
Итак, введя название, например, «Связаться с нами » и нажав кнопку Сохранить , Вы таким образом создадите готовую к показу контактную форму. Чтобы ее увидеть, нужно перейти Contact Form 7 > Контактные формы .
Обратите внимание на значение поля Шорткод . Код, взятый в квадратные скобки, будет использован для показа формы на сайте.
Вывод формы на сайтеЧтобы посетители сайта смогли воспользоваться формой контактов, ее где-то нужно вывести. Для этого создадим отдельную страницу с названием, например, «Связаться с нами «. Итак, переходим Страницы > Добавить новую . В заголовке пишем «Связаться с нами «, а в поле снизу вставляем вышеуказанный шорткод. В итоге должно получится:
Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи , или как еще говорят в народе «контактной формы» .
Сегодня мы разберем с вами как можно создать за несколько минут легкую , красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7 .
Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂
Создание контактной формы в WordPressВ самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ!!!
И так, давайте приступим. Для создания формы обратной связи нужно сделать следующее :
1. Установите и активируйте плагин Contact Form 7 . Как устанавливать плагины вы можете .
2. После активации перейдите в Contact Form 7 -> Формы .
3. В открывшемся окне копируем строчку с кодом вставки.
4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить» .
Вот такой результат добавления контактной формы по получим:
Готово! Вы установили рабочую форму обратной связи на свой сайт!
Как видите, всего за несколько минут можно с легкостью установить на сайт форму обратной связи. На этом можно и поставить точку, но тем, кого не устраивает стандартная форма и кто хочет создать полностью новую контактную форму с другими полями и возможностями — рекомендую читать урок до конца.
Для того, чтобы создать новую форму нужно для начала определиться какие поля в ней нам необходимы. В этом уроке в качестве примера мы будем создавать простенькую форму заказа обратного звонка .
Для этого нам нужно чтобы в форме были такие поля для заполнения:
- Имя (Обязательное поле для заполнения)
- Фамилия
- Телефон (Обязательное поле для заполнения)
- Поле с выбором удобного времени для звонка
После того как мы определились с полями, переходим к созданию формы:
1. Переходим в Contact Form 7 -> Добавить новую.
2. В открывшемся окне нажимаем кнопку «Добавить новую» . Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским .
3. После нажатия кнопки вы перейдете на страницу, на которой находится редактор формы .
В самом верху страницу поле, в которое пишем название новой формы . В Шаблоне формы мы видим стандартные поля формы, которые создаются по умолчанию.
Ниже мы видим настройки письма, которое приходит на вашу почту после того, как кто-то отправил заказ с формы на сайте. В этих настройках, к примеру, можно изменить или добавить e-mail на который будут приходить запросы с формы на вашем сайте. В шаблоне письма настраивается информация, которая будет отображаться внутри письма.
4. После того, как мы поверхностно ознакомились с структурой редактора, переходим к созданию нашей новой формы. Для этого нам нужно УДАЛИТЬ из шаблона формы все строчки кроме кнопки «Отправить», а в шаблоне письма удалить все полностью. После удаления у вас должно получится так:
5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия , Телефон (обязательное), Удобное время звонка .
Начинаем с создания поля для ввода имени , которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле .
В настройках нового поля ставим галочку, которая необходима только в том случае, если поле должно быть обязательным для заполнения. Далее копируем сгенерированный код в шаблон формы справа, а следующий код копируем в шаблон письма. Комментарии и стрелки для лучшего понимания смотрите на изображении ниже.
6. После того, как мы добавили поле для ввода имени, нажимаем «Сгенерировать тег» -> Текстовое поле и по аналогии создаем поле Фамилия и Телефон , копируя и вставляя код в шаблон формы и шаблон письма. Отличие только в том, что для поля Фамилия ставить галочку для обязательного заполнения не нужно.
После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:
7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню» .
В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.
В итоге у вас должно получиться вот так:
9. Скопируйте код формы и вставьте его на страницу, на которой вам нужна форма . Если вы все сделали правильно, у вас должна получится такая форма заказа обратного звонка:
После того как пользователь сделает заказ обратного звонка с вашего сайта, на вашу почту придет письмо с таким наполнением:
ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля .
Согласен, что для некоторых все может показаться очень сложным и страшным, но такое ощущение будет только до первого создания контактной формы с нуля 😉
В большинстве случаев вполне достаточно и стандартной формы обратной связи, которая создается плагином по умолчанию сразу после его установки и активации.
Надеюсь этот урок был вам полезен, и вы разобрались с плагином Contact Form 7.
Если у вас будут возникать по ходу создания формы вопросы или что-то будет не получаться — пишите и задавайте вопросы в комментариях .
И помните, что форма обратной связи на сайте — обязательный атрибут на странице контактов .
Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе "контактной формы". Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7. Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным:) Создание контактной формы в WordPress В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин…
ОбзорПроголосуйте за урок100
ОценкаИтог: Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Этот урок покажет как создать самую простую контактную форму для HTML -шаблона.
Прежде всего создайте 2 файла: contact_form.html и contact.php . Первый файл будет содержать код Вашей контакт-формы, а второй будет обрабатывать данные этой формы.
HTMLНиже приведен пример HTML -кода контактной формы:
Your name
Your e-mail
Message
В браузере она будет выглядеть следующим образом:
Давайте кратко рассмотрим основные аспекты данной формы. Тег должен иметь 2 дополнительных атрибута:
action=»contact.php» — определяет куда отправлять данные из контактной формы после отправки письма.
method=»post» — определяет как отправить данные из контактной формы в файл, заданный атрибутом action . Теги и должны иметь атрибут "name" с уникальным идентификатором. Этот атрибут используется для идентификации данных контактной формы после отправки письма. Следует также отметить 2 дополнительных элемента, которые используются в качестве кнопок Отправить и Очистить, первый елемент должен быть определен тегом type="submit", а второй — тегом type="reset".Процедура создания контактной формы является довольно простой.
PHPПерейдем к созданию файла contact.php, который будет собирать данные с контактной формы, компоновать их в сообщение и отправлять по электронной почте. Скачать готовый contact.php файл по этой ссылке. Ниже указан код файла с комментариями к его основным разделам:
Присвоение данных из каждого поля контактной формы (cf_name, cf_email, cf_message) следующим PHP-переменным ($ cf_message, $ field_email, $ field_message) $field_name = $_POST["cf_name"]; $field_email = $_POST["cf_email"]; $field_message = $_POST["cf_message"];
Функция $mail_to должна содержать электронную почту владельца сайта, это именно тот адрес, куда будут отправляться сообщения. Вы можете указать сразу несколько адресов электронной почты, разделяя их запятой (например, [email protected], [email protected])
$mail_to = "[email protected]";
Тема письма, которое Вы получите:
$subject = "Message from a site visitor " . $field_name;
Построение структуры сообщения :
$body_message = "From: ".$field_name."\n"; $body_message .= "E-mail: ".$field_email."\n"; $body_message .= "Message: ".$field_message;
Построение заголовков сообщения:
$headers = "From: $cf_email\r\n"; $headers .= "Reply-To: $cf_email\r\n";
Определяем функцию mail() и присваиваем её переменной $mail_status, которая используются для проверки успешности отправки письма.
$mail_status = mail($mail_to, $subject, $body_message, $headers);
Если функция mail() выполнена успешно, тогда используйте код ниже:
If ($mail_status) { ?> // Print a message alert("Thank you for the message. We will contact you shortly."); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html"; // Print a message alert("Message failed. Please, send an email to [email protected]"); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html";
Вы можете загрузить готовые файлы contact_form.html и contact.php
Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Создание и показ контактных форм Создание форм в админкеПосле установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формыДля верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
Ваше имя (обязательно) Ваш e-mail (обязательно) Тема Сообщение
А при отображении в записи она превратится в такой HTML:
Ваше имя (обязательно)
Ваш e-mail (обязательно)
Тема
Сообщение
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей- Текстовые поля: text , email , tel , url , textarea
- Числовые поля: number , range
- Поля с датой: date
- Чекбоксы, радио, списки: checkbox , radio , select
- Поле с загрузкой файла: file
- CAPTCHA: captchac и captchar
- Опросы: quiz
- Поле "Принять": acceptance
- Кнопка "Отправить": submit
- Произвольный тип поля
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:- Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
От: Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
От: Дмитрий Тема: Вопрос про Contact Form 7 Сообщение: Привет! У меня возник вопрос по плагину Contact Form 7. Как его настроить? -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)
Не обязательные поля в теле письмаЕсли юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Contact Form 7 позволяет отправлять письмо на два адреса, причем настройки для каждого письма разные. Это может пригодиться, когда надо отправить администратору сайта письмо с полной информацией и дубликат менеджеру, где содержится только данные о заказе.
Уведомления при отправке формы
В данной вкладке вы можете отредактировать сообщения, которые выводит форма в той или иной ситуации: при удачной или неудачной отправке письма, или при ошибках.
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
Об использовании данного функционала я расскажу в отдельной статье.
