ДЕЛАЕМ ФОРМУ ОБРАТНОИ СВЯЗИ WORD PRESS ПЛАГИН CONTACT FORM 7

 

Форма обратной связи на вордпресс

Содержание
  1. Форма обратной связи с помощью плагина Contact Form 7
  2. Устанавливаем плагин Contact Form 7:
  3. Настраиваем форму обратной связи на wordpress
  4. Используем настройку темы
  5. Как сделать всплывающую форму обратной связи на wordpress
  6. Как вставить url и заголовок товара (страницы) в форму обратной связи на wordpress
  7. Сделать поля горизонтально в строчку
  8. Как добавить в elementor
  9. Меняем стили CSS Contact form 7 и всплывающего окна (Fancybox) формы обратной связи
  10. Зачем создавать пользовательский тип записей или таксономию?
  11. robots.txt
  12. Кэширование
  13. За пределами основ #За пределами основ
  14. WP_DEBUG #WP_DEBUG
  15. PHP ошибки, предупреждения, и заметки
  16. Устаревшие функции и аргументы
  17. Управление сниппетами
  18. Плагины. Установленные
  19. 8.1. Добавить новый
  20. Плагин Yoast SEO
  21. Советы по улучшению этой работы
  22. jQuery в режиме noConflict
  23. Шаблон для списка постов произвольного типа записи WordPress
  24. Как привязать произвольные поля?
  25. Подключаем Gutenberg к пользовательским типам записей
  26. Я сделал 5-минутную установку. И что теперь? #Я сделал 5-минутную установку. И что теперь?
  27. Вход в консоль
  28. Начнем с самого верха
  29. Как создать дочернюю страницу
  30. Отключение JavaScript на сайте
  31. 1. Отключение JavaScript на страницах WordpPress
  32. 2. Отключение JavaScript в записях WordPress
  33. Что такое GDPR
  34. Штрафы
  35. Заключение
  36. Плагином Easy Fancy box в форме ссылки
  37. Итог
  38. УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS
  39. НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS
  40. ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ
  41. Установка плагина
  42. Вывод на сайте
  43. Как создавать формы
  44. Интеграция reCaptcha
  45. Установка целей метрики
  46. Готовые шаблоны
  47. Плагин Contact Form 7 Style
  48. Решение проблем и исправление ошибок
  49. Не отправляются письма
  50. Как исправить?
  51. Откройте
  52. Добавь в закладки и поделись с друзьями:
  53. Форма обратной связи WordPress плагином Contact Form 7
  54. Добавить капчу reCaptcha
  55. Создание формы
  56. Настройка отправки письма
  57. Вставка формы на сайт
  58. Сделать поля горизонтально в строчку
  59. Всплывающая форма обратной связи
  60. Используем настройку темы
  61. Feedback через виджеты

Форма обратной связи с помощью плагина Contact Form 7

Устанавливаем плагин Contact Form 7:

  1. Переходим в административную панель
  2. Далее жмем — » Плагины » Добавить новый
  3. Вводим в поиск «Contact Form 7»
  4. Устанавливаем и активируем плагин

Плагин обратной связи Conact Form 7

Как видите — ничего сложного, обычная процедура установки плагина.

Настраиваем форму обратной связи на wordpress

После установки плагина, слева (в панели управления) появится вкладка «Contact Form 7». Нажимаем на неё, тут добавляем новую форму (старую можно удалить или изменить)

  1. Добавляем новую форму
  2. Вводим название формы
  3. На вкладке «Шаблон формы» оставляем только нужные нам поля для ввода данных.
  4. Переходим во вкладку «Письмо» и настраиваем сообщение, которое придет на почту

Письмо contact form 7

  1. Сохраняем форму, копируем и вставляем шорткод, например на страницу обратной связи или контактов.

Шорткод контактной формы wordpress

Используем настройку темы

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

Функция формы обратной связи в теме ROOT

Надстройка в ROOT

  • Прописываем текст [ contactform ] (без пробелов внутри скобок)
  • Жмем предпросмотр
    Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.

Как работает обратная связь в ROOT

ROOT работа встроенной функции

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

  1. Для создания всплывающей формы необходимо установить плагины Contact Form 7 (если он еще не установлен) и Easy FancyBox
  2. Активируем плагины и настраиваем Contact Form 7 (смотрите выше). Плагин Easy FancyBox настраивать не нужно.
  3. Устанавливаем код в всплывающей формы в нужном месте
    1. Код всплывающей формы обратной связи при клике по тексту: Написать письмо

В некоторых случаях, если при клике на ссылку возникают проблемы и форма отсутствует (The requested content cannot be loaded.), тогда нужно заменить класс «fancybox» на «fancybox-inline».

Также не забываем вставить свой шорткод формы обратной связи

Как вставить url и заголовок товара (страницы) в форму обратной связи на wordpress

Contact Form 7 Dynamic Text Extension

Больше не придется просить клиентов заполнять поле «Название товара»

Есть очень простое решение Contact Form 7 + Dynamic Text Extension

  1. Скачиваем и устанавливаем плагин Contact Form 7 и Contact Form 7 — Dynamic Text Extension
  2. Переходим в настроки контактой формы во вкладку «Шаблон формы»
  3. Генерируем тег «Dynamic hidden»

Можете скопировать код и поменять в нем идентификаторы на свои

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

  1. Переходим во вкладку «Письмо». Указываем свои теги [dynamichidden-860] [dynamichidden-423]

Пример оформления Contact form 7

Вот и всё! Передача url и заголовка в письме обратной формы настроена, можно наслаждаться результатом!

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

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Помещаем теги в div

Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Ищем элемент shortcode

Поиск элемента в elementor

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

Показ на блоге

Элементор обработал запрос

Меняем стили CSS Contact form 7 и всплывающего окна (Fancybox) формы обратной связи

Скопируем стили плагина в файл Вашей темы style.css.

Всплывающая форма обратной связи на WordPress Contact form 7

Форма обратной связи Contact form 7 на WordPress во всплывающем окне

Зачем создавать пользовательский тип записей или таксономию?

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

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

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

robots.txt

Не забудьте исправить в файле свой сайт заменив site.ru и site.ru/sitemap.xml на свой. Также пропишите http или https. Теперь его нужно закачать к себе на сервер в корневую папку, где установлен Ваш блог.

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

Кэширование

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

Если вы ищете более продвинутые механизмы кэширования с полным контролем в ваших руках, тогда такие плагины, как W3 Total Cache, удовлетворят вашему желанию. Используйте этот способ управления кэшем без больших накладных расходов.

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

За пределами основ #За пределами основ

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

  • Возможности WordPress
  • Работа с WordPress
  • Семантика WordPress
  • Использование страниц
  • Исправление проблем
  • Использование постоянных ссылок
  • Получение дополнительной помощи
  • Использование форумов поддержки

WP_DEBUG #WP_DEBUG

это константа PHP , используемая для установки режима отладки в WordPress. По умолчанию она имеет значение «false», но может бытьу становлена как «true» в файле конфигурации wp-config.php на сайтах, на которых проводится отладка.

Заметка: значения и в примере не заключены в кавычки или апострофы, поскольку являются булевыми (правда/ложь) значениями. Не заключайте их в кавычки (например ), иначе они станут восприниматься как строковые значения.

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

PHP ошибки, предупреждения, и заметки

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

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

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

Устаревшие функции и аргументы

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

Управление сниппетами

Плагин Code Snippets отображает все ваши сохраненные сниппеты в админке WordPress точно так же, как и обычные записи или страницы.

А значит, вы можете привычным способом их сортировать, править, включать / отключать, удалять и даже экспортировать:

Надеюсь этот урок вам помог, и вы больше не будете бояться что-то сломать на сайте в процессе добавления кода в functions.php. Лучше используйте Code Snippets!

Плагины. Установленные

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

  • Лучшие плагины для WordPress
  • Как установить плагин WordPress

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

8.1. Добавить новый

Переключите вкладку на “рекомендуемые” и найдите такой плагин. Google XML Sitemaps. Если его нет в списке, то скопируйте название и введите его в строку поиска, как показано на картинке.

Установите и активируйте этот плагин. Он сразу же появится в списке установленных. Данный плагин создаст карту сайта и поможет поисковым системам разобраться во всей структуре Вашего блога.

Следующий плагин, который нам потребуется, это Cyr to Lat enhanced. Этот плагин преобразовывает слова из кириллицы в латиницу.

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

Я привык к латинскому формату и всегда ставлю этот плагин. Найдите его, установите и активируйте.

Плагин Yoast SEO

Также нам понадобится еще один плагин. Yoast SEO. Этот плагин помогает с поисковой оптимизацией. Если Вы умеете его настраивать, то обязательно устанавливайте.

После установки плагин требует дополнительной настройки. Если Вы не знаете, как его настроить, то пока не устанавливайте его. Меню “редактор плагинов” пропустим, так как оно нам не понадобится.

Советы по улучшению этой работы

Вы отключили несколько скриптов и стилей, но вам нужно что-то с ними сделать. Вот список советов о том, как использовать методы, описанные в этом руководстве:

  • Добавьте стили, которые вы отключили, в конец style.css файла вашей темы и отредактируйте их оттуда, чтобы получить желаемый вид.
  • Объедините несколько скриптов в один файл и загрузите его самостоятельно. Я бы сделал это только для вещей, которые используют одну и ту же библиотеку JavaScript. Например, я часто комбинирую скрипты, которые построены на jQuery.
  • Используйте условные теги для детального контроля над загрузкой скрипта или стиля.

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

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

Видимость элементов меню

Сделайте настройки видимости для своих страниц, например, такие:

  • Страница авторизации: Display Mode — Logged Out Users
  • Регистрация: Display Mode — Logged Out Users
  • Страница Профиля: Display Mode – Everyone; Access Role – Member
  • Закрытый контент: Display Mode – Everyone; Access Role – Member (плюс Author, Editor, Administrator)

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

На этом этапе у вас есть полностью готовый мембершип с доступом к контенту за подписку.

Если вам нужно принимать оплату, вам понадобится какое-то платное решение.

jQuery в режиме noConflict

В режиме «no-confict» ярлык $ недоступен, вместо него используется слово jQuery. Например:

  $(document).ready(function(){
 $(#somefunction) .
});

нужно переделать так:

  jQuery(document).ready(function(){
 jQuery(#somefunction) .
});

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

  jQuery(document).ready(function($) {
 // Внутри этой функции $() будет работать как синоним jQuery()

});

В этом фрагменте ваш код будет выполнен, когда страница полностью загрузится. Если по какой-то причине вы хотите, чтобы код был выполнен сразу (без ожидания события «ready» в DOM), можно использовать такой фрагмент:

  (function($) {
 // Внутри этой функции $() будет работать как синоним jQuery()
})(jQuery);

Шаблон для списка постов произвольного типа записи WordPress

Перейдя в раздел /books, вы увидите список постов, а для их вывода WordPress использует шаблон archive.php. Для того, чтобы изменить этот шаблон на свой и сделать другую верстку страниц или же добавить дополнительную информацию к карточкам книг нужно в папке темы создать файл — archive-books.php. Вместо books вы указываете slug своего типа записей. После этого копируете содержимое archive.php в файл archive-books.php и далее уже редактируете шаблон под свои задачи.

Аналогично можно создать и шаблон для отдельной записи кастомного типа. Для этого создайте файл single-books.php (вместо books название вашего типа) в папке вашей темы. Скопируйте туда содержимое файла single.php и после этого можете редактировать шаблон, так как вам нужно.

Как привязать произвольные поля?

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

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

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

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

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

Устанавливаете и активируете плагин. Переходите в меню «Группы полей» — «Добавить». Заполняете и добавляете свои поля к группе.

Выводить поля можно с помощью конструкций.

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

Подключаем Gutenberg к пользовательским типам записей

С версии WordPress 5.0 запущен новый визуальный редактор Gutenberg. Но создавая вручную новый тип кастомных записей при редактировании их, вы будете видеть старый редактор — Classic Editor.

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

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

Пример кода с включением редактора Gutenberg.

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

Я сделал 5-минутную установку. И что теперь? #Я сделал 5-минутную установку. И что теперь?

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

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

Вход в консоль

Начнем с самого верха

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

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

Как создать дочернюю страницу

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

Просто перейдите на страницу «Добавить новое», чтобы создать новую страницу или отредактировать существующую страницу в области администрирования WordPress. С правой стороны вы увидите окно « Атрибуты страницы» с раскрывающимся списком «Родитель»

В раскрывающемся списке «Родитель» выводится список всех страниц вашего сайта. По умолчанию он установлен в «no parent (не родитель)», что означает, что эта страница является отдельной страницей без иерархии. В раскрывающемся меню вам нужно выбрать страницу, которую вы хотите использовать в качестве родителя.

После этого вы можете просто продолжить и сохранить свои изменения. Этот процес можно повторять, создавая все новые дочерние страницы.

Чтобы просмотреть дочерние страницы, вы можете перейти на вкладку Страницы –» Все страницы в области администрирования WordPress. Вы увидите дочерние страницы в виде иерархической структуры, перечисленные в их родительской странице с
префиксом.

Затем вы можете продолжить и добавить свои дочерние страницы в меню навигации вашего веб-сайта в качестве элементов подменю.

Надеемся, что статья помогла вам научиться создавать дочернюю страницу в WordPress.

Отключение JavaScript на сайте

Не все плагины используют соответствующие методы для загрузки скриптов и стилей. Некоторые разработчики просто добавляют код прямо в шапку. Обычно это происходит потому, что они не знакомы с двумя важными функциями WordPress: wp_enqueue_script () и wp_enqueue_style () , которые подключают внешние файлы CSS и JavaScript. Если используемый вами плагин или автор темы не использует эти функции, то попросите их сделать это. Это позволяет нам в дальнейшем работать с их кодом, используя методы, предоставляемые WordPress.

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

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

add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

1. Отключение JavaScript на страницах WordpPress

Отредактируйте значения Home и javascript-name-file в соответствии с вашими именами JS файлов.

add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

2. Отключение JavaScript в записях WordPress

Для публикаций используйте идентификатор записи WordPress. Например ‘1’ и javascript-name-file это имя JS скрипта, который необходимо отключить.

add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );

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

Что такое GDPR

Общее правило защиты данных (GDPR) является законом Европейского союза (ЕС), вступившим в силу 25 мая 2018 года. Целью GDPR является предоставление гражданам ЕС контроля над своими личными данными и изменение подхода к конфиденциальности данных организаций во всем мире.

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

Штрафы

В основном после 25 мая 2018 года компании, которые не соответствуют требованиям GDPR, могут столкнуться с большими штрафами до 4% годового глобального дохода компании или 20 миллионов евро (в зависимости от того, что больше). Этого достаточно, чтобы вызвать широко распространенную панику среди предприятий во всем мире.

Заключение

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

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

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

  • Они постоянно обновляются
  • Профессиональные разработчики
  • У инструментов есть интеграция друг с другом
  • На русском языке

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

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

CF7 в поиске по плагинам
Contact form 7 в поиске

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

Стандартная конфигурация
Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Отставляем label
Заготовка под обратную связь

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Делаем поле Имя
Пример создания поля Имя
  1. Выбираем Текст
  2. Если обязательно для заполнения то отмечаем галочкой
  3. Уникальный идентификатор, оставляем без изменения
  4. Значение, которое отображается по умолчанию, что нужно ввести
  5. Если отметить чекбокс, то название поля будет внутри
  6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
  7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Получившийся код
Код поле добавления имени

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

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

Делаем по аналогии, что получилось.

Готовый результат формы обратной связи
Готовый код

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

Обновляем настройки
Сохранение настроек

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

Исправляем параметры отправки
Вкладка Письмо
  1. Вкладка письмо
  2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
  3. Тема отображается когда письмо придёт на почту
  4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
  5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

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

shortcode вывода формы
Копируем шорткод

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

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Popup Maker в выдаче по плагинам
Popup Maker

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

Вводим название и shortcod CF7
Название и добавление кода

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

Таб с тригером
Триггер

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

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

class для всплывающей формы
Прописываем класс

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

Изменение других параметров
Остальные параметры

Не забываем нажать на опубликовать.

Публикация попапа
Публикуем

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

В запись загрузил изображение с помощью медиафалов.

Старый редактор WP
Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Прописываем класс к объекту
Добавляем class к элементу

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Таб визуально
Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр
Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

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

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.

Вставка класса в гутенберге
Редактирование HTML в Gutenberg

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

Плагином Easy Fancy box в форме ссылки

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

Fancybox в админке вордпресса
Fancy box

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Убираем не нужные элементы
Настройки fancybox

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

<a href="#form_popup1" class="fancybox-inline">Отправить сообщение</a>
<div style="display:none" class="fancy-box">
<div id="form_popup1">
[contact-form-7 id="246" title="Всплывающая форма"]
</div>
</div>
Прописываем модальное окно в виджете
Вставка кода в виджет

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

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

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test
Записываем id
Вносим ID в тригеры

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

Параметры кнопки элементоре
Выводим параметры элемента в elementor

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

Отображение popup на сайте
Показ формы связи через elementor

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

  • Устанавливаем оба плагина WordPress
  • В Contact form 7 создаем новую форму, настраиваем ее по инструкции
  • Добавляем шорткод в новый попап Popupmaker
  • Настраиваем отображение окна
  • Привязываем класс к любому элементы на сайте
  • Проверяем работу

УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS

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

В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7». Первый найденный плагин формы обратной связи — нужный нам вариант.

Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.

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

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

НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS

Ну что же, мы использовали уже готовую форму. А как насчет ее изменения? Возможно ли это и легко ли сделать это? Ответ — да — на оба вопроса. К примеру, я хочу убрать из формы поле Тема, как это сделать? Перейдем к редактированию формы в меню плагина Формы и увидим следующую картину.

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

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

Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.

После создания списка с необходимыми вариантами в шаблоне формы появится новое поле.

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

Сохраняем изменения и пробуем отправить повторно письмо. Теперь форма обратной связи работает, как и положено, — на email приходит письмо с выбранной темой.

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

ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ

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

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

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

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

Итак, переходим в раздел «Плагины — Добавить новый» и пишем в поиск название «Contact Form 7». Как обычно, первый плагин в результатах поиска — это тот, который нам нужен. Устанавливаем плагин на блог и активируем его.

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

Как сделать форму обратной связи на WordPress: плагин Contact Form 7
Далее переходим к созданию формы обратной связи WordPress. У нас в левом меню появился раздел, созданный плагином, под названием «Контакты (CF7)», в него и переходим. Теперь можно сделать новую форму контактов, благодаря которой посетители смогут написать вам на почту прямо со страниц вашего сайта или блога.

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

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

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

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

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

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

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

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

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

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

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

Итак, начинаем сверху. В первую очередь мы вводим название нашей формы обратной связи для удобства ее нахождения (в том случае, если форм будет несколько). Свою я назову «Форма страницы контактов».

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

  • текстовое поле;
  • e-mail;
  • URL;
  • номер телефона;
  • число (spinbox или slider);
  • дата;
  • текстовое поле (еще одно);
  • выпадающее меню;
  • checkboxes;
  • radio buttons;
  • acceptance;
  • вопрос;
  • CAPTCHA;
  • отправка файла;
  • кнопка отправки письма.

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

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

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

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

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

Я открываю страницу «Контакты» своего блога и дописываю в нее текст о возможности отправки письма мне на почту с этой страницы.

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

Сохраняем страницу и открываем ее на нашем сайте. У меня всё отобразилось с первого раза, поэтому я незамедлительно отправляю тестовое письмо себе на почту. Заполняю все необходимые поля и нажимаю кнопку «Отправить».

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

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

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

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

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

Я надеюсь, что у вас тоже все заработало с первого раза. Если возникают какие-то вопросы, обязательно задавайте их в комментариях. И не забывайте о конкурсе комментаторов!

  1. Установка
  2. Вывод на сайте
  3. Как создавать формы
  4. Настройка письма
  5. Настройка уведомлений
  6. Интеграция reCaptcha
  7. Установка целей метрики
  8. Готовые шаблоны
  9. Решение проблем и исправление ошибок

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

1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.

contact form 7 установка
Установка плагина Contact Form 7 из админки WordPress

2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.

contact form 7 плагин

Вывод на сайте

После активации в админке откройте раздел Contact Form 7.

формы contact form 7
Список форм

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

1. Кликните Страницы > Добавить новую.

добавление формы contact form 7
Создание новой страницы на сайте WordPress

2. Укажите название (например Контакты).

3. Скопируйте шорткод.

шорткод contact form 7
Шорткод формы

4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.

cf7 добавление шорткод
Блок Шорткод

В итоге пользователь увидит:

форма contact form 7
Страница с формой CF7

Как создавать формы

Перейдите Contact Form 7 > Добавить новую

.

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

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

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

Вставка класса в гутенберге

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

Таб визуально
Настройка формата письма

Интеграция reCaptcha

В плагин уже встроена система спам-защиты от Google. Установим последнюю версию — v.3. Чтобы ее добавить, следуйте простой инструкции.

contact form 7 капча
Добавление reCAPTCHA на сайте Google

3. Скопируйте ключи.

защита от спама

4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.

Настройки интеграции в плагине

5. Добавьте скопированные ключи, сохраните изменения.

contact form 7 recaptcha

Установка целей метрики

В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс. Метрики.

1. В Метрике зайдите Настройка > Цели > Добавить цель.

contact form 7 метрика
Настройка цели в Яндекс-Метрике

2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.

contact form 7 цели
Настройка цели в Яндекс-Метрике

3. Добавьте в файл functions.php активной Ворпресс-темы код

add_action( 'wp_head', 'add_yandex_target' );
function add_yandex_target() {
    ?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            if ( '999' == event.detail.contactFormId ) {
                ym(555, 'reachGoal', 'wptest_form'); return true;
            }
        });
    </script>
    <?php
}

 

ID формы можно посмотреть, если открыть ее на редактирование.

Редактирование формы

Готовые шаблоны

Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.

Плагин Contact Form 7 Style

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

Чтобы задать внешний вид форме:

  • выберите форму;
  • перейдите на вкладку Contact Form 7 Style Template;
  • используя стрелки, выберите дизайн.
Применение шаблона к выбранной форме в Contact Form 7

Решение проблем и исправление ошибок

Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.

Не отправляются письма

Тут может быть несколько проблем:

  • электронные письма не отправляются вообще;
  • попадают в СПАМ.
  • неправильные настройки сайта;
  • ограничения на хостинге.

Как исправить?

Чтобы заставить работать почту, есть несколько способов.

1. Стандартные настройки

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

2. W P Mail SMTP

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

Рассмотрим универсальный вариант — бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.

Создайте ящик на Gmail.com. Установите WP Mail SMTP.

Откройте

Настройки > WP Mail SMTP.

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

Настройка плагина WP Mail SMTP

  • Заполните: SMTP сервер
    — smtp.gmail.com

    Шифрование
    — TLS

    SMTP порт
    — 587

    Авторизация
    — ВКЛ

    Имя пользователя SMTP
    — контактный email

    Пароль SMTP
    — пароль к ящику

 

  1. Чтобы проверить работу почты, откройте вкладку Проверка почты и нажмите Отправить email. В ящике должно быть тестовое письмо.
    Отправка тестового письма в плагине WP Mail SMTP

Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.

Использовать SMTP можно без плагина, с помощью кода в functions.php.

function cf7_setup_phpmailer_init( PHPMailer $phpmailer ) {
    // Хост почтового сервера
    $phpmailer->Host = 'smtp.gmail.com';
    // Номер порта 
    $phpmailer->Port = 465;
    // Имя пользователя для SMTP авторизации 
    $phpmailer->Username = '[email protected]';
    // Пароль пользователя для SMTP авторизации 
    $phpmailer->Password = 'password'; 
    // Включение/отключение шифрования
    $phpmailer->SMTPAuth = true; 
    // Тип шифиования (ssl или tls)
    $phpmailer->SMTPSecure = 'ssl'; 
    // Обратный Email
    $phpmailer->From = '[email protected]'; 
    // Название сайта в поле От
    $phpmailer->FromName = get_bloginfo( 'name' ); 
    $phpmailer->IsSMTP();
}
add_action( 'phpmailer_init', 'cf7_setup_phpmailer_init' );

В коде нужно вписать свой email-адрес и пароль.

Добавь в закладки и поделись с друзьями:

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

Форма обратной связи WordPress плагином Contact Form 7

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

  • Имя
  • Адрес почты
  • По желанию телефон
  • Текст сообщения
  • Капча

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

Поиск по плагинам
CF7 в поиске
Модуль рекапчи
Ссылка на рекапчу

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

Настройки в Google reCaptcha
Привязка captcha к сайту

Копируем данные для капчи, оба ключа.

копируем ключи
Ключи доступа

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Кнопка запуска интеграции
Интеграция
Вставляем доступ
Сохранение настроек

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

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Удаляем стандартные строки
Стираем стандартные надписи

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

Инструмент Текст
Поле текст

Появиться всплывающее окно, настраиваем по потребностям.

Настройка каждого раздела
Генератор тегов
  1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
  2. Имя не меняем это уникальный идентификатор
  3. Значение по умолчанию, ввел фразу, которую увижу внутри
  4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
  5. Не советую пользоваться полем Akismet
  6. Для добавления стилей вводим class или id, сделал pole-imya
  7. Вставляем тег в общее поле

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

Вставка e-mail
Генератор почты

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Инструменты текстовой области и телефона
Кнопки телефон и текстовая область

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

Button отправить
Кнопка отправить

В результате получился такой код.

Что должно получиться
Финальный код CF7

Настройка отправки письма

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

Изменение параметров письма

 
Сохраняем настройки

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

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Копируем шорткод
Шорткод

Идем в любую запись и вставляем.

Прописываем вывод в запись
Помещаем shortecode в страницу

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

отображение на сайте
Финальный вариант

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

Сделать поля горизонтально в строчку

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

<div class="flex-form">
[text* your-name]
[email* your-email]
[text your-subject]
</div>
[textarea your-message]
[submit "Отправить"]

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Помещаем теги в div
Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

.flex-form{display:flex;}
@media only screen and (max-width: 655px){.flex-form{display:block;}}
Помещаем css в style
Прописываем стили

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

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

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Ищем элемент shortcode
Поиск элемента в elementor

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

Показ на блоге
Элементор обработал запрос

Используем настройку темы

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

Функция формы обратной связи в теме ROOT
Надстройка в ROOT
  • Прописываем текст [ contactform ]
    (без пробелов внутри скобок)
  • Жмем предпросмотр

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

Как работает обратная связь в ROOT
ROOT работа встроенной функции

Feedback через виджеты

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

Применяем виджет текст
Используем виджет текст

Оцените статью
NaWordpress.ru
Добавить комментарий