Сорванец contact form id. Как создать контактную форму обратной связи на WordPress? Дефолтное значение из нескольких источников

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

Документация и поддержка Скриншоты Установка
  • Загрузите всю папку contact-form-7 в директорию /wp-content/plugins/ .
  • Активируйте плагин на странице «Плагины» в панели управления 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 .

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

    События DOM

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

    Список событий формы

    Wpcf7invalid Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , потому что были поля с недопустимым вводом. wpcf7spam Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , поскольку обнаружена возможная активность спама. wpcf7mailsent Срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату. wpcf7mailfailed Срабатывает, когда форма успешно была отправлена на сервер, но отправить почту не удалось . Это может быть в следствии того, что на хостинге не работает почтовый сервер. wpcf7submit Срабатывает, когда форма успешно была отправлена на сервер, независимо от других инцидентов. Нажали кнопку "Отправить" - сработало этой действие. wpcf7beforesubmit Срабатывает раньше события wpcf7submit , что позволяет провести любые манипуляции с formData - данными формы, которые будут отправлены на сервер. Событие добавлено в CF7 v4.9.

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

    Примеры для события wpcf7submit

    Код ниже - простой пример регистрации обработчика события. В этом примере функция прослушивает событие wpcf7submit у контейнера с классом wpcf7 и просто выдает предупреждение при его возникновении, то есть при клике по кнопке "Отправить" сразу вызывает сообщение "Опачки, меня пытаются отправить... в Магадан!". Заметьте, что элемент с классом wpcf7 - это DIV с формой внутри, всё это плагин генерирует самостоятельно. Если у вас на странице несколько форм, код отработает только для первой найденной формы . Конечно, вы замените ненужный alert() на более полезное действие, к примеру, красивой анимацией отправки формы.

    // Ищем блок с формой, имеющий класс wpcf7 (его имеют все div с формой) var wpcf7Elm = document.querySelector(".wpcf7"); // Мониторим событие wpcf7submit у выбранного блока wpcf7Elm.addEventListener("wpcf7submit", function(event) { alert("Опачки, меня пытаются отправить... в Магадан!"); // Либо что-то более полезное }, false);

    Если вам захочется мониторить какую-то определенную форму (ниже по статье будут альтернативные решения, более рациональные), то укажите ID контейнера:

    // Ищем уникальный блок с формой по его ID var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Тут мониторинг события wpcf7submit , как в предыдущем примере.

    Примеры выше рассчитаны на работу с одной формой. Если на странице несколько форм и надо мониторить событие wpcf7submit (или другие) у всех, то вешаем событие не на отдельный блок, а на весь document:

    Document.addEventListener("wpcf7submit", function(event) { alert("Кто-то отправил форму! Какую именно? Пока не знаю."); }, false);

    Как отследить введенные данные в поля

    Пользовательские данные передаются обработчику события как свойство detail.inputs объекта события. Структура данных detail.inputs представляет собой массив объектов, и каждый объект имеет свойства имени и значения. Допустим у формы 4 поля. Используем код:

    Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; console.log(inputs); }, false);

    При нажатии кнопки "Отправить" в консоле браузера отобразится структура данных:

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

    Перебрать каждое поле и отреагировать на определенное можно так:

    Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; // Ищем поле с именем your-name и злоупотребляем alert"ом при нахождении поля for (var i = 0; i < inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

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

    Detail.contactFormId ID контактной формы. Данный ID можно увидеть в админке в адресной строке при редактировании формы или в самом шоткоде формы. detail.pluginVersion Версия плагина Contact Form 7. detail.contactFormLocale Языковой код формы. К примеру, ru_RU . detail.unitTag Юнит-тег контактной формы. У каждой формы свой, к примеру wpcf7-f92-p95-o1 . detail.containerPostId ID поста, в контенте которого размещена форма.

    Просмотреть все данные можно так:

    Document.addEventListener("wpcf7submit", function(event) { console.log(event.detail); }, false);

    Как обработать определенную форму

    Например, если вы хотите что-то сделать только с определенной формой контакта (ID = 123), используйте свойство detail.contactFormId, как показано ниже:

    Document.addEventListener("wpcf7submit", function(event) { if ("123" == event.detail.contactFormId) { alert("Контактная форма с ID = 123."); // Делаем ещё что-нибудь } }, false);

    Борьба со спамом с помощью Akismet

    Как бороться со спамом в плагине Contact Form 7? Предусмотрено несколько механизмов, но лишь пара являются популярными: reCAPTCHA и Akismet.

    Как установить и настроить Akismet? При установке WordPress плагин Akismet устанавливается автоматически, остаётся его лишь активировать. Если по каким-то причинам его нет, то эти ссылки Вам помогут:

    После активации плагина появится сообщение с предложением активировать вашу учётную запись:

    При нажатии по кнопке вас перекинет на страницу настроек плагина:

    Чтобы Akismet заработал, надо в настройках плагина указать API-ключ. Если его нет, то нажимайте кнопку "Получить API-ключ" и следуйте инструкциям:

    • Регистрация на офф. сайте плагина с использованием аккаунта wordpress.com
    • Выбор тарифного плана (есть бесплатный)
    • Добавление сайта в админ-панель сервиса по нажатию кнопки "Activate this site"

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

    Чтобы Akismet начал проверять поле, нужно при его генерации указать по какому правилу делать проверку, например:

    Akismet:author Добавьте такой параметр в поле для ввода имени пользователя.
    Пример: akismet:author_email Добавьте такой параметр в поле для ввода email пользователя.
    Пример: akismet:author_url Добавьте такой параметр в поле для ввода ссылки от пользователя.
    Пример:

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

    В Contact Form 7 есть несколько видов оформления извещений:

    Зеленая рамка у извещения Сообщение отправлено успешно Жёлтая рамка у извещения Некоторые поля заполнены с ошибкой, валидацию поле не прошло Оранжевая рамка у извещения Сообщение отмечено как спам Красная рамка у извещения Отправка сообщения провалена

    Теперь можно протестировать работу формы с Akismet защитой, вписав вместо имени пользователя "viagra-test-123". Сообщение с такими данными будет помечено как спам и отослано на почту не будет.

    Ограничение доступа к панели администрирования

    Изначально, вкладка с формами Contact Form 7 доступна всем пользователям с ролью участника (contributor) и выше. Редактировать формы могут только редакторы и администраторы. Как изменить права доступа к формам?

    Параметры доступа изменяются с помощью констант, которые прописываются в корне движка в файле wp-config.php , например:

    Define("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");

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

    WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке, то есть отображения меню и списка форм.
    По умолчанию: edit_posts WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Объясняется это тем, что нельзя редактировать формы, не имея доступа к админ-панели.
    По умолчанию: publish_pages

    Чтобы лучше понимать, как это работает, взгляните на код (CF7 v4.9.1, файл capabilities.php) с использованием этих констант:

    Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); function wpcf7_map_meta_cap($caps, $cap, $user_id, $args) { $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_edit_contact_forms" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_read_contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "read",); $meta_caps = apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_keys($meta_caps)); if (isset($meta_caps[$cap])) { $caps = $meta_caps[$cap]; } return $caps; }

    Из кода видно, что массив возможностей проходит через фильтр wpcf7_map_meta_cap , и содержит следующие данные:

    По умолчанию Array ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => read) После изменения, к примеру, с помощью констант Array ( => manage_options => manage_options => manage_options => manage_options => manage_options => read)

    Благодаря фильтру wpcf7_map_meta_cap , мы может изменить данный массив. Этот способ избавляет нас от редактирования файла wp-config.php , но придется писать код, к примеру, в файле functions.php:

    Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); function change_wpcf7_map_meta_cap($meta_caps) { // Новые значение возможностей $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_contact_forms" => "manage_options", "wpcf7_delete_contact_form" => "manage_options",); return array_replace($meta_caps, $replace_caps); }

    Оформление чекбоксов и радиокнопок

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

    Так выглядят чекбоксы по умолчанию:

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

    Чтобы выстроить чекбоксы в столбик, добавьте строку стилей в CSS файл темы:

    Span.wpcf7-list-item { display: block; }

    Чтобы выстроить чекбоксы как таблицу, добавьте строку стилей в CSS файл темы (дополнительно использовался параметр label_first):

    Span.wpcf7-list-item { display: table-row; } span.wpcf7-list-item * { display: table-cell; }

    Загрузка JavaScript и CSS по необходимости

    По умолчанию Contact Form 7 загружает JavaScript и CSS на всех страницах сайта, независимо где используется форма. Технически плагин не может работать иначе, но ему можно «подсказать».

    Пример 1 - полное отключение JavaScript и CSS и включение где нужно Шаг 1 - отключение JavaScript и CSS на всех страницах сайта

    Существует константа WPCF7_LOAD_JS со значением по умолчанию true , которая определена в коде плагина и отвечает за загрузку JavaScript на всех страницах сайта. Её можно переопределить, вставив в файл wp-config.php код:

    Define("WPCF7_LOAD_JS", false);

    Этот код отменит загрузку скриптов плагина.

    И такая же константа есть для стилей WPCF7_LOAD_CSS , которая работает по тому же принципу - отменяет загрузку стилей плагина:

    Define("WPCF7_LOAD_CSS", false);

    С версии плагина 3.9 и выше, можно отменить загрузку JavaScript и CSS через хуки в functions.php:

    Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

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

    Шаг 2 - загрузка файлов на страницах с формами

    Например, у нас есть страница "Контакты" с формой. За вывод страницы отвечает файл contact.php . Тогда, воспользуемся кодом:

    If (function_exists("wpcf7_enqueue_scripts")) { wpcf7_enqueue_scripts(); } if (function_exists("wpcf7_enqueue_styles")) { wpcf7_enqueue_styles(); }

    Эта конструкция должна быть размещена в файле contact.php до вызовы функции wp_head() . Это рекомендация разработчика плагина.

    Пример 2 - отключение скриптов и стилей везде где НЕ нужно

    Есть более гибкий метод, позволяющий указать, на каких страницах подключать скрипты. Данный код нужно вставить в functions.php:

    1 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts add_filter("wp", "cf7_disable_css_js"); function cf7_disable_css_js(){ if(! is_page("contacts")){ add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } } 2 вариант: ## Отключаем стили, скрипты плагина везде кроме страницы contacts add_action("wp_print_styles", "my_deregister_javascript", 100); function my_deregister_javascript(){ if(! is_page ("contacts")){ wp_deregister_script("contact-form-7"); // отключаем скрипты плагина wp_deregister_style("contact-form-7"); // отключаем стили плагина } } Пример 3 - включение скриптов только при использовании шорткода формы

    Сначала отменяем подключение JS и CSS, а затем подключаем обратно только тогда, когда срабатывает шорткод формы. Тем самым файлы подключатся только на тех страницах, где есть шорткод формы.

    Function wpcf7_remove_assets() { add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } add_action("wpcf7_init", "wpcf7_remove_assets"); function wpcf7_add_assets($atts) { wpcf7_enqueue_styles(); return $atts; } add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

    Код можно оформить как плагин или вставить в functions.php темы.

    Отслеживание форм с помощью Google Analytics

    Есть простой способ отслеживать события формы через Google Analytics.

    Во-первых, убедитесь в наличии кода от Google Analytic, выглядит он примерно так:

    (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,"script","//www.google-analytics.com/analytics.js","ga"); ga("create", "UA-XXXXX-Y", "auto"); ga("send", "pageview");

    Если код Аналитики есть или после его установки, в систему можно отправлять данные, за которыми затем можно следить в админке Google Analytics. Подробнее об этом читайте в официальной документации об отслеживании событий .
    К примеру, нужно отследить отправку форму, для этого нужно выполнить такой код:

    Ga("send", "event", "Contact Form", "submit");

    Последним шагом является вставка этого фрагмента в код JavaScript в заголовок HTML ( ) каждой страницы. Вы можете для этого отредактировать шаблон header.php вашей темы, или вы можете использовать на хуке wp_head functions.php.

    document.addEventListener("wpcf7mailsent", function(event) { ga("send", "event", "Contact Form", "submit"); }, false);

    А так можно отслеживать успешную отправку каждой отдельной формы:

    Document.addEventListener("wpcf7mailsent", function(event) { if ("123" == event.detail.contactFormId) { ga("send", "event", "Contact Form 123", "submit"); } if ("253" == event.detail.contactFormId) { ga("send", "event", "Contact Form 253", "submit"); } }, false);

    Теперь, при успешной отправке формы вы будите видеть это событие в админке Google Analytics (Поведение -> События -> Обзор). Возможно, данные появятся там не сразу после совершения события, а после 24-48 часов.

    Выбор адресата в форме

    Представим, что у вас небольшая веб-студия с персоналом: сеошник, продажник и техподдержка. Как с помощью одной формы отправить информацию кому-то из них лично? На помощь придёт поле select (выпадающий список)! Задача решается в два этапа.

    1 этап - добавление тега в шаблон формы:

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

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

    [email protected] [email protected] [email protected]

    Как видно, адреса электронной почты "хранятся" в открытом виде. Этим могут воспользоваться вездесущие спамеры. Но не после маленькой хитрости... Модернизируем наш тег так:

    Здесь мы передавали параметр через так называемую трубу (прямой слеш) по правилу имя|значение. В итоге получили следующую html структуру на выходе:

    Сеошник Продажник ТехПоддержка

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

    Усложним задачу еще...

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

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

    Итак, первая копия приходит сеошнику и тот понимает о чем речь в сообщении. А вот менеджер не понимает, какому специалисту было адресовано письмо, ведь он может не до конца разбираться в теме или не помнить все почтовые адреса специалистов. Возникает потребность в шаблоне письма использовать не только значение поля (в нашем случае адреса электронной почты), но и заголовок пункта (название специалиста)? Для этого плагин предоставляет нам тег [_raw_{field name}] , где {field name} - название нашего поля. Подытожим употребление тегов:

    Значение поля, которое в шаблоне письма преобразуется в значение выбранного пункта (адрес электронной почты в нашем примере, то есть [email protected]) [_raw_your-recipient] имя поля, которое в шаблоне письма преобразуется в имя (заголовок) выбранного пункта (название специалиста в нашем примере, то есть Сеошник)

    Если данный функционал не нужен, то его можно отключить, вписав следующий код в файл wp-config.php:

    Define("WPCF7_USE_PIPE", false);

    Добавление Cc, Bcc и других заголовков письма

    Contact Form 7 во вкладке с настройкой шаблона письма имеет поле для отправки дополнительных заголовков (Additional Headers) по правилу название-заголовка: значение. Каждый заголовок должен идти с новой строки.

    Рассмотрим самые популярные - Reply-To , Cc и Bcc , об остальных читайте на Википедии .

    Reply-To Имя и адрес, куда следует адресовать ответы на это письмо. К примеру, вы в форме попросили пользователя указать его email. Используйте его, чтобы почтовый клиент сразу знал, на какой email надо отправить ответ. Cc (от англ. carbon copy) содержит имена и адреса вторичных получателей письма, к которым направляется копия. Bcc (от англ. blind carbon copy) содержит имена и адреса получателей письма, чьи адреса не следует показывать другим получателям.

    Contact Form 7 на вашем языке

    Contact Form 7 автоматически использует перевод того языка, который вы используете в админке. Меняется язык в Настройки -> Общие -> Язык сайта (выпадающий список). Но так изменится язык для всего сайта. А что делать, когда у вас авторы говорят на разных языках?

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

    Специальные теги письма

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

    Теги отправки [_remote_ip] Этот тег будет заменен на IP пользователя. [_user_agent] Этот тег будет заменен на User Agent браузера пользователя. User Agent - это строка, которую используют веб-браузеры в качестве своего имени, она содержит не только имя браузера, но и версию операционной системы и другие параметры. [_url] Этот тег будет заменен на адрес страницы, с которой была отправлена форма. [_date] Будет заменен на дату отправки формы. [_time] Будет заменен на время отправки формы. [_invalid_fields] Этот тег заменяется количеством полей формы с недопустимым вводом. Используйте в шаблонах уведомлений. [_serial_number] Будет заменен на порядковое число сохраненного сообщения. Должен быть установлен плагин Flamingo 1.5+, о нем рассказано ниже. Теги поста

    Данные теги будут работать только в контенте поста. Если форма в модальном окне, в сайдбаре, футере или хедере, встроена в шаблон темы, то есть вне контента поста - они не сработают.

    [_post_id] Будет заменен на ID поста, в контенте которого отображена форма. [_post_name] Будет заменен на имя (slug) поста, с которого была отправлена форма. [_post_title] Будет заменен на название (заголовок) поста, с которого была отправлена форма. [_post_url] Будет заменен на ссылку (url) поста, с которого была отправлена форма. [_post_author] Будет заменен на имя автора поста, с которого была отправлена форма. [_post_author_email] Будет заменен на email автора поста, с которого была отправлена форма.

    Теги сайта

    [_site_title] Будет заменен названием сайта (указывается в Общих настройках). [_site_description] Будет заменен описанием сайта (указывается в Общих настройках). [_site_url] Будет заменен адресом сайта (указывается в Общих настройках). [_site_admin_email] Будет заменен на адрес e-mail сайта (указывается в Общих настройках).

    Теги пользователя

    Эти теги предоставляют информацию о текущем зарегистрированном пользователе .

    Теги [_user_*] работают только тогда, когда Отправитель имеет учетную запись и авторизовался. Если форму отправит неавторизованный пользователь, то эти теги вернут пустой результат и смысла от них не будет. Рекомендуется включить режим " ", чтобы форма отображалась только для зарегистрированных пользователей.

    Если нужно использовать эти теги, и при этом не нужно использовать опцию "только для подписчиков" (subscribers_only: true), вам нужно включить nonce опцию. Если всего этого не сделать, данные авторизованных юзеров будут сброшены через WP REST API и указанный тег будет пропущен (заменен на пустую строку).

    [_user_login] Будет заменен на логин пользователя. [_user_email] Будет заменен на email пользователя. [_user_url] Будет заменен на URL сайта пользователя. [_user_first_name] Будет заменен на имя пользователя. [_user_last_name] Будет заменен на фамилию пользователя. [_user_nickname] Будет заменен на ник пользователя. [_user_display_name] Будет заменен на отображаемое имя пользователя.

    Сохранение отправленных сообщений с помощью Flamingo // Можно тоже самое сделать с помощью фильтра add_action("wpcf7_autop_or_not", "__return_false"); WPCF7_USE_PIPE Когда значение константы false (по умолчанию true), Contact Form 7 начинает воспринимать | как обычный символ. WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке.
    По умолчанию: edit_posts . WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. По умолчанию publish_pages . Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Это объясняется тем, что Нельзя редактировать формы, не имея доступа к панели администрирования. WPCF7_CAPTCHA_TMP_DIR Определение этой константы переопределит путь к папке для временных файлов CAPTCHA. WPCF7_CAPTCHA_TMP_URL Определение этой константы переопределит ссылку к папке для временных файлов CAPTCHA. WPCF7_UPLOADS_TMP_DIR Определение этой константы переопределит путь к временной папке для загруженных файлов. WPCF7_VERIFY_NONCE

    Указывает плагину, проверять nonce (защитный код) или нет. С версии плагина 4.9 эта константа стала иметь значение false , то есть "не проверять". Вернуть проверку можно установив значение константы в true или с помощью хука

    Add_filter("wpcf7_verify_nonce", "__return_true");

    Перенаправление на другой адрес после отправки формы

    Когда нужно после успешной отправки формы переадресовать пользователя на какую-то страницу, к примеру, с благодарностью или подарком, воспользуйтесь JavaScript хуком:

    document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);

    Смотрите пункт "События DOM", чтобы разобраться, как это работает.

    Черный список спама от WordPress для фильтрации форм

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

    Черный список находится в админке по пути Настройки -> Обсуждение.

    Если сообщение, отправляемое через Contact Form 7, содержит какие-либо из этих слов в своём тексте, имени автора, URL, адресе e-mail или IP - оно будет помечено, как спам, и отправлено не будет. Каждое слово или IP с новой строки. Используется поиск по подстроке, то есть по слову «купи» будет найдено «купить».

    Как узнать IP-адрес, с которого приходит спам через форму Contact Form 7? Самый простой способ заключается в использовании специального тега [_remote_ip] . Данный тег вставляется в шаблон письма и будет заменен на IP-адрес отправителя при отправке письма.

    Дизайн форм Contact Form 7

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

    Какой CSS редактировать чтобы изменить внешний вид формы?

    Все стили, которые отвечают за внешний фид форм, хранятся в файле плагина contact-form-7/includes/css/styles.css . Изменять этот файл - плохая идея, так как при обновлении плагина файл заменится и вы потеряете все изменения. Тоже самое относится и к публичным темам, которые также обновляются, как и плагины.

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

    Если у вас своя тема, то можно изменить (перебить) стили Contact Form 7 в стилях темы.

    Стили полей в Contact Form 7

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

    Wpcf7 input{ background-color: #fff; color: #000; width: 50%; }

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

    Wpcf7 input, .wpcf7 input, .wpcf7 textarea{ background-color: #fff; color: #000; width: 50%; }

    Вышеперечисленные стили будут применены ко всем полям и формам плагина Contact Form 7 на это указывает селектор.wpcf7 . Подробнее о селекторах .

    Стиль для определенного поля

    При создании любого поля можно задать ему идентификатор или класс:

    Теперь в CSS, благодаря идентификатору, мы можем обратиться только к этому полю:

    #very-special-field{ color: #f00; border: 1px solid #f00; }

    Стиль формы

    Про стили полей поговорили, а как добавить оформление самой форме? Воспользуемся уже известным нам классом wpcf7 , который добавляется ко всем формам плагина:

    Wpcf7{ background-color: #f7f7f7; border: 2px solid #0f0; }

    Настройка сообщений об ошибках

    При отправке формы, если обязательное поле не заполнено или не прошло првоерку, Contact Form 7 отобразит сообщение об ошибке. Эти сообщения можно настроить.

    Изменение текста

    Текст той или иной ошибки, уведомления можно изменить. Например, при отправке формы с незаполненным обязательным полем появляется сообщение "Поле обязательно." Чтобы изменить текст этого сообщения, откройте редактирование формы, вкладку "Уведомления при отправке формы ". Если нужно изменить текст ошибки для каждого поля в отдельности, то стоит обратить внимание на плагин Contact form 7 Custom validation .

    Статическое или плавающее сообщение?

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

    Статический стиль сообщений

    Сообщения об ошибках отображаются ниже поля и не исчезают, пока форма не будет успешно отправлена.

    Плавающий стиль сообщений

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

    Плавающий стиль для нужного поля

    Чтобы задать плавающий стиль определенному полю, нужно обернуть его в блок с классом use-floating-validation-tip:

    Плавающий стиль для всех полей

    Чтобы не оборачивать каждое поле в блок с классом use-floating-validation-tip , можно "попросить" плагин сделать это за нас, указав в шорткоде формы атрибут html_class со значением use-floating-validation-tip:

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

    Менеджер длинных листов с Listo

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

    Например:

    Управлять такой "колбасой" сложно и вероятность допустить ошибку высока.

    Для решения такой нелепицы есть плагин Listo , который предоставляет следующие списки:

    • Страны - data:countries , data:countries.olympic
    • Структурные подразделения США - data:us_subdivisions.states , data:us_subdivisions.districts
    • Валюты - data:currencies
    • Временные зоны

    Contact Form 7 умеет работать с Listo (или наоборот этого никто не знает), который в свою очередь работает с полями: выпадающий список, чекбоксы и радио-кнопки. Благодаря такой связке не придётся болезненно редактировать длинные списки, а можно будет использовать короткие предопределенные параметры.

    Как управлять параметрами длинного списка

    К примеру, мы решили вывести список стран, для этого понадобится тег выпадающего списка :

    Список пока пустой, мы не передали никаких параметров. Добавим их:

    Всего один параметр и мы стали веганами - никакой "колбасы" с перечислением стран - за нас это сделал Listo.

    Дополнительные настройки

    Каждой форме можно указать доп. параметры во вкладке "Дополнительные настройки". Рассмотрим все такие настройки:

    Режим "Только для подписчиков"

    Subscribers_only: true

    Данный режим (доступен с CF7 v7 4.9) позволяет отобразить форму только для зарегистрированных пользователей. Незарегистрированные пользователи увидят сообщение "Эта форма доступна только для зарегистрированных пользователей." и, соответственно, не смогут заполнить и отправить форму. Отличный способ избавиться от спама, если вам нужно принимать письма только от авторизованных пользователей.

    Демо режим

    Demo_mode: on

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

    Пропустить письмо

    Skip_mail: on

    Параметр skip_mail работает почти так же, как demo_mode , но skip_mail пропускает только отправку сообщений. В отличие от demo_mode, skip_mail не влияет на другие действия, такие как сохранение сообщений с помощью Flamingo.

    Принудительная проверка полей

    Acceptance_as_validation: on

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

    Запрет сохранения сообщений

    Do_not_store: true

    Этот параметр сообщает модулям хранения сообщений, таким как Flamingo , чтобы те не сохраняли сообщения через эту форму контакта.

    Выполнение JavaScript кода

    Этот функционал пригодится, когда нужно отслеживать поведение пользователей. К этим хукам можно прикрепить отслеживание через Google Analytics или другие системы статистики (об этом говорится выше).

    on_sent_ok: "alert("sent ok");" on_submit: "alert("submit");" on_sent_ok переданный JavaScript будет выполнен после успешной отправки формы. on_submit переданный JavaScript будет выполнен при нажатии на кнопку "Отправить". Скрытие формы Contact Form 7 после успешной отправки сообщения

    У нас есть настроенная и рабочая форма. И нужно, чтобы когда пользователь нажимает на кнопку "Отправить" и нам уходит письмо, форма пропадала, а на её месте появлялся текст "Отправлено!".

    Делается это просто: для этого в дополнительных настройках плагина добавьте такую строку:

    Document.addEventListener("wpcf7mailsent", function(event) { jQuery("#contactform").hide(); }, false);

    где contactform - это ID формы которую нужно скрыть. Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть.

    Как в теге select объединить похожие option в отдельные группы? Данный функционал может обеспечить html тег optgroup, но по умолчанию плагин Contact Form 7 это не умеет. Рассмотрим способы решения этой нестандартной для плагина задачи.

    Способ 1 с использованием JavaScript

    Данный способ подсмотрен на codepen.io и немного переработан. Суть способа в том, что JavaScript "считывает структуру тега select и преобразовывает в нужный формат. В примере будет рассмотрено поле для выбора движка:

    Шаблон формы:

    Имя поля выбрано engines , потому в шаблоне письма используем тег , чтобы на почту пришло выбранное пользователем значение.

    Добавляем JavaScript

    JQuery(document).ready(function($){ var selectEngines = $("select"); var foundin = $("option:contains("optgroup-")", selectEngines); $.each(foundin, function(value){ var updated = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll(""); }); $("option:contains("optgroup-"), option:contains("endoptgroup")", selectEngines).remove(); });

    Данный код реализован на jQuery. Вставлять его следует в js файл темы или создать новый js и подключить . Так как имя тега было engines , то в этом коде указываем именно его, то есть select .

    Оригинальный html код поля select

    optgroup-Бесплатные движки Wordpress Joomla! Drupal Grav endoptgroup optgroup-Платные движки 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup

    Обработанный html код поля select

    Wordpress Joomla! Drupal Grav 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop

    Если у пользователя отключен JavaScript , то поле будет отображать все option. То есть даже те option, что должны были быть преобразованы в тег optgroup, станут видны как обычные option.

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

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

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

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

    Зачем вам нужна контактная форма WordPress?

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

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

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

    • – спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
    • Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
    • Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.

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

    Начнем-с, господа.

    Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress

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

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

  • Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
  • WPForms Lite полностью бесплатен.
  • Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию Pro.

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

    Шаг 2: Установка плагина контактной формы WordPress

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

    В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).

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

    Шаг 3: Создание контактной формы в WordPress

    Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).

    Это позволит открыть вам конструктор Wpforms, где простым перетаскиванием нужных блоков вы можете создать контактную форму обратной связи WordPress. В бесплатной версии Lite доступны два предварительно встроенных шаблона (пустой и простая форма). Вы же можете использовать их вместе, чтобы составить нужную и удобную для вас. В этом примере для вас мы выбрали второй вариант, т.е простой контактной формы. В нее добавим имя, Email и текстовое поле.

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

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

    Когда все сделано, просто нажмите кнопку Сохранить (Save).

    Шаг 4: Настройка уведомлений и Подтверждений

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

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

    Форма уведомления – это сообщения, которые получаете вы, когда к вам приходит новая заявка или email письмо с вашего WordPress сайта.

    Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.

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

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

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

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

    Шаг 5: Добавление контактной формы WordPress на страницу

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

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

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

    Вот как примерно будет выглядеть форма на простой WordPress странице:

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

    Шаг 6: Добавление контактной формы WordPress в сайдбар

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

    Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.

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

    На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!

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

    Так, на всякий случай, чтобы вы знали, что они естьJ

    Как сделать контактную форму обратной связи с помощью Contact Form 7

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

    Она уже установлена на моем сайте, не на этом блоге. Процедура стандартная. Теперь нам нужно зайти в админку блога и создать новую форму, которая будет собирать нам заявки и другую полезную информацию. Переходим в раздел «Contact Form 7» -> Добавить новую.

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

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

  • Его имя, чтобы к нему обратиться (персональное обращение)
  • Адрес почты (обратная связь, куда отправлять ему предложение)
  • Номер телефона, чтобы сразу позвонить (если это произойдет быстро, то он в любом случае станет вашим клиентом)
  • Собственно кнопка «Отправить»

    • Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.

    Создание полей контактной формы в плагине Contact Form 7

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

    • Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
    • Email (тут предназначение одно, чтобы пользователь ввел )
    • URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
    • Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
    • Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
    • Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
    • Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
    • Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
    • Checkboxes (множественный выбор, например: Сайт + Создание логотипа + продвижение + контекстная реклама)
    • Radio buttons (Выбор какого-то одного пункта, например: «Вы заказываете или контекстную рекламу или таргетированную»)
    • Acceptance (Принимаете условия соглашения, т.е пользовательская информация, типо публичной оферты)
    • Quiz (Викторина – серия коротких вопросов, тоже можно вставить в контактную форму).
    • reCaptcha (Подтверждение, что вы не робот и не будете спамить.) Хорошая защита от СПАМА. Примечание: данная опция работает, если вы подключили плагин Really Simple Captcha.
    • File (Если вы хотите дать возможность пользователям загрузить вам файл, например: «Прикрепите ТЗ на разработоку сайта»).
    • Submit (Отправить данные на почту)

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

    В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:

    Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:

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

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

    Чтобы вы не запутались я выделил его стилем. Код ниже:

    Full Name

    < div class = "col-md-4" > < label class = "sr-only" > Full Name < / label > [ text* text - 658 class : form - control placeholder "Ваше имя" ] < / div >

    А вот скрин:

    Аналогичную операцию проделываем для поле «Email». Кликаем на соответствующую вкладку и попадаем вот в такое диалоговое окошко.

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

    Full Email

    < div class = "col-md-4" > < label class = "sr-only" > Full Email < / label > [ email* email - 447 class : form - control placeholder "Ваш Email" ] < / div >

    А вот скрин:

    И, наконец, кнопка «Submit» (Отправить данные). Она у меня вся в стилях.

    < div class = "col-md-4" > [ submit class : btn - flat class : col - xs - 12 "Заказать" ] < / div >

    < / div >

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

    Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂

    Часть работ мы сделали, теперь переходим к следующему этапу.

    Настройка почтового адреса для приема заявок

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

    Нам необходимо нажать на большую вкладку «Письмо». Она будет второй после Шаблона формы.

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

    Теперь по полям:

    • To (Куда будет отправляться заявка, в моем случае, это мой адрес почты, можно указывать несколько адресов, куда присылать заявки)
    • From (Поле Откуда, т.е будет подставляться значение, что заявка идет с моего студийного сайта)
    • Тема (Служит для определения, с какой формы приходит заявка, в нашем случае это заявка с формы продвижения сайта).
    • Additional Headers (Дополнительные заголовки, их не трогаем, они нужны для корректности отправки формы)
    • Message Body (Тело сообщения, здесь вы указываете, От кого пришло письмо и с какого адреса, например: «От: Ивана» «Адрес почты: vasya @ mail . ru »)
    • File Attachments (Приложения к файлу, не трогаю)

    Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.

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

    • При успешной отправки сообщения: «Ваше сообщение было отправлено успешно. Спасибо.»
    • При некорректной отправке сообщения с формы: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
    • Ошибка заполнения: «Ошибки заполнения. Пожалуйста, проверьте все поля и отправьте снова.»
    • Отправленные данные определены как спам: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
    • Некоторые условия должны быть приняты: «Пожалуйста, примите условия для продолжения.»
    • Некоторые поля должны быть заполнены: «Пожалуйста, заполните обязательное поле.»
    • Превышена длина символов в поле: «Указано слишком много данных.»
    • Недостаточная длина символов в поле: «Указано слишком мало данных.»
    • Неверный формат даты: «Формат даты некорректен.»
    • Ранняя дата в минимальном пределе: «Указана слишком ранняя дата.»
    • Поздняя дата в максимальном пределе: «Указана слишком поздняя дата.»
    • Неудачная загрузка файла: «Не удалось загрузить файл.»
    • Неразрешенный тип файлов: «Этот тип файла не разрешен.»
    • Загрузка слишком большого файла: «Этот файл слишком большой.»
    • Загрузка файла не удалась из-за ошибки PHP: «Отправка файла не удалась. Возникла ошибка.»
    • Числовой формат, введенный отправителем, неверен: «Числовой формат некорректен.»
    • Число меньше минимального предела: «Это число слишком мало.»
    • Число больше максимального предела: «Это число слишком велико.»
    • Отправитель не ввел корректный ответ на вопрос: «Вы ввели некорректный ответ.»
    • Адрес e-mail, введенный отправителем, неверен: «Некорректный e-mail.»
    • URL, введенный отправителем, неверен: «Некорректный URL.»
    • Номер телефона, введенный отправителем, неверен: «Некорректный номер телефона.»

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

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

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

    Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:

    Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:

    Супер! Теперь давайте попробуем отправить форму ничего в нее не заполнив. И вот, что мы увидим.

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

    Нажимаем отправить и вот, что пишет наша форма:

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

    Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.

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

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

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

    Для того, чтобы наша форма стала адаптивной, т.е «резиновой», нам необходимо подключить еще один плагин, а точнее его дополнение к Contact Form 7 – называется он Bootstrap Contact Form 7. Устанавливаем и просто активируем и все – он работает. С ним никаких настроек делать не нужно. Установили и забыли.

    На следующем шаге я расскажу, какие изменения нужно внести, чтобы наша форма стала всплывающей и адаптивной. Подобную реализацию я сделал на главной странице своего студийного сайта. Для этого перейдем в шаблон index.php, который находится в разделе «Внешний Вид — Редактор». Мы будем работать только с кодом, вручную.

    Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:

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

    Заказать ×Close Оставить заявку

    < a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Заказать< / a >

    < ! -- Modal -- >

    < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" >

    < div class = "modal-dialog" >

    < div class = "modal-content" >

    < div class = "modal-header" >

    < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > & times ; < / span > < span class = "sr-only" > Close < / span > < / button >

    < h4 class = "modal-title black" id = "myModalLabel" > Оставитьзаявку< / h4 >

    < / div >