Все поля (теги) формы. Все поля (теги) формы Contact form 7 как вставить в страницу

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

То что явной альтернативы даже среди платных плагинов нет, можно судить по тому как часто используется плагин Contact Form 7. На момент написания поста только с официального сайта WordPress этот плагин был скачен более 28 800 000 раз, а средний рейтинг 4,5 из 5! Это действительно показатель большого успеха. Кроме того, если посмотреть на ТОП продаж премиум тем WP, то практически в каждой из них вы найдете плагин Contact Form 7 как рекомендуемый или установленный по умолчанию.

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

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

Плагин Contact Form 7 вы можете скачать с официального сайта WordPress (ссылка выше), или непосредственно через вкладку “Плагины” > “Добавить новый” > Строка “Поиск плагинов” > вбиваем “Contact Form 7” . Не забудьте активировать плагин перед началом работы: “Плагины” > “Установленные” > находим плагин Contact Form 7> жмем “Активировать” . В боковой административной панели вашего сайта появится новый пункт “Contact Form 7”.

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

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

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

1. Выбираем в административной панели “Contact Form 7” > “Формы” > кнопка на странице “Добавить новую” .

2. Вам будет предложено выбрать язык формы. По умолчанию “русский”. Жмем кнопку “Добавить новую”
3. Перед вами открылось окно где вы можете создать свою форму со своими настройками.

Возможности обширные, но сразу хочу указать на несколько особенностей. Окно в котор открылось содержит несколько вкладок: “Шаблон формы”, “Письмо”, “Уведомления при отправке формы”, “Дополнительные настройки”. Последняя вкладка вам не потребуется, это скорее кастомизация для продвинутых пользователей и программистов. Подробно разберем остальные.

“Уведомления при отправке формы” — это те сообщения которые будет видеть посетитель вашего сайта при отправки формы. Содержаться варианты сообщений как успешной отправки, так и с ошибками и сбоями. По своему усмотрению вы можете поменять эти системные сообщения.

“Шаблон формы” — в этом разделе вы будете генерировать Теги, которые и отвечают за наличие нужных полей в форме.

“Письмо” — это внешний вид и содержание письма которое вам будет приходить после заполнения формы посетителем.

ВНИМАНИЕ: сейчас мы разберем какие теги бывают и какие поля они создают. Все эти теги вносятся в вкладке “Шаблон формы”, но если “ответные теги” вы не вносите в ручную (!) во вкладке “Письмо”, то заполненные формы будут приходить к вам на почту не полные.

4. Варианты тегов в вкладке “Шаблон формы”.

— text: добавляет текстовое поле (короткое).
— email: поле для e-mail.
— URL: поле для указание адреса сайта или любой ссылки.
— tel: поле контактного телефона
— number: поле в которое можно ввести только числовое значение
— date: поле с форматом даты
— text area: добавляет текстовое поле (длинное).
— drop-down menu: выпадающий список. У поля есть дополнительные настройки. Список который будет выпадать указывается в поле “Options”. Причем один элемент списка в одну строку (не через запятую!). Если стоит галочка у “Allow multiple selections” — пользователь сможет выбрать из вашего списка более одного варианта. Если стоит галочка у “Insert a blank item as the first option” — то будет добавленно вверху по умолчанию пустое поле, которое так же может быть выбрано пользователем.

— checkboxes: Чекбокс (галочки). Поле имеет несколько настроек. Список чекбоксов указывается в поле “Options”. Причем один чекбокс в одну строку (не через запятую!). Если стоит галочка у “Put a label first, a checkbox last” по умолчанию галка будет стоять у первого чекбокса. Если отмечен пункт “Make checkboxes exclusive”, то пользователю можно будет отметить только один из чекбоксов.

— radio buttons: радио кнопки. Радио кнопки позволяют всегда выбрать только один пункт из списка. Ввод списка аналогично чекбоксам в столбик. Из настроек можно включить “Put a label first, a checkbox last”, тогда по умолчанию будет выделена первая радио кнопка из списка.

— acceptance: поле чек бокс, без установки галочки в которое сообщение не будет отправлено. Фактически это возможность взять безоговорочное согласие пользователя с чем-то, в противном случае письмо отправлено не будет. Например “Вы соглашаетесь что переданная вами информация будет обрабатываться нашими операторами”.

— quiz: нововведение в плагине. Это поле позволяет создавать вопрос и ответ на него. Идеально использовать в качестве защиты от спама. Посмотрите на оформление вопроса и ответа в форме генерации тега.

Любое поле можно сделать обязательным (обычно такие поля отмечаются *) для заполнения, для этого надо поставить галочку в поле Field type > Required field . Внимание! Не забудьте текстом обозначить пользователям что поле надо заполнить обязательно!

— CAPTCHA: капча устанавливается только как дополнительный плагин. Но в принципе при наличии тега quiz необходимость в капле значительно меньше.

— file: поле создает тег дающий возможность пользователю прикрепить к сообщению файл. В настройках тега можно указать “File size limit (bytes)” максимальный размер прикрепляемого файла, разрешенные типы файлов (расширения через запятую). Внимание, если вы не указываете максимальный размер прикрепляемого файла, то по умолчанию он определяется возможностями вашего сервера. Точную информацию по ограничениям вы можете узнать у компании предоставляющей вам хостинг. Обычно максимальный размер ограничен 10 Мб.

submint: тег добавляет кнопку “Отправить” (название можно поменять).
Это скрин со всеми генерированными мною тегами, а ниже скрин формы на сайте. Обратите внимание, что “Шаблон формы” поддерживает HTML теги, поэтому пояснения для пользователей я оформляю с помощью HTML тегов.

5. Вкладка “Письмо”.

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

Вносим их в тело письма (поле “Message Body”): просто копируйте теги выделенные черным и вставляйте их в форму тела письма. Обратите внимание что номера обозначенные в тегах совпадают с уникальными номерами полей которые вы добавляли в шаблоне формы. Таки образом вы можете идентифицировать какое поле к чему относится и подписать их непосредственно в теле письма, что бы потом не запутаться.
Сохраняем изменения.

6. Установка формы на сайт.

C странице создания формы копируем шор код (обычно он выделен синим или коричневым цветом) и вставляем его в любую страницу или пост.

Плюсы и минусы кратко

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

Минусы:
— надо не забывать вносить дополнительные теги в генерированное письмо
— оформление формы и письма требует минимальные знания HTML

Вывод: безусловно отличный редактор, если не сказать — лучший! Радует гибкость, надежность и стабильность. Если бы он был платный, его все равно бы покупали, т.к. по качеству близкого к нему нет и рядом. Рекомендую плагин 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

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

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

(Последнее обновление: 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");

Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.

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

Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.

Плюсы плагина Contact Form 7.

1. Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться.
2. Создание большого количества разных форм и интеграция их на сайт.
3. Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно.
4. Поддержка русского и других языков.
5. Поддержка Ajax запросов.
6. Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить Really Simple CAPTCHA.
7. Настройка внешнего вида формы с помощью css стилей.
8. Интеграция с сервисом Akismet, для защиты от спама.

У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.

Дайте начинать!

Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта .

После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.

Настройка плагина Contact Form 7 и создание формы обратной связи.

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

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

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

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

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

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

Поле «Сгенерировать тег»

Слева можно увидеть поля которые уже добавлены в форму.

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

Приступает.

Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:

Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона ” и тоже по аналогии делаем.

Для настройки сообщения выбираем “Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.

Теперь добавляем поле «Вопроc «. Для этого в выпадающем списке выбираем пункт “Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.

поле «Вопрос»

И последнее что нам необходимо, это кнопка “Отправить ”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить ”.

Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.

Вот что у меня получилось:

У Вас должно быть, что-то похожее.

Настройка адресата формы и сообщений

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

1. Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму.
2. Поле отправитель. Вместо <>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет <>.
3. Поле тема. Я всегда пишу Форма обратной связи и указываю сайт.
4. Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: <> и данные Телефон: , Сообщение ..
5. Остальные поля пустые.

В конце не забываем сохранятся.

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

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

У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо . ” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.

Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.

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

По причине того, что плагин 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, советуем изучить уроки