Contact form 7 что плагин. Все поля (теги) формы

Сегодняшний урок поможет вашему wordpress сайту обзавестись симпатичной и функциональной формой обратной связи. Сделаем мы ее с помощью плагина Contact Form 7. В свое время я потратил немало времени на поиски нормальной контактной формы и достойной альтернативы данному плагину так и не нашел.

1. Возможности Contact form 7
2. Установка и настройка плагина
3. Два варианта защиты от спама – фильтр akismet и captcha
4. Размещение контактной формы во всплывающем окне
5. Несколько всплывающих окон с разными формами на одной странице

Возможности плагина

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

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

Одним словом, плагин мегафункциональный.

Если вас до сих пор волнует вопрос «делать или не делать форму связи?» (можно обойтись простым размещением контактных данных на нужных страницах), то я скажу однозначно – делать стоит.

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

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

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

В-четвертых, это просто стильно и современно.

Установка и настройка плагина Contact form 7

Плагин есть в общей базе wordpress, поэтому нет необходимости искать где-то его файлы, скачивать их себе и потом закидывать на хостинг. Все делается проще – через админку wordpress входите в раздел плагины, набираете в поле для поиска «Contact form 7» и устанавливаете его. Если вы никогда плагины не ставили, то подробная инструкция как установить плагин есть тут.

Настройка плагина Contact form 7

Настройка плагина состоит из двух этапов.

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

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

Итак, поехали.

Для начала в левом меню панели администратора находим вкладку Contact form 7. Под ней всплывет меню с двумя пунктами – «Формы» и «Добавить новую».

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

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

Блок «Название формы»

Первый блок отвечает за название вашей формы – поставьте курсор на надпись «Без названия» и введите нужное вам имя. Это название будет отображаться только вам в списке контактных форм плагина, так что делайте его понятным для вас, чтобы в будущем не запутаться во всем многообразии.

Блок «Шаблон формы»

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

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

Расположение полей можно настраивать с помощью обычной html разметки.

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

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

Выберите нужный элемент и настройте его параметры. Плагин на русском, поэтому все настройки интуитивно понятны.

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

После настройки поля у вас появятся 2 шорткода:

• «Скопируйте этот код и вставьте его в шаблон формы слева» - этот код вставляется в код формы аналогично со всеми остальными;
• «И вставьте следующий код в шаблон письма ниже» – этот код понадобится нам для оформления письма в следующем блоке.

Читайте также: Какой хостинг лучше выбрать для сайта?

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

Блок «Письмо»

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

Наша задача включить в письмо всю информацию.

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

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

Дальше мы указываем тему письма. Стандартно, тема берется из поля , которое заполняется в форме. Но можно из формы этот элемент удалить, а в поле вписать конкретную тему, задаваемую в каждом письме автоматически. Я так сделал для форм обратной связи со страниц об услугах и рекламе. Сообщения оттуда всегда приходят с одной и той же темой «Заказ услуг» или «Заказ рекламы» - просто и понятно.

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

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

В конце указывается сайт, с которого отправлено письмо.

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

Любую текстовую информацию этого блока (кроме тегов) можно менять по своему вкусу. Также вы можете добавить любые описания и менять теги местами, расставляя их в том порядке, который вам удобен.

Блок «Письмо 2»

Если вы хотите, чтобы отправленное вам сообщение получал кто-то еще, то можно поставить галочку в этом блоке.

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

Вы можете настроить отправку копии, например, своему менеджеру или бухгалтеру.

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

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

Активация формы

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

Плагин поместит созданную вами форму в список действующих и присвоит ей специальный код примерно такого вида:

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

Борьба со спамом - Akismet и Captcha

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

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

Избавиться от спамеров можно двумя способами:

1. Поставить обязательную капчу (это можно сделать дополнительным плагином - Really Simple CAPTCHA).
2. Воспользоваться антиспамерским плагином для wordpress – Akismet.

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

Использование плагина Akismet удобнее тем, что он самостоятельно анализирует вводимые данные (имена, email адреса, ссылки) и на основании наработанной базы делает выводы о спамности или неспамности сообщения.

Кроме того, akismet стоит на большинстве wordpress сайтов для защиты от спама в комментариях к статьям. Значит, при его использовании не потребуется устанавливать дополнительные плагины и создавать лишнюю нагрузку на сайт.

Защита от спама с помощью Akismet

1. Устанавливаем плагин Akismet на ваш сайт и активируем его.

2. Добавляем в теги контактной формы дополнительные данные:

• в поле с именем автора дописываем akismet:author
• в поле с email отправителя письма akismet:author_email
• в поле для адреса сайта akismet:author_url

Должно получиться вот так:

После сохранения, контактная форма должна блокировать все сообщения, отправляемые спамерами. Проверить работу фильтра можно с помощью специального тестового имени “viagra-test-123? - при его вводе должно появляться сообщение об ошибке.

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

Читайте также: Лучшие плагины для создания мобильной версии WordPress сайта

Защита от спама с помощью Really Simple CAPTCHA

Если вы обнаружите, что Akismet вас не устраивает (пропускает много спама или блокирует нужные сообщения), то вы можете подключить капчу. Для этого установите плагин Really Simple CAPTCHA.

Открываем для редактирования нужную контактную форму

В списке тегов выбираем Captcha. В настройках тегов можно выбрать размер картинки с символами, в остальном ничего менять не стоит. В нижней части настроечного окна появятся 2 тега, один отвечает за вывод картинки, второй выводит поле для ввода данных с этой картинки.

Чтобы капча начала работать, необходимо скопировать и вставить оба этих тега в левое окно шаблона формы, после чего сохранить изменения.

Размещение формы обратной связи во всплывающем окне

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

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

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

Делается это с помощью еще одного плагина - Easy FancyBox.

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

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

Несколько разных всплывающих форм на одной странице

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

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

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

1. Меняется ссылка, параметру href присваиваете значение #contact_form_pop_2
2. Изменяете идентификатор id на то же значение #contact_form_pop_2

Для второй формы получится такой код:

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

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

Для того чтобы добавить форму Contact Form 7в нужное место, нужно скопировать код вставки на участок страницы или поста. Делается это очень просто:

Каждая контактная форма имеет свой собственный короткий тег, такой как [ contact-form-7 id="71" title="Контактная форма 1"] . Чтобы вставить контактную форму в свой пост, скопируйте шорткод и вставьте его в содержание поста.

Если ваша форма не отображается и выдает ошибку contact-form-7 404 «Not Found»

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

Как добавить или отредактировать поле для изменения внешнего вида формы Contact Form 7?

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

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

Внутренние настройки формы Contact Form 7.

В каждой форме доступны такие настройки:

• Настройка шаблона формы;
• Письмо;
• Уведомления при отправки формы.

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

Произведя все внутренние настройки Contact Form 7 вы получите отредактированный код для вставки, который будет внедрен вами в нужную область на сайте.

Как указать или изменить тему сообщения?

Просто измените поле «Тема» поле в разделе «Письмо». Для этого зайдите в нужное меню настроек и измените стандартный тег на свое название.

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

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

Почта, которая приходит через контактную форму плагина Contact Form 7 показывает «WordPress», как имя отправителя. Как изменить это?

Адрес отправителя состоит из адреса электронной почты отправителя и дополнительного имени отправителя. WordPress присваивает «WordPress» в качестве имени отправителя, если параметр не отформатирован. Если вы хотите использовать другое имя, чтобы «WordPress» больше не появляется в качестве имени отправителя, вы должны явно указать имя отправителя в поле «От:» поле в разделе «письмо»:

Можно ли размещать контактную форму вне поста?

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

Как вставлять контактную форму в файле шаблона?

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

Сообщение об ошибке «Не удалось отправить сообщение». Contact Form не отправляет письма. Что не так?

Причин для такого сообщения обычно может быть несколько:

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

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

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

Если вы можете проверить журнал вашего почтового сервера, это может дать вам некоторые подсказки.Спам-фильтр часто вызывает проблемы такого рода.

Контактная форма перенаправляет на страницу ошибки 404 после отправки.

Эта проблема вызвана сочетанием двух ошибок конфигурации. Во-первых, AJAX JavaScript не работает на вашей контактной форме. Из-за этой проблемы, ваша контактная форма вынуждена перенаправлять после отправки. Во-вторых, ваша контактная форма использует недоступные слова в названиях полей ввода. Этот вопрос смущает WordPress, в результате чего появляются 404 («Not Found») ошибки.

Контактная форма ведет себя странно в некоторых браузерах.

Это может быть вызвано из-за неверного HTML, CSS, Javascript. Пожалуйста, проверьте Вашу страницу формы с валидаторов или инструментов отладки.

Полезные инструменты:

• Firebug - расширение Firefox. Хорошо для отладки JavaScript.
• W3C Markup Validation Service - служба проверки HTML.
• W3C CSS Validation Service - служба проверки CSS.

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

Contact Form 7 была переведена на многие языки. Смотрите, если имеется файл конфигурации языка для вашего сайта тогда и плагин Contact Form 7 будет использовать этот язык.

Contact Form 7 устанавливает параметр языка WordPress. После того, как вы измените языковые настройки WordPress, Contact Form 7 также изменяется.

CAPTCHA не работает, изображение не появляется.

Чтобы использовать CAPTCHA, нужно что бы GD и FreeType библиотеки были установлены на вашем сервере. Кроме того, убедитесь, что временная папка для CAPTCHA установлена с правами для записи.

Поле ввода текста для CAPTCHA работает на Internet Explorer, но не в Firefox. Невозможно ввести код.

Это хорошо известная проблема вызванная злоупотреблением тега . Убедитесь, что вы правильно его используете.
Правильное использование:

Enter the code:

Это не будет работать правильно:
Enter the code:

Как добавить идентификаторы и атрибуты класса элементам формы?

Вы можете добавить любой идентификатор и класс в форму в шорткод .
Пример:

Если вы хотите узнать больше о возможностях WordPress, советуем изучить уроки

(Последнее обновление: 19.05.2019)

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7 , защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины - почему не работает и не отправляет письма контактная форма .

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

О, письмо пришло! Контактная форма 7 молодец

Не буду вас утомлять, уважаемый читатель, всякой писаниной - перейдем к делу. Установка и правильная настройка модуля для Вордпресс - контактная форма 7.

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе "Плагины" нажимаем "Добавить новый". Вводим в окошко "Поиска" Contact Form 7. Естественно он отобразится первым. Кликаем кнопку "Установить:

Как установить плагин

Контактная форма № 1 по умолчанию

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

Внешний вид: Стандартная контактная форма на сайте WordPress

Если вы хотите просто посмотреть, проверить или изменить, то есть, добавить к ней дополнительные поля, тогда нажмите пункт "Изменить". Скрин выше.

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

Например, чтобы добавить в шаблон формы тег поле для загрузки файла, нужно: Отметить мышкой место для вставки тега (лучше всего после сообщения) и нажать соответствующею вкладку "файл". С помощью этой функции вы можете разрешить пользователям загружать свои файлы через вашу форму, а затем вам будет отправлено электронное письмо с вложениями файлов:

Редактировать контактную форму. Вкладка файл

Откроется окно - Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ()

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку "Вставить тег":

Тег файл вставлен в шаблон формы

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку "Сохранить". А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр - только для подписчиков - subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму. После этого, создайте новую страницу - раздел Страницы - Добавить новую. Вписываем название страницы, например "Контакты". Переключаем редактор сообщений в режим "Текст" и вставляем шорткод в поле сообщений:

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем "Порядок" 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку "Опубликовать". Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

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

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

Нажмите пункт "Интеграция". Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA - это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA - это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую ​​как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы - Contact Form 7 Style

Стили для форм обратной связи 7

Плагин Contact Form 7 Style - это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка - Contact Form 7 Style Template. Настройка внешнего вида:

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

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

Плагин поддерживает пользовательские стили, которыми можно управлять через админпанель

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
2. Убедитесь, что используется правильный обратный электронный адрес;
3. Ваше письмо может рассматриваться как спам;
4. Плагины или тема конфликтует с Contact Form 7;
5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

P.S. Оказывается на редактирование старых постов (информация для читателей должна быть актуальной всегда) уходит столько же времени, как на написание новой инструкции. Ужас!

(function(w, d, n, s, t) { w[n] = w[n] || ; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true }); }); t = d.getElementsByTagName("script"); s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Документация и поддержка

Скриншоты

Установка

1. Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
2. Активируйте плагин на странице «Плагины» в панели управления WordPress.

В меню консоли WordPress вы найдёте вкладку ‘Обратная связь’.

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

Отзывы

I see a lot of people hating on this plugin because they"re using some unsupported version that is bundled in a theme, - all I can say from my own experience is that after using it for several years on many sites is a big thank you to the devs that keep it up to date and free for everyone. It"s extremely easy to set up and customize. Cheers!

Участники и разработчики

«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Журнал изменений

Для получения дополнительной информации смотрите Релизы .

5.1.6

• CSS: removes a style rule from the stylesheet that was unnecessary and conflicting with Twenty Twenty’s rules.
• REST API: retrieves the contact form ID explicitly from the route parameters.

5.1.5

• Config Validator: New test item for the unavailable_html_elements error.
• Config Validator: New test item for the attachments_overweight error.

5.1.4

• reCAPTCHA: Представляем константы WPCF7_RECAPTCHA_SITEKEY и WPCF7_RECAPTCHA_SECRET.
• reCAPTCHA: Представляем перехватчики фильтра wpcf7_recaptcha_sitekey и wpcf7_recaptcha_secret.
• Добавление параметра $status к фильтру wpcf7_form_response_output.
• Создает случайный код, когда пользователь является зарегистрированным пользователем.
• Представляем WPCF7_ContactForm::unit_tag(), публичный метод, возвращающий тэг юнита.
• reCAPTCHA: выдаёт иное сообщение в спам-журнал в случаях, когда маркер ответа пуст.
• Флажок согласия: поддержка опции label_first в согласительном тэге формы.

5.1.3

• Исправлена ошибка, приводившая к невозможности отменить выбор параметра во вкладке Почта.

5.1.2

• Постоянный контакт: Представлен селектор списка контактов.
• Постоянный контакт: Представлена дополнительная настройка constant_contact.
• reCAPTCHA: представлены перехватчики фильтров wpcf7_recaptcha_actions и wpcf7_recaptcha_threshold.

5.1.1

• reCAPTCHA: Изменяет реакцию на пустые токены ответа.

5.1

• Представлен модуль интеграции Постоянный контакт.
• Обновлён модуль reCAPTCHA для поддержки reCAPTCHA v3.
• Добавляет правила стиля Тёмного режима.

5.0.5

• Исправлена проблема несоответствия между get_data_option() и get_default_option() в классе WPCF7_FormTag.
• Глушит ошибки PHP, возникающие при вызовах unlink().
• Представлена wpcf7_is_file_path_in_content_dir() для поддержки константы UPLOADS.

5.0.4

• Явно устанавливает аргумент power_type в вызове register_post_type(), для исправления проблемы, связанной с несанкционированным повышением привилегий.
• Вложение локального файла — запрещено указывать абсолютные пути к файлам, расположенным вне директории wp-content.
• Валидатор конфигурации — добавляет тестовый элемент для обнаружения некорректных настроек файлов вложений.
• Исправлена ошибка в функции обратной совместимости JavaScript для устаревших браузеров, которые не поддерживают атрибут-заполнитель HTML5.
• Чекбокс согласия — отключает функцию do-not-store форм-тэга.

5.0.3

• CSS: Применение стиля курсора «не разрешено» при наведение на кнопки отправки в неактивном состоянии.
• Флажок согласия: ревизия пользовательского интерфейса генератора тегов, для поощрения использования лучших опций защиты личных данных.
• Внедрение функции wpcf7_anonymize_ip_addr().
• Представлена опция consent_for:storage для всех типов форм-тэгов.

5.0.2

• Добавлен раздел «Уведомления о приватности» в файл readme.txt.
• Обновлен контент в мета-блоке Информация.
• Используйте get_user_locale() вместо get_locale(), где это более уместно.
• Флажок согласия: Сброс статуса отключенных кнопок отправки после успешного применения.

5.0.1

• Исправлено некорректное использование _n().
• Проверка конфигурации: исправлено неверное количество предупреждений на вкладке «Дополнительные параметры».
• Проверка конфигурации: исправлена неправильная обработка специального почтового тега [_site_admin_email] в поле заголовка «От».
• Флажок Acceptance: указанные атрибуты class и id были применены к неправильному элементу HTML.
• Проверка конфигурации: если для почтовых ящиков, таких как Cc или Reply-To, существует дополнительный почтовый заголовок, но возможное пустое значение, будет возвращена ошибка «Неверный синтаксис почтового ящика».
• Явно укажите четвертый параметр add_action(), чтобы избежать передачи непреднамеренных значений параметров.
• Проверьте, не является ли целевой каталог пустым, прежде чем удалять его.

5.0

• Дополнительные настройки: on_sent_ok и on_submit были удалены.
• Новая дополнительная настройка: skip_mail.
• Фламинго: заголовок входящего канала изменяется вместе с изменением заголовка соответствующей контактной формы.
• События DOM. Весь объект ответа API доступен через свойство event.detail.apiResponse.
• Почта HTML: добавляет атрибуты, связанные с языком, в заголовок HTML.
• Загрузка файла: Устанавливает атрибут принятия в поле загрузки.
• Представлен новый класс WPCF7_MailTag.
• Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
• Флажок Acceptance: позволяет указывать условия в части содержимого тега формы.
• Флажок Acceptance: Поддерживает параметр опциональности.
• Новые специальные почтовые теги: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name].
• Новые перехватчики фильтров: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
• Новые функции form-tag: zero-controls-container и not-for-mail

Contact Form 7

• Все поля (теги) формы
• Как сделать обязательным одно из полей: почта или телефон
• Conditional Fields for Contact Form 7 аддон
• Contact form 7 Custom validation аддон

В предыдущей статье мы ознакомились с плагином Contact Form 7 и его настройками. А здесь, будут подробно рассмотрены все поддерживаемые типы полей (теги шаблона формы) и параметры каждого из них, а также стили (css классы) элементов формы. Это неофициальная документация ко всем тегам шаблона формы Contact Form 7.

Тип поля определяет вид элемента HTML формы: текстовый, «радио», «селект». Тип поля указывается в названии тега шаблона формы.

Пример тега текстового поля и HTML код который он выведет:

Также каждый тег (поле) имеет свои опции (атрибуты тега). Опции тега указываются после названия и имени поля. Для примера, добавим атрибут class для предыдущего поля text:

Синтаксис тега шаблона (поля) формы:

Атрибуты тегов (полей)

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

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

* Знак * сразу после типа поля делает поле обязательным для заполнения.
Пример: id(строка) Название идентификатора. css атрибут id, используется для оформления поля.
Пример: id:foo class(строка) Название класса. css атрибут class, используется для оформления поля.
Пример: class:bar
Можно указать несколько классов: minlength и maxlength(число)

Это HTML5 атрибуты, которые ограничивают ввод символов в поле, как по нижнему порогу (минимальному), так и по верхнему (максимальному). Пользователь не сможет ввести в поле меньше знаков (minlength) или больше знаков (maxlength), чем определено этими значениями.

Для minlength , если введённый текст будет меньше этого значения, то пользователь получит предупреждение "Поле слишком короткое". И наоборот для maxlength .

Примеры:
minlength:10 -
maxlength:90 -
оба сразу -

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

Данные параметры поддерживают следующие типы полей: text , textarea , email , url , tel , quiz .

Существует старая запись этих параметров:

Параметр maxlength в явном виде приоритетнее, поэтому если дописать maxlength:150 , то 140 будет переписано на 150.

Size(число) Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Может быть переопределено в CSS стилях с помощью атрибута width.
Пример: size:50 -
По умолчанию: 40 default(строка/число)

Значение поля по умолчанию.

Пример: default:значение.

Если пользователь, заполняющий форму, авторизован, то по умолчанию можно подставлять значение взятое из данных его профиля. Например, если указать атрибут default:user_email - , то в поле автоматически подставиться значение - «email текущего пользователя», который просматривает форму...

Остальные специальные поля атрибута default:

default:post_meta - получит значение метаполя ключ которого будет равен имени поля. Например: выведет поле формы в значении которого будет выставлено значение метаполя записи mymeta_key

default:get - выставит значение GET параметра c ключом равным имени поля: - http://example.com/?mykey=значение

default:post - выставит значение POST параметра c ключом равным имени поля: - в POST передаем данные mykey=значение.

default:shortcode_attr - выставит значение атрибута шорткода с ключом равным имени поля. Например тег шаблона формы такой: , тогда в шоркоде самой формы при вызове в контенте записи указываем атрибут mykey: . Подробнее читайте ниже.

Еще, нужно добавить название атрибута шорткода WordPress в белый список (потому что wordpress вырезает все неизвестные атрибуты шорткода...). Делается это через фильтр:

Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); function my_shortcode_atts_wpcf7($out, $pairs, $atts){ if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; }

Для checkbox, radio и select:

• default:номер - default:2 - выберет второй элемент списка...
• default:номер_номер - default:2_3 - выберет второй и третий элемент списка (для мульти-селектов и чекбоксов)...

Подробнее про default и его варианты, читайте в конце статьи.

Placeholder или watermark(строка)

Текст который будет показан в атрибуте placeholder.

Эту опцию нужно использовать в конце всех опций тега шаблона: , а не

Можно использовать watermark вместо placeholder - это синоним (алиас) атрибута.

Akismet(строка)

Спам защита. Требует установленного и активированного плагина Akismet .

• akismet:author -
• akismet:author_email -
• akismet:author_url -

Как это работает? При отправки данных, значения указанных полей будут обработаны на сервере akismet и если они не пройдут проверку, то письмо не будет отправлено, а пользователь увидит ошибку:

Сообщение исчезнет при фокусе на любом из полей.

Теги шаблона формы (поля)

Ниже описаны все теги плагина, которые можно использовать в шаблоне формы. Такие теги превратятся в input , textarea и select элементы HTML.

К текстовым полям относятся типы: text , email , url , tel , textarea , а также тег count тесно связан именно с текстовыми полями.

К числовым полям относятся два типа: number и range . Это HTML5 поля, потому старые браузеры их не поддерживают, взамен отображая текстовое поле (text).

text

Поле для текста в одну строку.

Поддерживаемые опции (атрибуты):

• class
• minlength и maxlength
• size
• placeholder
• default - можно использовать: user_login, user_first_name, user_last_name, user_nickname, user_display_name
• akismet:author

email

Поле предназначено для ввода email.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder
• akismet:author_email
• default:user_email или default:любая@почта.ру

url

Поле для ввода интернет адреса (URL).

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder
• akismet:author_url
• default:user_url или default:значение

tel

Поле для ввода номера телефона.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder

textarea

Поле для ввода многострочного текста.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• placeholder
• (cols)x(rows) - где cols - ширина поля в символах, а rows - высота поля в строках текста. Имеет 3 формата: (cols)x(rows) , (cols)x и x(rows) .

Для textarea значение поля можно указать двумя способами:

2. Текст по умолчанию...

Если в textarea будут html теги, то после отправки формы вы, возможно, получите 500 ошибку сервера!

count (счётчик символов)

Тег count позволяет установить счетчик, когда нужно показать пользователю, сколько введено символов или сколько символов осталось до максимального значения (если параметр maxlength).

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

Тег счётчика можно использовать в любом месте шаблона формы.

Например, у нас есть текстовое поле для сообщения:

Тогда делаем так:

Поле ограничено - минимум 10 и максимум 140 символами. В данном случае счётчик будет показывать сколько всего введено символов.

Иногда удобнее показать сколько символов осталось ввести, ведь пользователь не знает об ограничении по максимуму. Для этого в теге нужно указать опцию down - .

number

Поле для ввода числа. При фокусе в поле значения можно изменять вращением колесика мыши.

Поддерживает атрибуты:

• class
• placeholder
• min
• max

range

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

Поддерживает атрибуты:

• class
• placeholder - отображаются только в браузерах, не поддерживающих данный тип поля и отображающих взамен текстовое поле.
• min - Устанавливает нижнее значение для ввода числа: min:20
• max - Устанавливает верхнее значение для ввода числа: min:100
• step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел: min:5

checkbox и radio

• Радиокнопки - это переключатели, позволяющие выбрать только один вариант из нескольких.
• Чекбоксы - это флажки, позволяющие выбрать сразу несколько вариантов.

Поддерживаемые атрибуты:

• default - Значение поля по умолчанию, к примеру default:2 означает, что при отображении поля второй вариант ответа будет уже выбран. Для чекбоксов можно указать несколько значений подобным образом default:1_2_3

  first_as_label - По умолчанию сначала идёт чекбокс (радио-кнопка), а затем его (её) надпись. Передав данный параметр, вы поменяете их местами.

  use_label_element - Оборачивает чекбокс или радио-кнопки в label, что позволяет делать выбор элемента кликнув по его названию.

  exclusive - Указав этот параметр, у чекбокса можно будет выбрать только 1 элемент. Данный функционал работает на основе JavaScript. Радио-кнопки не поддерживают опцию в силу своей специфики.

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

• data - Получает значение из листа со странами мира, к примеру data:countries .

China India San Marino

select

Позволяет выбрать варианты ответа из выпадающего списка. Может использоваться в двух вариантах:

Атрибуты:

• class
• default - default:2 или default:2_3_4
• multiple - Позволит выбрать несколько вариантов ответа
• include_blank - Добавит первым вариантом ответа строку "- - -"
• first_as_label
• data
• items - варианты ответов

Пункт 1 Пункт 2 Пункт 3

date

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

Атрибуты:

• class
• placeholder
• min - Нижнее значение возможной даты, например min:2016-01-01 . Поддерживается относительный формат даты, например today+10days , today-2weeks и так далее.
• max - Верхнее значение возможной даты, например min:2017-01-01 . Поддерживается относительный формат даты, как и у min .
• step - Шаг изменения даты в днях, например step:3 . Если нижнее значение 2016-01-01 и шаг 3, то при следующем шаге отобразиться дата 2016-01-04 и так далее.

При вставке тега в шаблон письма, на почту придет дата в формате YYYY-MM-DD (2016-12-25) - это не наглядно. Поэтому можно указать более наглядный шаблон, для этого используйте конструкцию [_format_{field name} "{date format}"]

[_format_your-date "D, d M y"]

reCAPTCHA (защита от спама)

Contact Form 7, начиная с версии 4.3, в связке с сервисом reCAPTCHA позволяет бороться со спамом. Чтобы пользоваться reCAPTCHA нужно иметь аккаунт в Google, где можно получить ключи для использования API сервиса.

Чтобы получить эти ключи, нужно:

1. Зайти в админку reCAPTCHA .
2. Зарегистрировать сайт.
3. Получить ключ сайта и секретный ключ (это два разных ключа: ключ сайта может быть один, а секретных ключей много).

Атрибуты:

• class
• theme - Цветовая схема виджета. Может быть dark или light (по умолчанию).
• size - Размер виджета. Может быть compact (компактный) или normal (по умолчанию).

Теперь в шаблоне формы используйте тег .

Quiz (вопрос-ответ)

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

Атрибуты:

• class
• size - Размер поля и его длина. Одно из значений может быть опущено.

На какой планете Вы живёте?

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

Можно указать несколько пар вопрос-ответ, вопрос будет выбран случайно каждый раз при показе формы:

Для этого поля можно указать параметры minlength и maxlength:

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

hidden

Скрытое поле - не видно пользователю. Может хранить в себе ценную информацию. Информация может быть добавлена с помощью Javascript или создана с помощью опции default .

Атрибуты:

• class
• default - Сюда можно передать параметр, который будет преобразован по определенному правилу. Подробнее читайте в описании атрибута (опции в начале статьи).

submit

Кнопка отправки данных формы (сабмита). При нажатии на эту кнопку происходит отправка всех данных формы на сервер.

Атрибуты:

• class

Можно указать текст кнопки:

Пример использования всех поддерживаемых параметров:

ajax-loader

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

Так, например, если заменить тег на готовую HTML кнопку. Такое иногда нужно, когда верстка кнопки не подходит. Например если нужно чтобы кнопка сабмита выглядела так:

В этом случае мы потеряем тег , потому что он добавляется через JS, после элемента с классом wpcf7-submit - обычно такой класс имеет стандартная кнопка сабмита.

Чтобы обойти это ограничение, можно просто добавить этот класс к нашему HTML коду кнопки:

Все. Теперь тег будет добавляться и работать как надо.

Или можно добавить тег прямо в шаблон формы.

acceptance (я принимаю ваши условия)

Вы можете разрешить пользователям отправлять данные, только если они принимают определенные условия.

Атрибуты:

• class
• invert - Параметр, делающий чекбокс сразу с флажком, но чтобы отправить форму пользователю надо его убрать.
• default - Делает по умолчанию чекбокс сразу с флажком, если указать on , пример default:on , по умолчанию же default:off .
• optional - поле становится не обязательным.

Разрешаю использовать моё имя в комментариях.

Разрешаю использовать моё имя в комментариях.

Поле является чекбоксом, который обрабатывается с помощью такого JavaScript:

This.find(".wpcf7-acceptance").click(function() { $(this).closest("form").wpcf7ToggleSubmit(); });

Изначально у кнопки отправки формы присутствует атрибут disabled="disabled" . Т.е. если чекбокс не активный, то кнопка отправки формы тоже неактивна, а значит и отправить её нельзя. При установки флажка в чекбоксе, скрипт убирает этот атрибут и кнопка становится активной.

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

Acceptance_as_validation: on

Так, если пользователь не поставит флажок, получит уведомление:

file (загрузка файлов)

С помощью этого поля можно разрешить пользователям прикреплять к письму свои файлы.

Добавление такого функционала состоит из двух этапов:

1 этап - добавление полей для загрузки файлов в форму

Атрибуты:

• filetypes - Тип файла, который разрешен для загрузки, например pdf, jpg и другие (полный список ниже), указываемые через разделитель | (прямая черта), если требуется указать несколько типов.

• limit - Ограничение загружаемого файла по размеру, например: limit:1048576 , limit:1024kb , limit:1mb . Вы можете использовать kb (килобайты) или mb (мегабайты).

Допустимые типы файлов: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv .

Макс размер файла по умолчанию: 1 MB (1048576 байт).

2 этап - добавление тега в шаблон письма

На 1 этапе было создано поле, у которого есть имя - your-file . Теперь используем тег с этим именем в шаблоне письма, но не в привычном поле "Тело письма", а в поле "Прикреплённые файлы".

В поле "Прикреплённые файлы" вставляете только тег с именем поля из шаблона формы.

• - правильно
• - неправильно

Если несколько полей для загрузки файлов, то в поле "Прикреплённые файлы" перечисляете их друг за другом без каких-либо разделителей: .

Локальные вложения

Contact Form 7, начиная с версии 3.5, поддерживает передачу локальных файлов в письмо. Для этого наряду со вставкой тегов в поле прикрепления файлов нужно передать путь к вашему файлу:

/home/you/dir/dir/dir/fantasticpicture.jpg uploads/2013/08/08/boringguide.pdf

Если указан не абсолютный путь, то будет рассматриваться относительный от папки wp-content .

Управление загрузкой файлов

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

1. Какие ошибки PHP произошли;
2. Тип файла и размер файла.

Если проверка прошла успешно, то плагин:

1. Перемещает загруженный файл во временную папку.
2. Прикрепляет файл к письму и отправляет его.
3. Удаляет файл из временной папки.

По умолчанию папка с временными файлами находится тут: wp-content/uploads/wpcf7_uploads . Может отличаться, если изменен путь к папке uploads .

Папка wpcf7_uploads создается автоматически. Но бывают случае, когда это невозможно - родительская папка uploads не имеет прав на запись. Тогда вам нужно:

1. Изменить права папки uploads.
2. Создать папку wpcf7_uploads в ручном режиме через ftp и т.д.

Также, можно вообще изменить путь к временной папке плагина. Для этого откройте файл wp-config.php в корне сайта и добавьте константу WPCF7_UPLOADS_TMP_DIR , в которой укажите полный путь до папки с временными файлами:

Define("WPCF7_UPLOADS_TMP_DIR", "/your/file/path");

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

response

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

Чтобы изменить это положение вставьте тег в то место шаблона формы, где должны быть уведомления:

Ваше имя (обязательно) Ваше сообщение

Если не ввести имя, то форма отправлена не будет и нас известят об ошибке:

Как видно, в шаблоне формы мы использовали тег в начале и конце кода, потому и уведомление плагин отобразил нам в двух местах.

Помните, что этому правилу подчиняются все уведомления, поддерживаемые плагином (успешная отправка, спам и т.д.).

Спец. значения атрибута default

Получение значений по умолчанию по ситуации

Почти всем полям можно через атрибут default передать значение по умолчанию. Но что делать, когда надо передать динамические параметры? К примеру, с помощью GET запроса через URL.

Динамическое получение параметров работает на основе следующих опций тега:

Default:get HTTP GET переменные. Ключ параметра должен совпадать с именем поля формы. default:post HTTP POST переменные. Ключ параметра должен совпадать с именем поля формы. default:post_meta Значение произвольного поля записи в которой находится форма. Имя произвольного поля должно совпадать с именем тега. default:user_(поле пользователя) Речь идет о: default:user_email или default:user_nickname . Полный список таких значений приведен в след. пункте.

Пример тега текстового поля на основе GET запроса:

Пусть у нас есть страница contact , обратимся к ней с передачей GET параметра:

Http://example.com/contact/?your-name=Дмитрий

В результате значение нашего поля будет автоматом "Дмитрий".

Ещё пример: передача UTM меток в форму

Дефолтное значение из нескольких источников

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

Мы указали два источника значения по умолчанию (порядок определяет приоритет): сначала плагин пробует взять значение из адресной строки, если его нет, то из произвольного поля записи. Если значение есть в адресной строке, то значение произвольного поля игнорируется.

ACF + CF7 без дополнительных плагинов

Пусть вы для Записей создали группу полей, в которой есть текстовое поле с ключом my-text-field . Чтобы вывести сохранённое значение в этом поле, используйте шорткод:

или, если надо поле сделать скрытым:

Получение значений по умолчанию для зарегистрированного пользователя

Когда вы создаете форму для авторизованных пользователей, то нет смысла заставлять их вписывать значения, которые уже есть в их данных, например имя или email. В Contact Form 7 предусмотрен этот момент и можно получить данные из профиля пользователя.

Для этого нужно использовать специальные значения атрибута default для авторизованного пользователя. Рассмотрим все возможные варианты:

• default:user_login - Логин пользователя
• default:user_email - Электронная почта
• default:user_url - Адрес сайта
• default:user_first_name - Имя
• default:user_last_name - Фамилия
• default:user_nickname - Ник
• default:user_display_name - Отображаемое на сайте имя
• default:user_description - Описание (биография).
• default:user_* - где вместо * можно указать любое значение из данных пользователя (см. get_userdata()). Если оригинальные данные пользователя (ключ) начинаются не с user_ , то их нужно начать с user_ . Допустим, у юзера есть метаполе vk и нам нужно указать тут значение этого метаполя. Тогда пишем так: default:user_vk

Ваше имя: Ваш E-mail:

Ещё один пример

Один из зарегистрированных пользователей на сайте решил воспользоваться формой. Логично сразу подставить его имя в поле «Имя», ведь оно известно. Используем атрибут default:

Теперь, когда авторизованный пользователь зайдет на страницу с формой - его отображаемое имя (display_name) будет поставлено в поле your-name автоматом. А если на эту же страницу зайдет неавторизованный пользователь, то он увидит плейсхолдер "Введите ваше имя".

Получение значений по умолчанию через атрибуты основного шоркода CF7

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

В этом случае, нужно использовать опцию тега default:shortcode_attr , которая «говорит» плагину получить в качестве дефолтного значение одноименное (с именем поля) значение атрибута шотркода.

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

Однако это еще не все! Как мы знаем для любого шорткода в WordPress ему указывается белый список атрибутов, которые в нём можно использовать. В этом случае, про наш новый атрибут шорткода contact-form-7 WP ничего не знает, поэтому его нужно добавить в белый список. Делается это через хук плагина:

Add_filter("shortcode_atts_wpcf7", "custom_shortcode_atts_wpcf7", 10, 3); function custom_shortcode_atts_wpcf7($out, $pairs, $atts) { if(isset($atts["myemail"])) $out["myemail"] = $atts["myemail"]; return $out; }

Данный код вставляется в functions.php.

Теперь при заходе на страницу с формой в поле email будет подставлено значение [email protected] .