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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приступает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Принцип действия плагина Contact Form 7

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

Тоесть, вы должны зарегистрировать 2 почтовых ящика – отправитель и получатель . Отправитель лучше создать в Яндекс почте, а получатель – это официальный ящик вашего сайта.

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

Настройка плагина Contact Form 7. Инструкция

1) Регистрируем ящик отправитель на Яндекс почте (любой, без разницы какой, его название не важно для работы плагина и не будет видно посетителям). Он будет служить перевалочным пунктом для писем.

2) Настраиваем контактную форму плагина Contact Form 7. Нажмите «Изменить» и далее «Шаблон формы» . Вот пример, как она должна выглядеть с обязательными полями: имя пользователя, его почта, сообщение и кнопка «отправить»:

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

Ваш e-mail (обязательно)

Сообщение

3) Вкладка «Письмо» отвечает за внешний вид писем, которые вы получаете.

Кому – адрес ящика получатель

От кого – <адрес ящика отправитель>

Тема –

Тело письма –

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

Внимание! Чтобы плагин Contact Form 7 отправлял письма, необходимо установить еще один плагин WP-Mail-SMTP. Именно он будет связывать два почтовых адреса отправитель и получатель и выполнять системные функции по отправке писем.

Настройка плагина WP-Mail-SMTP. Инструкция

From Email – адрес ящика отправитель

From Name – к примеру, название вашей организации или ваше имя

Mailer – функция отправки писем. Выберите «Send all WordPress emails via SMTP»

SMTP Host – для Яндекс почты smtp.yandex.ru

SMTP Port – для Яндекс почты 465

Encryption – Use SSL encryption

Authentication – Yes: Use SMTP authentication

Username – логин на вашей почте отправитель

Password – пароль на вашей почте отправитель

Настройка завершена. Сохраните изменения.

Как разместить форму обратной связи Contact Form 7 на странице

В настройках контактной формы обратите внимание на строчку наверху:

Ее нужно скопировать и вставить на любой странице. Все готово.

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

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

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

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

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

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

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

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

Приступает.

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

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

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

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

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

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

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

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

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

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

Все дружно (это относится к поисковикам) порекомендовали — мудрые люди сказали — правь css и не морочь никому голову, «Блокнот» в руки и вперед. Забегая вперед — мудрые люди были правы.

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

После установки создает в корне меню админки раздел «Contact style». В этом разделе есть два пункта содержащие шаблоны на день Валентина и Рождество и «Custom Style» где можно полностью настроить вывод формы. Собственно раздел «Custom Style» и интересует больше всего, подробнее о доступных настройках:

«GENERALS SETTINGS» — можно определить цвет фона, ширину формы (задается в px, % не пробовал), толщина бордюра, форма (пунктир, сплошная и т.д.), цвет, скругление.

«INPUTS AND LABELS SETTINGS» — фон полей ввода, цвет шрифта ввода, фонт (список не велик и с кириллицей там едва ли что-то будет) и его размер. Цвет границ полей, стиль (пунктир сплошная и т.д.), толщина, скругление. Фонт ввода и его размер. Параметры полей в px — высота/ширина, отступы. Фонт метки, стиль, размер, цвет.

«SUBMIT BUTTON SETTINGS» — настройки кнопки отправки формы. Доступные настройки — размер кнопки, скругление, цвет, тип и цвет границы.

Проблемы в использовании.

Ознакомившись с настройками можно прийти к выводу, что все очень хорошо — практика показала обратное. Настроек действительно много, но их не хватает — нет настроек отступа внутри формы, поэтому все блоки собираются на левой границе вплотную к краю форму. Странные настройки «по умолчанию» — где поле ввода размером 100*100 px. Если выставить правильно размеры полей, то выпадающего списка это не коснется и он потащит стиль основной темы. Сбросить на исходные настройки не получилось до удаления плагина…

Пока кроме как вручную поменять стили более менее пристойно не получилось… Чуда не произошло.

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

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

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

Скриншоты

Установка

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

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

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

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

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

Участники

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

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

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: Applies the «not-allowed» cursor style to submit buttons in the «disabled» state.
Acceptance Checkbox: Revises the tag-generator UI to encourage the use of better options in terms of personal data protection.
Introduces wpcf7_anonymize_ip_addr() function.
Представлена опция consent_for:storage для всех типов форм-тэгов.

5.0.2

Added the Privacy Notices section to the readme.txt file.
Updated the Information meta-box content.
Use get_user_locale() instead of get_locale() where it is more appropriate.
Acceptance Checkbox: Reset submit buttons’ disabled status after a successful submission.

5.0.1

Fixed incorrect uses of _n().
Config validation: Fixed incorrect count of alerts in the Additional Settings tab panel.
Config validation: Fixed improper treatment for the [_site_admin_email] special mail-tag in the From mail header field.
Acceptance checkbox: The class and id attributes specified were applied to the wrong HTML element.
Config validation: When there is an additional mail header for mailboxes like Cc or Reply-To, but it has a possible empty value, “Invalid mailbox syntax is used” error will be returned.
Explicitly specify the fourth parameter of add_action() to avoid passing unintended parameter values.
Check if the target directory is empty before removing the directory.

5.0

Additional settings: on_sent_ok and on_submit have been removed.
New additional setting: skip_mail
Flamingo: Inbound channel title changes in conjunction with a change in the title of the corresponding contact form.
DOM events: Make an entire API response object accessible through the event.detail.apiResponse property.
HTML mail: Adds language-related attributes to the HTML header.
File upload: Sets the accept attribute to an uploading field.
Introduces the WPCF7_MailTag class.
Позволяет прервать попытку отправки почты, используя перехватчик действия wpcf7_before_send_mail. Кроме того, вы можете установить пользовательский статус и сообщение через перехватчик действия.
Acceptance checkbox: Allows the specifying of a statement of conditions in the form-tag’s content part.
Acceptance checkbox: Supports the optional option.
New special mail tags: [_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}
New form-tag features: zero-controls-container and not-for-mail