Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов 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 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

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

Скриншоты

Установка

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

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

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

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

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

Участники

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

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

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

Для кровли крыши в Санкт-Петербурге.

Всем привет! Сегодня я вам расскажу, как можно поставить форму обратной связи для W ord P ress с помощью плагинов, а также простого кода разными способами. Итак, начнем с того, что хоть форма обратной связи у меня не стоит, скорее всего, она вам понадобится по ряду следующих причин:

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

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

— Защита своего емайл адреса. Если вы когда-то вели свою рассылку, то вам наверняка приходили письма следующего содержания: «Продам емайл адреса недорого» и т.д. Данные емайлы собирают со всего интернета специальные боты (роботы), на которые впоследствии будет посылаться спам письма. Если не хотите оказаться в их числе, то вам нужно нигде не светить (показывать) свой адрес от почты. В моем случае это уже не имеет никакого смысла, так как мое мыло (почта) гуляет по интернету более 3 лет и зарегистрировано более чем на 1000 сайтов.

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

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

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

1 ) Итак, представляю вам плагин Usernoise.

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

Установка и настройка плагина Usernoise.

5 ) Установка и настройка плагина Contact Form 7.

Как сделать форму обратной связи для WordPress другими методами?

Вы можете удивиться, но я описал только самую малую часть, как можно сделать форму обратной связи для WordPress. Как бы я ни пытался объять необъятное, у меня это не вышло. Итак, форму обратной связи можно сделать еще через ряд следующих плагинов: Fast Secure Contact Form , Contact Form by Contact ME , Visual Form Builder , nForms – WordPress Form Builder , Mapped Contact Form , Ninja Forms . Помимо этого еще есть разнообразные сервисы, такие как main-ip.ru и smartoforms.ru .

На этом все, если будут вопросы, задавайте.

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

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

Одним из наиболее широко используемых плагинов для создания форм обратной связи является Contact form 7. Он быстро набрал популярность благодаря своей простоте в настраивание содержимым формы. Плюс поддерживает фильтрацию спама и позволяет установить CAPTCHA с помощью дополнительного плагина Really Simple CAPTCHA. Также плагин поддерживает технологию Ajax, что в обработке выполнения запроса веб-страница не перезагружается.

После установки и активации Contact form 7 в панели управления появиться новая вкладка для управления форм. Чтобы найти с ним общий язык долго возиться не придётся, плагин мультиязычный и русский имеется в том числе. Контактная форма стилизуется в зависимости от установленной вами темы, но со знаниями CSS возможно отредактировать на свой вкус.

Пример формы.

2. Form Maker

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

Пример формы.

3. Fast Secure Contact Form

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

Пример формы.

4. Visual Form Builder

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

Окно настроек.

Пример формы.

5. Slick contact forms

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

Пример формы.

На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 – с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице “Контакты”?

Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.

В общем, установлены два плагина: Contact Form 7 и Easy FancyBox , создана контактная форма, осталось добавить код в шаблон.

Код вставляется в шаблон сайта в файлы.php!

Код с всплывающей контактной формой, установленный в коде файла шаблона:

заказать звонок

Если Вы вставляете код вызова формы сразу в Визуальном редакторе для редактирования текста в режиме ТЕКСТ, тогда код будет выглядеть так:

Код с всплывающей контактной формой, установленный в визуальном редакторе записи (в режиме Текст) в админке сайта:

заказать звонок

У меня в примере код для формы “Заказать обратный звонок” – в форме всего два поля – имя и телефон, для того, чтобы администратор сайта перезвонил клиенту.

Рассмотрим данный код.

Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:

заказать звонок

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

В этом коде сама форма вызывается такой функцией:

Где прописано – вывести шорткод для Контактной формы, шорткод указан в самой контактной форме при ее создании:

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

Пример вызова двух форм обратной связи в pop-up окне:

Вызываем форму 1

Вызываем форму 2

В данном случае для вызова нескольких форм обратите внимание на эти части кода:

... и для второй формы: ... и так далее.

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

ПОДПИСАТЬСЯ

Можно использовать этот код для своей формы подписки изменив только адрес ленты http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed на свой.

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

Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Добавляем такой код, если используется плагин с fancybox например Easy Fancybox.