Contact form 7 всплывающая форма: Всплывающая форма обратной связи wordpress: настройка за 5 минут — Вебджем.рф

Содержание

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

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

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

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

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

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

Contact form 7 в поиске

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

Стандартный код

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

Заготовка под обратную связь

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

Пример создания поля Имя

Выбираем Текст
Если обязательно для заполнения то отмечаем галочкой
Уникальный идентификатор, оставляем без изменения
Значение, которое отображается по умолчанию, что нужно ввести
Если отметить чекбокс, то название поля будет внутри
Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
Находим вставить тег

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

Код поле добавления имени

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

Панель инструментов

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

Готовый код

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

Сохранение настроек

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

Вкладка Письмо

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

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

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

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

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

Popup Maker

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

Название и добавление кода

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

Триггер

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

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

Прописываем класс

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

Остальные параметры

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

Публикуем

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

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

Редактор WordPress

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

Добавляем class к элементу

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

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

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

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

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

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

Рабочая всплывающая форма

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

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

Редактирование HTML в Gutenberg

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

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

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

Fancy box

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

Настройки fancybox

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

<a href="#form_popup1">Отправить сообщение</a>
<div>
<div>
[contact-form-7 title="Всплывающая форма"]
</div>
</div>

Вставка кода в виджет

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

Пример исполнения

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

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

Пример исполнения:
.osnova, #form-test

Вносим ID в тригеры

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

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

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

Показ формы связи через elementor

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

Итог

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

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

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

Пожалуйста, оцените материал: Мне нравится18Не нравится3

Всплывающая контактная форма (плагины) | MnogoBlog

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

Для этого нам понадобится установить два плагина:
– Popup Maker;
– Contact Form 7 (можно выбрать другой плагин форм, например: Ninja Forms, Gravity Forms и др. – главное чтобы можно было использовать шорткод для вставки формы на сайт).

1. Устанавливаем плагин Popup Maker, сведения о плагине (на момент публикации статьи) :
Количество активных установок: 300,000+
Последнее обновление: 4 недели назад
Сайт плагина: “wordpress.org/plugins/popup-maker/”
Автор плагина: WP Popup Maker

Установка и активация плагина стандартная – через панель управления wordpress (пункт “Плагины” , подпункт “Добавить новый” в левом меню админки wordpress).

После активации плагина в левом меню админки появится новый пункт “Popup Maker”, заходим в него и выбираем подпункт “Add Всплывающее окно”:

К сведению, у данного плагина есть 6 тем оформления всплывающего окна, которые можно выбрать и благодаря настройкам изменить под себя – для этого в нижней панели нужно выбрать пункт “Отображение”:

Давайте для нашего примера устаеовим тему Light Box:

Далее кликаем на кнопку “Опубликовать”:

2. Устанавливаем плагин Contact Form 7, сведения о плагине на момент публикации статьи:

Количество активных установок: 5 млн. +
Последнее обновление: 2 месяца назад
Сайт плагина: “ru.wordpress.org/plugins/contact-form-7/”
Автор плагина: Takayuki Miyoshi

После активации плагина в левом меню админки появится новый пункт “Contact Form 7”, заходим в него и выбираем подпункт “Добавить новую”:

Придумываем название, всё остальное можно оставить по умолчанию и жмем на кнопку “Сохранить” :

После чего у нас появляется шорткод данной формы:

Копируем его.

3. Возвращаемся к созданному нами ранее всплывающему окну – для этого в левом меню админки выбираем пункт “Popup Maker”, заходим в него и выбираем подпункт “All всплывающие окна”:

Здесь мы видим созданнаное нами всплывающее окно Myform – кликаем по нему:

Переходим на вклалку “Текст” и вставляем скопированный шорткод формы:

Далее жмем кнопку “Обновить”.

4. Создадим кнопку для открытия всплывающего окна.

Переходим в нужную запись или создаем новую, открываем вкладку “Текст” и вставляем следующий код:


<button>Контактная форма!</button>

В шорткоде главное указать класс всплывающего окна, в данном примере:
class=”popmake-myform-2″

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

Для этого нужно войти в левом меню админки в пункт “Popup Maker”, и выбрать подпункт “All всплывающие окна” и встолбике “Классы CSS” копируем класс всплывающего окна:

В данном примере это: popmake-myform-2

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

Жмем на кнопку “Контактная форма!” и у нас открывается всплывающее окно с контактной формой внутри:

Также появление всплвающего окна можно настроить на автоматическое.

Например появление окна через 3 секунды автоматически – для этого в левом меню админки в пункт “Popup Maker”, и выбрать подпункт “All всплывающие окна”, далее выбираем созданную нами форму и в нижней панели настроек заходим в пункт “Триггеры” и жмем на кнопку “Добавить новый триггер”:

В открывшемся окошке выбираем Time delay / Auto open:

И жмем кнопку “Добавить”.

В следующем окошке устанавливаем 3000 ms (3 сек):

И жмем на кнопку “Добавить”.

Всё теперь наше всплывающее окно будет появляться через 3 сек автоматически.

Есть и другие интересные настройки…

На этом всё! Красивых Вам сайтов!

Всплывающая форма обратного звонка WordPress

Обратный звонок WordPress

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

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

Форма обратного звонка для wordpress

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

Contact form 7

Обратная связь Contact form 7

Создавайте собственные контактные формы. Бесплатный плагин Contact Form 7 обладает внушительным функционалом, и даёт пользователю свободу действий. Легко встраивается в HTML-код.

Fast Secure Contact From

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

FormCraft

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

Visual Form Builder

Универсальный модуль с большим перечнем возможностей. Если Вам требуется гибкий плагин обратного звонка, то присмотритесь к Visual Form Builder. Изменяйте расположение элементов с помощью одной кнопки. Экспортируйте данные в CSV.

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

Contact Form by Contact ME

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

nForms

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

Gravity Forms

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

Ninja Forms

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

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

Лучшие расширения обратный звонок для WP

Лучшие расширения обратный звонок для WP
Сразу оговорюсь, что следует использовать только официальные источники для скачивания расширений. Обусловлено это тем, что на сторонних ресурсах может находится вредоносный софт.
Pozvonim. Если Вы искали лидера обратных звонков, то это один из них. Свыше 3000+ установок с официального сайта. Pozvonim предлагает готовый виджет обратной связи. Увеличивайте количество посетителей и продажи. Для использования модуля требуется регистрация на официальной страничке.
Call me spoot. Простой модуль для организации обратной связи. Располагайте модуль в нужном месте. Посетитель оставляет контактный номер и почтовый адрес. Уведомления приходят на Telegram и почту.
CallPage. Если Вы искали плагин для малого и среднего бизнеса, тогда приглядитесь к этой разработке. Анализирует потребительское поведение. CallPage собирает и моделирует поведение пользователей по различным моделям. Настройки включают в себя 8 тем.
Рекомендую к прочтению статьи:
WPB Popup for Contact Form 7 — плагин WordPress
Описание
Всплывающее окно для контактной формы 7 может отображать красивое всплывающее окно формы контактной формы 7 . Всплывающая форма появится при нажатии кнопки.
Возможно, вы ищете решение для отображения контактной формы во всплывающем окне, когда кто-то нажимает кнопку. В этом случае Popup for Contact Form 7 — идеальный плагин для вашего сайта.
Можно добавить кнопку всплывающего окна в любом месте вашего сайта, используя его Custom ShortCode .
Для формы используется самый популярный плагин Contact Form 7 . Вы можете установить разные формы для разных всплывающих кнопок. И покажите разные всплывающие кнопки в разных местах сайта.

Текст кнопки, цвет, размер все можно изменить в настройках плагина. У него есть опции для WooCommerce, кнопка может отображаться на странице продукта.
Купить версию PRO | ДЕМО | Поддержка | Документация
Всплывающее окно для контактной формы 7 Основные характеристики
Всплывающая кнопка для формы Contact Form 7.
Показать кнопку, используя ShortCode, функцию PHP и обработчик действия.
Показывать разные всплывающие кнопки на разных страницах с разными формами.
Расширенные настройки для настройки стиля кнопок и всплывающих окон.
Очень проста в использовании.
RTL и поддержка нескольких языков.
Основные характеристики Premium
Всплывающие кнопки для форм Contact Form 7.
Показать кнопки с помощью коротких кодов и хуков действий.
Показывать разные всплывающие кнопки в разных местах с разными формами.
Расширенные настройки для настройки стиля кнопок и всплывающих окон.

Виджет Elementor для удобного использования с конструктором страниц Elementor.
Расширенный генератор всплывающих кнопок для добавления нескольких различных настраиваемых всплывающих кнопок.
Всплывающие кнопки могут отображаться для любых обработчиков действий.
Красивый дизайн для форм, отображаемых во всплывающем окне.
RTL Поддержка и мобильная адаптация.
Поддержка и документация:
Использовать этот плагин очень просто, так как у нас есть подробная онлайн-документация по этому поводу.Если у вас возникли проблемы с этим плагином, наша экспертная служба поддержки всегда готова для вас. Просто откройте заявку в службу поддержки на нашем форуме поддержки.
Скриншоты
Всплывающее окно для контактной формы 7.
Всплывающая кнопка.
Короткий код всплывающей кнопки.
Настройки
Установка
Установите его как обычный плагин WordPress.
Для этого плагина требуется плагин Contact Form 7. Поэтому, если у вас не установлен плагин Contact Form 7, убедитесь, что вы также установили этот плагин.

После установки плагина активируйте его. Затем перейдите в Личный кабинет> Контакт> Всплывающее окно. Настройте параметры плагина и сохраните настройки.
После установки плагина следуйте нашей пошаговой онлайн-документации.
FAQ
Это работает с темой, которую я использую?
Мы тестируем этот плагин с большим количеством бесплатных и платных тем. Он должен работать с любыми стандартными темами WordPress. Если у вас возникли проблемы с вашей темой, откройте заявку в службу поддержки на нашем форуме.Мы исправим проблему и выпустим обновление для этого плагина.
Обзоры
Для этого плагина нет обзоров.
Авторы и разработчики
«WPB Popup for Contact Form 7» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов
История изменений
Версия 1.0
Версия 1.1

На странице настроек добавлены документы.
Версия 1.2
Исправлена проблема выбора контактной формы в настройках.
Версия 1.3
Протестировано с плагином Contact Form 7 новой версии 5.4
Версия 1.3.1
Выпущена премиум версия.
Версия 1.3.2
Добавлен список функций премиум-версии.
Как создать контактную форму PopUp?
Формы обратной связи просто потрясающие! Они позволяют любому, кто любит / не любит или имеет мнение о содержании вашего сайта, связаться с вами.
И, что гораздо важнее, они позволяют людям, заинтересованным в ведении бизнеса с вами, связаться. Я говорю из личного опыта.
В этом уроке я научу вас нескольким приемам, как заставить вашу контактную форму всплывать, когда она вам понадобится. Но перед этим я хотел бы выяснить, почему контактные формы являются действительно мощным инструментом в бизнес-арсенале вашего сайта.
Нужна помощь в настройке вашего сайта WordPress?
WHSR теперь является партнером Codeable.io, чтобы помочь пользователям, которым нужны профессиональные услуги по разработке / настройке WP.
Чтобы получить бесплатное предложение, заполните эту форму запроса.
Контактные формы необходимы
Я писатель-фрилансер, я начал писать, когда был второкурсником в колледже. В первый раз, когда я получил работу, мне пришлось подать заявку как минимум на 50 вакансий на Elance. Это был ад. Вскоре после этого один из моих друзей, который знал о моем фрилансе, предложил мне работу писателем в BlogVault, провайдере резервного копирования WordPress.
Каждую работу, которую я получил после этого, я делал, обращаясь к веб-сайтам через контактные формы.
У меня нет собственного веб-сайта, на котором я мог бы рекламировать свои услуги и отображать свое портфолио. Я использую LinkedIn для отображения своего рабочего портфолио. Ни один из веб-сайтов, для которых я сейчас пишу, никогда бы не услышал обо мне, если бы у них не было легко доступной контактной формы.
В результате я получаю деньги за свою работу, а клиент, он же «сайт с контактной формой», получает хороший контент.
Это всего лишь пример. Вы никогда не знаете, что упустите, если у вас нет легко доступной контактной формы.Может быть, есть инвестор, который заинтересован в финансировании миссии вашего сайта. Мы бы не хотели, чтобы он слишком много искал, не так ли?
Теперь существует несколько сценариев, в которых вы можете предложить посетителю использовать контактную форму. Мы доберемся до этого, сначала нам понадобится хороший плагин для контактной формы.
Плагин Get A Good Contact Form — Контактная форма 7
1. Установите и активируйте плагин (ссылка ниже).
2. В панели администратора WordPress откройте «Контакт»> «Добавить».Настройте сообщение, которое вы хотите передать посетителю, в соответствии с требованиями.
3. Вы получите короткий код, который можно вставить для отображения контактной формы. Скопируйте его и отложите пока.
Подробнее и загрузки
Popup Maker
На мой взгляд, плагин для создания всплывающих окон — это Popup Maker.
1. Установите и активируйте плагин (ссылка ниже).
2. Откройте Popup Maker> Добавить новый.
3. Создайте новое всплывающее окно и вставьте шорткод, который вы ранее скопировали из контактной формы 7.
Как видите, настройки средства создания всплывающих окон довольно обширны. Вы можете выбрать размер, функции наложения, анимацию, положение всплывающего окна и способ закрытия всплывающего окна посетителем. Плагин позволяет вам выбрать, где и когда появится всплывающее окно. Этот процесс довольно интуитивно понятен.
Одна функция, которая мне очень нравится в Popup Maker, — это возможность использовать файлы cookie.Если вы выберете опцию в разделе «Настройки автоматического открытия», то откроются следующие параметры.
Вы можете добавить файл cookie, чтобы всплывающее окно не появлялось постоянно у частых посетителей вашего сайта. Это обязательно, ведь вы не хотите раздражать лояльного читателя непрекращающимися всплывающими окнами.
И, наконец, вы получаете всплывающую контактную форму.
Это не выглядит впечатляюще, но это не должно отнимать от столь необходимой цели, которой он служит. А немного поработав над CSS, вы можете сделать так, чтобы он выглядел великолепно.
Подробнее и загрузки
Умная комбинация
Эта комбинация плагинов (контактная форма 7 + Popup Maker) должна вам очень хорошо послужить.
Я дам вам два альтернативных варианта всплывающих плагинов, если они вам когда-нибудь понадобятся. Popups и PopUp от Supsystic — очень хорошие плагины для создания всплывающих окон.
Если вам нужны другие плагины форм, то вы можете прочитать мой первый пост для WHSR о 12 плагинах пользовательских форм.
Ваши мысли всегда приветствуются в комментариях.
Как создать всплывающее окно с помощью контактной формы 7 (шаг за шагом)
Хотите создать всплывающее окно с контактной формой 7, чтобы посетители вашего сайта могли легче связываться с вами?
Наличие контактной формы на вашем веб-сайте — отличный способ общаться с вашими посетителями. Но некоторым людям может потребоваться дополнительный толчок, чтобы заполнить контактную форму, чтобы задать вопросы, проблемы или общие запросы.
Вот почему создание всплывающего окна контактной формы может быть отличным способом улучшить пользовательский опыт (UX) при одновременном расширении списка адресов электронной почты.
Итак, в этом посте мы пошагово научим вас, как создать всплывающее окно с помощью контактной формы 7.

Но прежде чем мы это сделаем, давайте посмотрим, почему вы вообще хотите создавать всплывающее окно контактной формы.
Зачем создавать всплывающее окно с контактной формой 7?
Когда у посетителей вашего сайта возникает вопрос о вашем продукте, услугах или веб-сайте, вы должны убедиться, что у них есть простой способ связаться с вами.
И хотя лучшим решением является добавление функции живого чата на ваш веб-сайт, у вас может не быть ресурсов, персонала или времени для эффективного управления общением с клиентами в режиме реального времени.
Еще одно решение — создать контактную форму, которая позволяет клиентам отправлять вам сообщения на ваш профессиональный почтовый ящик. Но тогда у вас есть другая проблема:
Как заставить клиентов заполнить вашу контактную форму, прежде чем вернуться в Google, изучить свой вопрос и перейти на страницу конкурента?
Вот где всплывающее окно с контактной формой очень удобно.
Всплывающее окно контактной формы — это небольшое сообщение, которое появляется на экране вашего клиента, предлагая ему связаться с вами с любыми вопросами или проблемами, которые могут у них возникнуть.
Это позволяет вам встретиться со своей аудиторией, где бы они ни находились на пути к покупке, направить их по воронке продаж и создать нового долгосрочного клиента.
Самое приятное то, что даже если вы не получите немедленную продажу, у вас все равно будет новый контакт для вашего списка адресов электронной почты. Это позволяет вам строить отношения с течением времени и, опять же, находить горячих потенциальных клиентов, готовых вести с вами дела.
Но как создать всплывающее окно контактной формы?
Есть много способов, но лучшее решение — использовать OptinMonster:
OptinMonster — программное обеспечение №1 в мире для привлечения потенциальных клиентов на рынке.Мы не только упрощаем создание потрясающих и целенаправленных всплывающих окон за считанные минуты, но также упрощаем встраивание форм из самых популярных плагинов для построения форм.
И сегодня мы научим вас, как именно создать всплывающее окно с помощью контактной формы 7. Вот демонстрационное всплывающее окно, которое мы создали для этого учебника:
Это всплывающее окно было создано менее чем за 10 минут и станет отличным дополнением к любому сайту WordPress.
Готовы начать? Давайте погрузимся.
Создайте всплывающее окно с помощью контактной формы 7 сегодня
Как создать всплывающее окно с помощью контактной формы 7
Когда вы подписались на OptinMonster, вы захотите загрузить и установить плагин OptinMonster для WordPress. Таким образом, вы можете быстро и легко связать свою учетную запись OptinMonster со своим веб-сайтом.
Если вам нужна помощь в настройке, мы настоятельно рекомендуем ознакомиться с этим руководством: Как подключить OptinMonster к WordPress.
Шаг 1. Выберите тип кампании и шаблон
После того, как вы зарегистрируетесь в OptinMonster, перейдите в панель управления своей учетной записью.В правом верхнем углу нажмите Создать новую кампанию :
Затем вам нужно будет выбрать тип кампании. Хотя у нас есть много вариантов на выбор, мы будем использовать Popup для сегодняшнего урока:
Пришло время выбрать шаблон:
OptinMonster имеет более 50 готовых шаблонов, из которых вы можете выбирать. Они позволяют легко создавать потрясающие кампании за считанные минуты.
А благодаря нашему конструктору перетаскивания не требуются навыки программирования или дизайна.
Однако сегодня мы собираемся создать простое всплывающее окно с контактной формой 7. Это означает, что нашим лучшим вариантом будет шаблон Canvas :
Это пустой шаблон, в котором все еще используется построитель перетаскивания. Это отличный вариант, поскольку он позволяет встроить шорткод вашей контактной формы 7 и позволяет пользователям сосредоточиться исключительно на вашей контактной форме, не отвлекаясь на другие элементы.
Другими словами, когда дело доходит до создания всплывающего окна контактной формы, обычно лучше меньше, да лучше.Но вы должны знать, что вы можете добавить встраиваемый шорткод Contact Form 7 к любому выбранному вами шаблону OptinMonster.
Когда вы выбрали правильный шаблон кампании для своего сайта, вам нужно будет назвать свою кампанию, назначить ее своему веб-сайту и нажать Начать создание :
Тогда вы будете готовы разработать свою кампанию.
Шаг 2. Вставьте контактную форму 7 в свое всплывающее окно
На данный момент шаблон вашей кампании находится в редакторе OptinMonster.Поскольку мы начинаем с пустого шаблона, вам нужно добавить шорткод контактной формы 7 во всплывающее окно.
Сделать это просто. Нажмите + Добавить блоки вверху меню редактора:
Затем найдите блок < HTML> и перетащите его в шаблон кампании:
Затем перейдите в панель управления WordPress, чтобы получить встраиваемый шорткод Contact Form 7. Щелкните плагин Contact Form 7 (обозначенный Contact ) в WordPress, чтобы открыть список форм.
Затем скопируйте шорткод рядом с формой обратной связи, которую вы хотите использовать:
Вернитесь в редактор OptinMonster и щелкните блок HTML, который вы только что добавили в свой шаблон. Это приведет к появлению инструментов редактирования с левой стороны. Вставьте шорткод контактной формы 7 в блок HTML:
Обратите внимание, что шорткод появится в вашем редакторе, а не в контактной форме:
Это нормально, и контактная форма появится, когда кампания будет запущена на вашем сайте.
Вы можете вносить другие изменения в свою кампанию, такие как добавление текста, изображений, изменение цвета фона и т. Д.
В этом посте мы не будем подробно рассказывать о том, как можно изменить эти аспекты дизайна своей кампании. Честно говоря, здесь слишком много вариантов настройки.
Если вам нужна помощь в разработке всплывающего окна контактной формы, мы рекомендуем прочитать этот пост о том, как создать свою первую кампанию с OptinMonster.
Этот ресурс расскажет, как можно изменять различные элементы блока в своей кампании, если вы решите их использовать.
Вот всплывающее окно контактной формы 7, которое мы разработали для сегодняшней демонстрации:
Он простой, элегантный и очень эффективный.
Одна вещь, которую вы, возможно, захотите сделать, — это добавить немного CSS в вашу контактную форму во всплывающем окне. Это может сделать форму более привлекательной во всплывающем окне.
Если вы не знаете CSS, не беспокойтесь. Вот код, который мы использовали в сегодняшней демонстрации для стилизации нашей формы:
Вы можете вставить это с помощью специальной функции CSS OptinMonster.В главном меню редактирования нажмите Optin Settings »Custom CSS :
.
Затем скопируйте и вставьте приведенный выше код CSS, чтобы оформить форму:
Опять же, это простой CSS, который сделает простую контактную форму визуально более привлекательной. Вы можете добавить собственный CSS, если у вас есть более конкретные потребности.
Вы также должны знать, что каждый раз, когда вы изменяете или добавляете блок HTML, вам необходимо обновлять свои кампании в плагине OptinMonster.
Для этого перейдите в панель управления WordPress и нажмите OptinMonster »Кампании .Затем нажмите Обновить кампании :
После того, как вы протестировали свою кампанию и остались довольны дизайном, пора изменить правила отображения.
Шаг 3. Установите правила отображения
По умолчанию OptinMonster имеет два правила отображения для каждой кампании:
Время на странице 5 секунд
Всплывающее окно появится на любой странице вашего сайта
Мы рекомендуем настроить эти правила для вашей аудитории, особенно потому, что это всплывающее окно контактной формы.Это означает, что вы хотите ориентироваться на людей, которые рассматривают ваш продукт или, вероятно, имеют вопросы о ваших услугах.
Хотя у нас есть много целей и триггеров, которые вы можете выбрать, одна из них, которую мы рекомендуем для всплывающего окна контактной формы, использует MonsterLinks ™.
MonsterLinks ™ позволяет отображать всплывающую форму обратной связи, когда пользователи нажимают кнопку или ссылку на вашей странице. Это означает, что если у них есть вопрос или проблема, ваши посетители могут просто нажать на кнопку, и появится новое окно с контактной формой.
Это лучше для общего пользовательского опыта, потому что вы не перенаправляете людей на другую страницу. Вместо этого вы позволяете своим посетителям вести беседу совершенно беспрепятственно.
Вот как это настроить. Сначала перейдите к Display Rules в верхней части редактора OptinMonster:
Затем щелкните первое правило по умолчанию, чтобы открыть параметры правила отображения:
Найдите в строке поиска MonsterLinks ™.Когда оно появится в меню, нажмите на правило:
Затем нажмите Копировать код MonsterLink ™ :
Теперь у вас есть встраиваемая ссылка на всплывающее окно контактной формы. Он представлен в виде HTML:
Подпишитесь сейчас!
Но для многих конструкторов страниц, используемых с WordPress, вам не нужен HTML для вставки ссылки на кнопку или текст.Вместо этого вам нужен только URL-адрес. Вы можете просто скопировать URL-адрес из фрагмента кода выше (URL-адрес начинается с https: // ):
https://app.monstercampaigns.com/c/nujmnl2abxowuv1faou6/
Теперь вы можете встроить эту ссылку в любую кнопку или текст на своем сайте так же, как и в любой другой URL-адрес.
Все, что осталось — опубликовать свою кампанию.
Шаг 4. Опубликуйте всплывающее окно контактной формы
Последний шаг — опубликовать вашу кампанию.Для этого нажмите Опубликовать вверху меню редактора:
Затем измените статус кампании с Черновик на Опубликовать :
И все!
Создайте всплывающее окно с помощью контактной формы 7 сегодня
Всплывающее окно контактной формы готово к работе, пока ваш сайт подключен. Опять же, если вы не установили плагин OptinMonster для своего сайта WordPress и вам это необходимо, вы можете вернуться к началу руководства, чтобы узнать, как это сделать.
Мы надеемся, что это руководство было для вас полезным. Если это так, вы можете посетить следующие ресурсы:
В этих статьях есть все необходимое для создания потрясающих форм, которые способствуют развитию вашего бизнеса.
Готовы начать? Подпишитесь на OptinMonster сегодня!
Опубликовано Натан Томпсон
Натан Томпсон — отец, писатель и любитель путешествовать (именно в таком порядке). Когда он не борется со своими детьми, вы, вероятно, обнаружите, что Натан дает своим глазам столь необходимую передышку от экранов с хорошей книгой или планирует семейную поездку со своей замечательной женой.
Как добавить всплывающее окно контактной формы для WordPress
Наличие контактной формы на вашем веб-сайте помогает посетителям связываться с вами в Интернете. Это также демонстрирует посетителям, что вы цените их вклад, что повышает репутацию сайта, даже если люди не используют форму. Итак, имеет смысл только добавить контактную форму в WordPress. Но как насчет того, чтобы сделать его всплывающим?
Всплывающие элементы полезны по-разному. Хотя вы не хотите, чтобы веб-сайт был насыщен этими компонентами, быстрая всплывающая контактная форма может дать пользователям быстрый способ отправить вам сообщение.
В этом уроке я покажу, как использовать плагин контактной формы WordPress, а также всплывающий инструмент. Хотя есть несколько способов создания всплывающих контактных форм, я собираюсь рассмотреть бесплатный метод с использованием Popup Maker и Ninja Forms.
Использование Ninja Forms
Ninja Forms — это мощный плагин, который предоставляет множество вариантов настройки для создания практически любой формы, о которой вы только можете подумать. Он может делать все, от создания контактной формы до отправки по электронной почте.Это также один из самых популярных и популярных плагинов для WordPress.
Перейдите в область «Плагины» и нажмите «Добавить».
Установите и активируйте плагин «Ninja Forms». Вы можете найти его, используя поле поиска в правой части экрана.
Ninja Forms может перенаправить вас прямо на свою панель управления. Если нет, вы можете выбрать опцию «Формы ниндзя» в левом столбце администратора.
Ninja Forms по умолчанию создает форму «Свяжитесь со мной».Это простая форма, которую вы можете использовать прямо из коробки при установке плагина. Допустим, мы хотим изменить запрашиваемую информацию. Щелкните заголовок формы «Свяжитесь со мной».
Загрузится редактор Ninja Forms, отображающий, какие элементы в данный момент находятся в форме. Вы можете редактировать любой из этих элементов, щелкнув синий значок шестеренки справа от каждого из них. А пока нажмите синий «+» в правом нижнем углу.
Как видите, Ninja Forms содержит множество дополнений, которые можно перетаскивать прямо в форму.Допустим, нам нужна отметка даты сообщения. Перетащите поле «Дата» в форму.
Теперь щелкните поле даты, чтобы открыть его свойства справа.
Измените свойства даты в соответствии со своими потребностями. Вы можете изменить метку по умолчанию на текущую дату, изменить формат и даже изменить отображение. Поскольку я хочу, чтобы в форме была указана дата текущего дня, я устанавливаю его обязательным и по умолчанию на текущую дату. После завершения настройки нажмите кнопку «Готово» в верхнем углу.
Нажмите кнопку «Опубликовать» в правом верхнем углу, чтобы сделать форму активной.
Через некоторое время Ninja Forms покажет неактивную кнопку публикации. Нажмите «X» в правом верхнем углу, чтобы закрыть редактор.
Теперь у нас есть идеальная форма для связи. Ninja Form предоставляет шорткод для добавления формы к любому сообщению или странице на вашем веб-сайте. Скопируйте и вставьте этот код, чтобы разместить форму.
Хотя мы могли бы просто разместить эту форму на веб-сайте, мы хотим сделать ее всплывающим окном.Теперь нам нужен плагин Popup Maker.
Использование Popup Maker
Вернитесь в область Добавить новые плагины и установите Popup Maker. Убедитесь, что вы устанавливаете правильный плагин. Существует множество различных инструментов для создания всплывающих окон, и в этом руководстве специально используется Popup Maker.
Откроется новое окно с функциями безопасности. Нажмите кнопку «Пропустить». Вы всегда можете установить плагины безопасности позже.
Появится панель управления Popup Maker с пустым списком всплывающих окон.Если вам понадобится доступ к ним в будущем, они будут именно здесь.
Давайте создадим новое всплывающее окно. Нажмите кнопку «Добавить всплывающее окно» вверху экрана.
Введите новое всплывающее имя для функции. В этом уроке я выберу «Связаться со мной».
Введите новый заголовок всплывающего окна в поле, чтобы идентифицировать его в Popup Maker. Я просто буду использовать то же имя и называть его «Свяжитесь со мной».
Щелкните поле редактора и нажмите кнопку «Добавить форму».
Используйте раскрывающееся окно для выбора формы. Нажмите кнопку «Вставить». Это список из вашего плагина Ninja Forms.
В редакторе WordPress вы найдете множество опций для управления работой всплывающих окон. Это включает в себя настройку триггеров, файлов cookie, настроек отображения, наложения, анимации и многого другого. Настройте их так, как вы хотите, чтобы всплывающее окно работало в соответствии с вашими потребностями.
Вам также необходимо установить свои условия. В этом примере я настраиваю всплывающее окно так, чтобы оно отображалось только на «Домашней странице».
Когда вы будете готовы к запуску формы, нажмите кнопку «Опубликовать» во всплывающем окне.
Теперь у вас есть всплывающая контактная форма.
Настройка всплывающего окна
Между Ninja Forms и Popup Maker у вас есть доступ к довольно большому количеству доступных параметров настройки. Возможно, вам придется немного поэкспериментировать с формой, например, отрегулировать время, если вы хотите, чтобы она открывалась автоматически или где вы хотите, чтобы форма отображалась на вашем сайте.
В самом всплывающем окне у вас есть доступ для изменения темы.Это не то же самое, что тема, с которой работает ваш сайт WordPress. Они предназначены специально для всплывающих окон и могут быть настроены, щелкнув инструмент «Темы всплывающих окон» в разделе «Создатель всплывающих окон».
Хотя вы можете настроить контакт, чтобы форма открывалась во всплывающем окне, вероятно, будет хорошей идеей добавить форму непосредственно на страницу WordPress. Таким образом, посетители могут получить к нему доступ позже, используя настраиваемое меню навигации, если они когда-нибудь закроют всплывающее окно.
Например, вы можете настроить всплывающую контактную форму так, чтобы она открывалась на домашней странице через пять секунд.Затем используйте шорткод для Ninja Form, чтобы разместить его на странице «Свяжитесь со мной» на веб-сайте.
Могу ли я использовать любой плагин для создания всплывающих окон с Ninja Forms?
У вас есть доступ к большому количеству плагинов для создания всплывающих окон для WordPress. На этот раз я использовал только Popup Maker, потому что это один из самых простых и эффективных инструментов для этой цели. Однако есть много вещей, совместимых с Ninja Forms. Найдите тот, который лучше всего подходит для вас.
Будет ли Popup Maker работать с контактной формой 7?
Popup Maker работает с большинством популярных плагинов для создания форм.Фактически, разработчик конкретно указывает, как Contact Form 7 входит в число поддерживаемых плагинов. Из-за того, как создатели форм обрабатываются в WordPress, Popup Maker должен работать с очень большой их частью.
Множество возможностей
Ninja Forms и Popup Maker открывают двери для всех видов возможностей для повышения функциональности вашего сайта. Например, вы можете настроить опросы или поделиться важным контентом с посетителями при входе на свой веб-сайт. Думайте об этом как о выпуске новостей, в котором рассказывается о вашей странице.
В любом случае, с помощью этих двух плагинов легко настроить выдвижные формы и всплывающие окна WordPress. Расширьте возможности вашего сайта для посетителей и посмотрите, сможете ли вы придумать свои собственные идеи. В конце концов, уникальные впечатления — это то, что впечатляет пользователей.
Что бы вы добавили во всплывающее окно для своего веб-сайта? У вас есть контактная или другая целевая страница, готовая для ваших посетителей?
Автор: Каумил Патель
Каумил Патель является главным операционным директором GreenGeeks и имеет более чем 13-летний опыт работы в индустрии веб-хостинга, работая на компании веб-хостинга и владея ими.Каумил специализируется на маркетинге, развитии бизнеса, операциях, слияниях и поглощениях.
Как создать простую и быструю всплывающую форму WordPress
Доказано, что
всплывающих окон работают. У всплывающих окон более высокий рейтинг кликов, чем у других форм рекламы, и было показано, что они увеличивают количество подписок до 86%. ¹, они могут возвращать результаты по шкале 1000% + коэффициент конверсии для форм подписки ², и они могут улучшить подписку на электронную почту, не отгоняя зрителей ³! При правильном использовании всплывающие окна могут быть эффективной формой рекламы, которая побуждает читателя к взаимодействию.Если ваш интерес достиг пика, давайте уделим несколько минут, чтобы обсудить, как создать быструю и простую всплывающую форму WordPress.
Создание простой всплывающей формы WordPress
Существует множество плагинов, которые вы можете загрузить, чтобы помочь вам создавать всплывающие окна для вашего сайта. Однако Popup Maker на сегодняшний день является одним из лучших благодаря простому меню и множеству универсальных применений. Команды разработчиков, стоящие за Ninja Forms и Popup Maker, работают вместе, чтобы гарантировать, что ваши формы и всплывающие окна WordPress легко интегрируются для идеального взаимодействия не только для посетителей вашего веб-сайта, но и для вас!
Шаг первый: загрузка Popup Maker
На панели инструментов WordPress перейдите в Плагины> Добавить новый и найдите Popup Maker .Найдя плагин Popup Maker, нажмите «Установить» и активируйте его.
Шаг второй: откройте Popup Maker на панели инструментов
После установки Popup Maker вы найдете для него новую вкладку на панели инструментов. На этой вкладке вы можете выбрать, хотите ли вы просматривать ранее созданные всплывающие окна, добавлять новые, изменять свои темы и т. Д. На данный момент выберите «Добавить всплывающее окно»
Откроется страница, на которой вы можете назвать свое всплывающее окно, назначить заголовок, установить условия для всплывающего окна, когда оно будет запускаться, установить тему, опубликовать и т. Д.А пока давайте остановимся на основах того, как разместить всплывающее окно на вашем сайте.
Шаг третий: добавьте текст и форму
Для этого урока я создам всплывающее окно, которое будет открываться на моей домашней странице. После того, как у вас будет время познакомиться с Popup Maker, вы можете создавать всплывающие окна с запросом регистрации, информированием зрителей о предстоящих событиях и т. Д. А пока давайте вставим текст-заполнитель и свяжем это всплывающее окно для ранее созданной контактной формы.
Если у вас есть всплывающий текст в том виде, в котором вы хотите, в редакторе форматированного текста, добавить любую форму ниндзя очень просто. Если одновременно установлены Popup Maker и Ninja Forms, вы увидите кнопку «Добавить форму» прямо над параметрами текстового редактора:
Нажмите «Добавить форму», чтобы увидеть список всех ваших форм ниндзя:
Теперь, когда у нас создана всплывающая форма WordPress, давайте настроим, когда и как она будет представлена вашим гостям.
Шаг четвертый: представление всплывающей формы WordPress
Последние три действия — это установка ваших условий, триггеров и файлов cookie. Эти параметры определяют, как и когда открывается всплывающее окно, и могут быть установлены в правом углу панели управления и под текстовым полем:
Чтобы одно и то же всплывающее окно не появлялось везде, я собираюсь установить условие, чтобы оно отображалось только на домашней странице:
… и триггер для автоматического открытия при загрузке страницы:
Наконец, установите файл cookie, который сообщит, что всплывающее окно больше не открывается после того, как оно уже было представлено один раз.Не будь тем веб-сайтом, который рассылает спам всплывающие окна, пожалуйста 🙂
Шаг пятый: опубликуйте!
После того, как вы просмотрели всю свою работу и остались довольны ею, нажмите «Опубликовать» в правом столбце. Теперь у вас должна быть очень простая всплывающая форма, которая открывается на вашей домашней странице с простой формой регистрации при загрузке страницы. Поздравляю!
Вы вряд ли начали исследовать…
Я надеюсь, что это был простой урок, который помог вам увидеть, насколько легко можно добавить всплывающие окна на ваш сайт с помощью Ninja Forms и Popup Maker! Есть еще масса вариантов для изучения, но, поскольку это базовое руководство, мы не будем углубляться в них.Однако вам обязательно стоит взглянуть. Ninja Forms + Popup Maker дает вам невероятную гибкость в разработке чистого, профессионального и стильного набора инструментов для всплывающих окон, которые будут привлекать и волновать ваших посетителей!
Есть ли у вас какие-либо советы или рекомендации, не перечисленные здесь? Поделитесь ими в комментариях ниже и сообщите нам, что сработало для вас!
https://www.smartbugmedia.com/blog/do-pop-up-ads-actually-work-heres-the-data-you-need
https://www.crazyegg.com/blog/opt-pop-ups/
http: // danzarrella.com / my-data-show-email-popups-work-and-dont-damage /
Примечание: для этого содержимого требуется JavaScript.
Как настроить контактную форму 7 и подпись WPES
Шаг 4. Вставьте данные пользователя Contact Form 7 в договор.
Этот шаг не является обязательным и будет зависеть от желаемого результата.

Наше дополнение Contact Form 7 дает вам возможность интегрировать данные пользователя Contact Form 7 (которые были отправлены в форму) в документ, который будет либо отправлен пользователю по электронной почте, либо показан пользователю после того, как он отправит форму.
Как вставить данные поля Контактной формы 7 в договор:
Чтобы вставить данные контактной формы 7 в документ, вам потребуется включить надстройку «Поля ввода подписывающего лица» (электронная подпись> надстройки> найдите WPEsignature — Поля ввода подписывающего лица> Включить> Активировать).
1. Откройте документ в режиме редактирования. Щелкните значок поля ввода подписывающего лица (значок карандаша) в правом верхнем углу панели инструментов.
2.В раскрывающемся меню выберите контактную форму 7, которую вы уже создали и хотите подключиться к своему контракту.
3. Выберите поле формы, которое вы хотите вставить в новый контракт.
В вашем документе будет сгенерирован шорткод с этой информацией. Не волнуйтесь, фактические значения будут отображаться на своем месте после того, как они подпишут ваш документ!
Поле в вашем документе будет выглядеть примерно так:
[esigcf7 Formsid = ”3 ″ field_id =” your-name ”]
Вы можете переместить автоматически сгенерированный шорткод в любое место вашего контракта, и он будет отображать отправленные пользователем данные везде, где у вас есть шорткод.
Шаг 5. Выберите параметры документа и сохраните настройки.
После того, как вы ввели все желаемое содержание документа и поля контактной формы 7 и подключили контактную форму 7 к автономному документу, вы готовы настроить параметры документа.
Прежде чем вы сможете опубликовать свой контракт, вам нужно будет связать автономный документ с пустой страницей WordPress, которую вы создали ранее. Вы можете сделать это, выполнив поиск и выбрав страницу из раскрывающегося меню «Показать на этой странице», расположенного в разделе «Параметры документа».
Шаг 6. Почти готово … готово на 50%!
После публикации автономного документа вы готовы на 50%. Затем вам нужно будет выбрать параметры «триггер» и «действие» для этого документа в настройках рабочего процесса контактной формы 7.
Для этого нажмите Let’s Go Now! во всплывающем окне, которое появляется после публикации автономного документа, чтобы определить последние настройки контактной формы 7.

Шаг 7. Завершите настройку рабочего процесса контактной формы для электронной подписи 7.
Почти готово! Теперь вам просто нужно определить настройки рабочего процесса для электронной подписи Контактной формы 7.
Если вы нажали «ПОЕХАЛИ СЕЙЧАС!» , вы уже находитесь на нужной странице.Если вы этого не сделали, вы можете найти настройки рабочего процесса, посетив контактную форму 7> найдите свою форму> изменить> вкладка E-Signature.
Завершите эти настройки, выбрав поля формы для имени и электронной почты, выбрав логику подписи, выбрав документ и тип отображения.
Важно отметить, что форматирование этих полей ввода должно быть простым текстом, без звездочек и скобок (см. Снимок экрана выше).Если форматирование этих входных данных неверно, ваш документ не сработает.
Вот и все! Теперь вам просто нужно сохранить настройки и разместить контактную форму 7 на странице для тестирования!
Хотите посмотреть демоверсию контактной формы 7 для электронной подписи? Ознакомьтесь с нашими здесь:
Попробуйте нашу бесплатную контактную форму 7 + демо-версию электронной подписи WP!
Остались вопросы? Войдите в свою учетную запись на сайте www.approveme.com
Как настроить контактную форму 7 для вашего сайта WordPress
В 2021 году очень важно оставаться на связи со своей аудиторией.Создание списка рассылки с помощью такой службы, как MailChimp, поможет вам доставлять контент прямо вашим подписчикам.
Списки адресов электронной почты — это здорово, но что, если читатель или потенциальный клиент хочет связаться с вами напрямую? Вот тут-то и пригодятся контактные формы! В этой статье мы расскажем, как настроить популярный плагин Contact Form 7 для вашего сайта WordPress.
Как установить контактную форму 7
Contact Form 7 существует с 2009 года, и за последнее десятилетие ее скачали более 5 миллионов раз.Контактную форму 7 можно установить прямо из репозитория плагинов WordPress. Если вы выполните поиск по запросу «контактная форма 7», вы сможете найти плагин вместе с различными надстройками.
Установите плагин Contact Form 7 из репозитория плагинов WordPress.
После установки плагина вы увидите пункт меню с надписью «Контакт» на боковой панели панели инструментов WordPress. Здесь можно настроить все параметры Contact Form 7.
Настройка параметров контактной формы 7.
Плюсы и минусы наличия контактной формы
Прежде чем мы погрузимся в настройку контактной формы 7 для вашего сайта WordPress, давайте быстро рассмотрим несколько плюсов и минусов добавления контактной формы на ваш сайт.
Плюсы наличия контактной формы
Контактная форма позволяет читателям, клиентам и поклонникам связываться с вами напрямую. В зависимости от цели вашего сайта WordPress возможность посетителя общаться с вами может быть очень важной.Например, отказ от добавления контактной формы на сайт электронной торговли может нанести финансовый ущерб вашему бизнесу, поскольку заинтересованные стороны не смогут связаться с вами, если у них возникнут вопросы о вашем продукте.
Контактная форма добавляет легитимности вашему сайту WordPress или вашему бизнесу. Многие люди видят в наличии контактную форму своего рода фактор доверия. Идея возможности связаться с вами, владельцем сайта, делает ваш контент более надежным.
Минусы наличия контактной формы
Спам может быть проблемой для общедоступных форм, таких как поля для комментариев и контактные формы.К счастью, с Contact Form 7 вы можете отфильтровывать спам с помощью reCAPTCHA. Вы даже можете настроить правило страницы Cloudflare, чтобы защитить себя еще больше. Мы подробно рассмотрим, как настроить защиту от спама в контактной форме 7, позже в этой статье.
После добавления контактной формы на свой сайт вам, вероятно, потребуется время, чтобы отвечать на сообщения. Это не обязательно плохо, в зависимости от того, как на это смотреть. Некоторые люди боятся отвечать на электронные письма, в то время как другим он искренне нравится.По нашему опыту, отношения, которые проявляются из-за наличия контактной формы на вашем сайте, обычно перевешивают затраты на модерацию, поэтому мы рекомендуем использовать ее!
Обзор настроек контактной формы 7
Создать контактную форму с помощью плагина Contact Form 7 очень просто. Чтобы начать, нажмите Контакт> Контактные формы на боковой панели WordPress. На этой странице вы можете просмотреть все свои контактные формы вместе со связанными с ними данными метаданных.
Контактная форма в Контактной форме 7.
При первой установке Contact Form 7 также создается пример формы. Прежде чем мы перейдем к созданию настраиваемой контактной формы, давайте сначала рассмотрим пример формы, чтобы лучше понять, как работает Контактная форма 7. Щелкните Contact Form 1 , чтобы просмотреть настройки формы.
Настройте контактную форму WordPress.
Страница «Редактировать контактную форму» разделена на четыре раздела.
Форма — Настройте свой HTML-шаблон контактной формы с различными параметрами полей, такими как «текст», «электронная почта», «флажки» и т. Д.Вы также можете написать собственный HTML в поле настройки формы.
Почта — Настройте шаблон электронной почты и настройки, используемые для электронных писем с уведомлениями.
Сообщения — Настройте сообщения, которые отображаются после определенных действий. Например, вы можете настроить уникальное сообщение, которое будет отображаться после того, как кто-то отправит контактную форму.
Дополнительные настройки — Укажите фрагменты для включения дополнительных функций, таких как режим только для подписчиков, демонстрационный режим и пропуск почты.
Теперь давайте подробнее рассмотрим каждый раздел и создадим индивидуальную контактную форму!
Вы знаете, что они говорят — держите своих друзей ближе, а аудиторию ближе … или что-то в этом роде. 😉 Оставайтесь на связи с посетителями сайта благодаря этому популярному плагину 👇Нажмите, чтобы твитнуть
Как создать контактную форму WordPress
Чтобы создать новую контактную форму, щелкните Добавить новый рядом с «Контактными формами».
Создайте новую контактную форму в Контактной форме 7.
Дайте новой контактной форме имя и нажмите «Сохранить».
Сохраните новую контактную форму WordPress.
В разделе «Форма» добавьте необходимый HTML-код для вашей контактной формы. Вы можете использовать различные предустановленные кнопки для создания шорткодов для популярных тегов форм. Чтобы упростить задачу, ознакомьтесь с описанием ниже предустановленных тегов формы, которые поставляются с контактной формой 7.
Текст — Создайте тег формы для одной строки текста. Текстовые поля полезны для имен, фамилий и других текстовых фрагментов, для которых не требуется несколько строк.
Электронная почта — Создайте тег формы для адреса электронной почты.
URL — Создайте тег формы для URL.
Tel — Создайте тег формы для телефонного номера.
Номер — Создайте тег формы для числа. В отличие от полей ввода «текст» или «текстовая область», «числовые» поля допускают только числовые цифры.
Дата — Создание тега формы для даты.
Текстовая область — Создайте тег формы для текстовой области.В отличие от обычного поля ввода «текст», поле «текстовая область» позволяет вводить несколько строк текста. Они идеально подходят для ввода текста сообщения.
Раскрывающееся меню — Создайте тег формы для раскрывающегося меню.
Флажки — Создайте тег формы для флажков.
Radio Buttons — Создайте тег формы для переключателей.
Принятие — Создайте тег формы для флажка принятия.
Quiz — Создайте тег формы для пары вопрос-ответ.
Файл — Создайте тег формы для поля загрузки файла.
Отправить — Создайте тег формы для кнопки отправки.
Теперь давайте настроим контактную форму. Для полноты картины мы создадим контактную форму, в которой будут использоваться все предустановленные теги формы в Контактной форме 7.
Тег формы «Текст»
Если вы нажмете на предварительно заданный тег формы в контактной форме 7, вы увидите всплывающее меню, подобное приведенному ниже. В этом меню вы можете настроить параметры тега формы.Внизу вы увидите шорткод, который можно встроить в шаблон контактной формы.
Тег «текстовой» формы в контактной форме 7.
Для тега формы «текст» мы используем настройки ниже, чтобы создать поле ввода для имени.
Тип поля — Обязательное поле
Имя — text-711 (генерируется автоматически)
Значение по умолчанию — Ваше имя (используется как текст заполнителя по умолчанию)
Akismet — Без проверки
Атрибут идентификатора (CSS) — cf7-your-name
Атрибут класса (CSS) — cf7-your-name
Эти настройки генерируют короткий код, указанный ниже.
[text * text-711 id: cf7-your-name class: cf7-your-name placeholder "Your Name"]
На данный момент просто нажмите кнопку Insert Tag , чтобы добавить тег формы в шаблон контактной формы. Позже мы добавим дополнительные HTML-теги для структурирования формы.
Тег формы «Электронная почта»
Затем мы создадим тег формы электронной почты, который позволит нашей контактной форме собирать адреса электронной почты.
Тег формы «электронное письмо» в контактной форме 7.
Для тега формы «электронная почта» мы настроили следующие параметры.
Тип поля — Обязательное поле
Имя — email-632 (автоматически сгенерировано)
Значение по умолчанию — Ваш адрес электронной почты
Akismet — Не отмечено.
Атрибут идентификатора (CSS) — ваш-адрес электронной почты
Атрибут класса (CSS) — ваш-адрес электронной почты
Эти настройки генерируют короткий код, указанный ниже.
[email * email-632 id: email class: email placeholder «Your Email»]
Тег формы «URL»
В некоторых случаях вам может потребоваться поле ввода в вашей контактной форме для сбора информации о чьем-либо веб-сайте.Хотя технически вы можете использовать для этого в контактной форме 7 обычный тег «текстовой» формы, мы рекомендуем вместо этого использовать тег формы «URL». Тег формы «URL» сгенерирует поле ввода, которое проверяет URL-адреса, чтобы убедиться, что они правильно отформатированы.
Тег формы «URL» в контактной форме 7.
Для тега формы «url» мы настроили следующие параметры.
Имя — url-601 (автоматически сгенерировано)
Значение по умолчанию — Ваш веб-сайт
Akismet — Не отмечено.
Атрибут идентификатора (CSS) — cf7-your-website
Атрибут класса (CSS) — cf7-your-website
Эти настройки генерируют короткий код, указанный ниже.
[url url-601 id: cf7-your-website class: cf7-your-website «Your Website»]
Тег формы «Tel»
Подобно URL-адресам, вы также можете использовать стандартный тег «текстовой» формы для сбора телефонных номеров. Однако лучше использовать тег формы «tel», чтобы убедиться, что номер телефона действителен.
Тег формы «tel» в контактной форме 7.
Для тега формы «tel» мы настроили следующие параметры.
Имя — tel-842 (сгенерировано автоматически)
Значение по умолчанию — Ваш номер телефона
Атрибут идентификатора (CSS) — cf7-your-phone-number
Атрибут класса (CSS) — cf7-your-phone-number
Эти настройки генерируют короткий код, указанный ниже.
[url url-601 id: cf7-your-website class: cf7-your-website «Your Website»]
Тег формы «Дата»
Тег формы «дата» в контактной форме 7
позволяет создать средство выбора даты в стиле календаря.Это поле ввода «дата» полезно для указания дат встречи в контактной форме.
Тег формы «дата» в контактной форме 7.
Для тега формы «дата» мы настроили следующие параметры.
Имя — date-389 (автоматически сгенерировано)
Значение по умолчанию — Дата вашей встречи
Диапазон — Наш настраиваемый диапазон дат.
ID Атрибут (CSS) — cf7-assign-date
Атрибут класса (CSS) — cf7-assign-date
Эти настройки генерируют короткий код, указанный ниже.
[date * date-389 min: 2020-09-15 max: 2020-10-24 id: cf7-assign-date class: cf7-assign-date placeholder «Ваша дата встречи»]
Тег формы «Textarea»
Тег формы «textarea» позволяет создать многострочное текстовое поле, которое позволяет посетителям отправлять более длинные сообщения. Текстовые поля наиболее удобны для записи тела сообщения.
Тег формы «textarea» в контактной форме 7.
Для тега формы «textarea» мы настроили следующие параметры.
Имя — textarea-795 (автоматически сгенерировано)
Значение по умолчанию — Ваше сообщение
Атрибут идентификатора (CSS) — cf7-your-message
Атрибут класса (CSS) — cf7-your-message
Эти настройки генерируют короткий код, указанный ниже.
[textarea * textarea-795 id: cf7-your-message class: cf7-your-message placeholder «Ваше сообщение»]
Тег формы «Раскрывающееся меню»
Тег формы «раскрывающееся меню»
Contact Form 7 позволяет создать раскрывающееся меню с несколькими вариантами.Выпадающие меню полезны в ситуациях, когда вы хотите, чтобы посетитель выбрал конкретный вариант для отправки с формой. Например, если вы управляете компанией по обслуживанию WordPress, вы можете настроить раскрывающееся меню, которое позволяет посетителю выбирать между услугами, которые вы предлагаете.
Тег формы «раскрывающееся меню» в контактной форме 7.
Для тега формы «раскрывающееся меню» мы настроили следующие параметры.
Имя — меню-24 (генерируется автоматически)
Опции — Вариант 1, Вариант 2, Вариант 3, Вариант 4
Разрешить множественный выбор — Проверено
Вставьте пустой элемент в качестве первого варианта — Проверено
Атрибут ID — cf7-drop-down-menu
Атрибут класса — cf7-drop-down-menu
Эти настройки генерируют короткий код, указанный ниже.
[checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox use_label_element «Вариант 1» «Вариант 2» «Вариант 3»]
Тег формы «Флажок»
Тег формы флажка позволяет создавать флажки в формате HTML. Подобно раскрывающимся меню, флажки также можно использовать для выбора предопределенных параметров. В зависимости от характера вашей контактной формы флажки могут работать лучше, чем раскрывающиеся меню. Например, если у вас есть небольшое количество вариантов для выбора, флажок сокращает количество щелчков мышью, необходимых для выбора.С другой стороны, если в вашей контактной форме много параметров, раскрывающееся меню может работать лучше, поскольку оно занимает меньше места по вертикали.
Тег формы «флажок» в контактной форме 7.
Для тега формы «флажок» мы настроили следующие параметры.
Имя — флажок-948 (сгенерировано автоматически)
Опции — Вариант 1, Вариант 2, Вариант 3
Оберните каждый товар элементом этикетки — Проверено
Атрибут ID — cf7-checkbox
Атрибут класса — cf7-checkbox
Эти настройки генерируют короткий код, указанный ниже.
[checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox use_label_element «Вариант 1» «Вариант 2» «Вариант 3»]
Тег формы «Радио кнопки»
Тег формы «переключатели» позволяет создавать переключатели с несколькими вариантами. В отличие от флажков и раскрывающихся меню, переключатели позволяют выбрать только один вариант.
Тег формы «радио-кнопки» в контактной форме 7.
Для тега формы «радио-кнопки» мы настроили следующие параметры.
Имя — radio-708 (генерируется автоматически)
Опции — Вариант 1, Вариант 2, Вариант 3
Оберните каждый товар элементом этикетки — Проверено
ID Атрибут — cf7-radio
Атрибут класса — cf7-radio
Эти настройки генерируют короткий код, указанный ниже.
[radio radio-708 id: cf7-radio class: cf7-radio use_label_element default: 1 «Option 1» «Option 2» «Option 3»]
Тег формы «Принятие»
Тег формы «принятия» в контактной форме 7
можно использовать для создания одного флажка с целью принятия условий.С помощью настроек тега формы принятия вы можете указать сообщение для отображения.
Тег формы «Принятие» в контактной форме 7.
Для тега формы «Принятие» мы настроили следующие параметры.
Имя — приемка-545 (генерируется автоматически)
Условие — Установите этот флажок, чтобы принять условия.
ID Атрибут — cf7-accept
Атрибут класса — cf7-accept
Эти настройки генерируют короткий код, указанный ниже.
[accept accept-545 id: cf7-accept class: cf7-accept] Установите этот флажок, чтобы принять условия. [/ accept]
Тег формы «Викторина»
Тег формы «викторина» может использоваться для создания базовых вопросов и ответов в вашей контактной форме. Чтобы создать вопрос викторины, используйте следующий формат для разделения вопроса и ответа — Вопрос | Ответ. На скриншоте ниже наш вопрос: «В каком году был выпущен WordPress?», А ответ (разделенный символом «|») — 2003.
Тег формы «викторина» в контактной форме 7.
Для тега формы «викторина» мы настроили следующие параметры.
Подпишитесь на информационный бюллетень
Хотите узнать, как мы увеличили наш трафик более чем на 1000%?
Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!
Подпишитесь сейчас
Имя — quiz-461 (генерируется автоматически)
Условие — Установите этот флажок, чтобы принять условия.
Атрибут ID — cf7-quiz
Атрибут класса — cf7-quiz
Эти настройки генерируют короткий код, указанный ниже.
[quiz quiz-461 id: cf7-quiz class: cf7-quiz «В каком году был выпущен WordPress? | 2003»]
Тег формы «Файл»
Тег формы «файл» в
Contact Form 7 позволяет добавить функцию загрузки файлов в контактную форму. Это полезно в ситуациях, когда вы хотите, чтобы посетитель мог загрузить изображение или файл PDF для отправки вместе с формой.Например, если вы ведете блог о фотографии с фотогалереями, в которых публикуются гостевые материалы, вы можете добавить функцию загрузки файлов, чтобы люди могли загружать изображения.
В настройках тега формы вы можете указать различные параметры для защиты вашей формы. Мы рекомендуем всегда устанавливать ограничение на размер файла, чтобы злоумышленники не могли загружать огромные файлы. Точно так же указание «приемлемых типов файлов» поможет вам ограничить вашу форму форматами файлов, которые вы хотите и ожидаете. Имея в виду пример блога о фотографии, вы можете ограничить размер файла до 1 МБ (1024 КБ) и допустимые типы файлов только для известных форматов изображений, таких как JPG и PNG.
Тег формы «файл» в контактной форме 7.
Для тега формы «файл» мы настроили следующие параметры.
Имя — файл-658 (автоматически сгенерировано)
Ограничение размера файла — 1024 КБ
Допустимые типы файлов — jpg | png | gif
Атрибут ID — cf7-файл
Атрибут класса — cf7-файл
Эти настройки генерируют короткий код, указанный ниже.
[предел файла 658: 1024 КБ filetypes: jpg | png | gif id: cf7-file class: cf7-file]
Тег формы «Отправить»
И последнее, но не менее важное, это тег формы «отправки» в контактной форме 7.Как вы уже догадались, этот тег формы позволяет создать кнопку отправки для контактной формы.
Тег формы «отправить» в контактной форме 7.
Для тега формы «отправить» мы настроили следующие параметры.
Этикетка — Отправить
ID Атрибут — cf7-submit
Атрибут класса — cf7-submit
Эти настройки генерируют короткий код, указанный ниже.
[идентификатор отправки: cf7-submit class: cf7-submit «Отправить»]
Как структурировать контактную форму с помощью тегов формы
Теперь, когда у нас настроены все теги формы, пора создать контактную форму.На этом этапе настройки вашей контактной формы должны выглядеть, как на снимке экрана ниже. Обратите внимание на все теги формы, которые мы создали выше. Установив теги формы, вы можете использовать шорткод [contact-form-7] , чтобы встроить форму в сообщение или страницу WordPress.
Вставьте контактную форму с коротким кодом contact-form-7.
В редакторе WordPress вставьте шорткод в пустой блок.
Добавьте шорткод Контактной формы 7 к сообщению или странице.
Если вы используете классический редактор WordPress, вы можете вставить шорткод в любом месте редактора контента.
Используйте контактную форму 7 с классическим редактором WordPress.
Теперь вы должны увидеть контактную форму на странице, на которой вы добавили шорткод Контактной формы 7. Вот как выглядит наша контактная форма с указанными выше настройками. Как видите, Contact Form 7 автоматически преобразует теги формы в допустимый HTML, который отображается с использованием стилей CSS по умолчанию, включенных в вашу тему WordPress.
Контактная форма, созданная с помощью контактной формы 7.
Наша контактная форма в ее текущем состоянии является хорошей отправной точкой, но ей не хватает одной ключевой функции.Теги формы, такие как «текст», «электронная почта» и «URL», поддерживают заполнители, но другие элементы, такие как «флажки» и «переключатели», не поддерживают. Без соответствующих ярлыков флажки и переключатели не будут очень полезны для посетителей, потому что у них нет контекста. К счастью, добавить ярлыки в контактную форму 7 очень просто!
Как добавить ярлыки тегов формы в контактную форму 7
Есть два способа добавить метки к тегам формы Contact Form 7. Для тегов формы ниже вы можете просто обернуть тег формы тегом .
Текст
Электронная почта
URL
Тел.
Число
Дата
Текстовая область
Приемка
Викторина
Файл
Взгляните на приведенный ниже пример тега «текстовой» формы.
[text * text-711 id: cf7-your-name class: cf7-your-name placeholder "Your Name"]
Чтобы добавить метку к этому тегу формы, мы можем заменить тег формы приведенным ниже фрагментом. Обратите внимание на дополнительный экземпляр «Your Name» сразу после открывающего тега .
Ваше имя [text * text-711 id: cf7-your-name class: cf7-your-name заполнитель "Ваше имя"]
Вот как это изменение выглядит в нашей контактной форме. В этом случае вновь созданная метка служит той же цели, что и заполнитель. Однако, если мы не хотим указывать местозаполнитель в теге формы, то метка поможет определить назначение конкретного поля ввода.
Добавьте метку к тегу формы в контактной форме 7.
Для тегов формы, которые отображают несколько элементов управления формой, таких как флажки , переключатели и раскрывающиеся меню , перенос тега формы внутрь тега приводит к ошибке. Это происходит потому, что тег должен использоваться только с одним элементом управления формой. По своей природе флажки, переключатели и параметры раскрывающегося меню включают несколько элементов управления формой, поэтому они несовместимы с решением для маркировки по умолчанию.
Для флажков, переключателей и раскрывающихся меню необходимо добавить параметр use_label_element в шорткод.Взгляните на пример тега формы флажка ниже, где use_label_element выделен жирным шрифтом.
[checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]
После добавления параметра use_label_element вы можете добавить метку непосредственно над тегом формы в редакторе контактной формы.
Добавьте метку для флажков, переключателей и раскрывающихся меню в контактной форме 7.
Для полноты картины мы добавили ярлыки ко всем тегам формы в нашей контактной форме. Скорее всего, вам не нужно будет делать это для рабочего сайта, потому что некоторые теги форм уже содержат заполнители. Тем не менее, мы хотели продемонстрировать, как работают лейблы.
Вот как выглядит наша контактная форма:
Контактная форма с этикетками.
Настройка параметров почты в контактной форме 7
Теперь, когда мы настроили структуру нашей контактной формы, пора взглянуть на настройки доставки электронной почты в Контактной форме 7.Хотя настройки доставки почты по умолчанию должны работать нормально для большинства сайтов, все же важно понимать различные настройки, если ваш сайт или вариант использования требуют особой конфигурации.
Чтобы получить доступ к настройкам доставки почты, перейдите в редактор контактной формы и выберите вкладку «Почта».
Настройки доставки почты в контактной форме 7.
Параметры доставки почты
Contact Form 7 позволяют настраивать шаблоны и параметры, которые используются для создания и отправки вам уведомления после того, как кто-то отправит форму.Если вы используете неправильные настройки, возможно, вы не получите уведомление об отправке формы. Таким образом, важно протестировать доставку формы после создания контактной формы и изменения настроек.
Contact Form 7 позволяет настроить следующие параметры доставки почты.
Кому — адрес электронной почты, на который отправляется уведомление.
От — адрес электронной почты, с которого отправляется уведомление.
Тема — тема электронного письма с уведомлением.
Дополнительные заголовки — указывает дополнительные заголовки электронной почты, такие как «ответ».
Тело сообщения — тело электронного письма с уведомлением.
Вложения файлов — укажите любые вложения, которые необходимо включить в электронное письмо с уведомлением.
Теперь давайте рассмотрим каждую настройку, чтобы лучше понять, как они могут повлиять на доставку почты в контактной форме 7.
Поле «Кому»
Обязательно укажите реальный адрес электронной почты для параметра «Кому».По умолчанию Contact Form 7 назначает адрес электронной почты, связанный с вашей учетной записью WordPress, параметру «Кому». Если ваш адрес электронной почты WordPress недействителен, обязательно обновите его в настройках своего профиля, а также измените адрес электронной почты в контактной форме 7.
Поле «От»
Параметр «От» должен использовать следующий формат — Ваше имя . В настройках электронной почты контактной формы мы используем kinstalife <[email protected]> .
По умолчанию Контакт 7 заполнит это поле значением [адрес электронной почты защищен] .Вы должны убедиться, что этот адрес электронной почты действительный, потому что некоторые хосты WordPress блокируют исходящую электронную почту на недопустимые адреса. Есть несколько способов сделать этот адрес электронной почты действительным. Вы можете либо создать специальную учетную запись электронной почты для [электронная почта защищена], либо включить функцию всеобъемлющего контроля у своего поставщика услуг электронной почты. Если вам не удается настроить этот адрес электронной почты, рекомендуем изменить его на действующий адрес электронной почты, чтобы избежать проблем с доставкой.
Поле «Тема»
Параметр «Тема» может использоваться для указания строки темы для уведомлений по электронной почте.По умолчанию в контактной форме 7 в качестве темы задается Имя сайта «[ваш-тема]» — имя темы в шаблоне формы Контактной формы 7 по умолчанию.
Если в вашей форме нет тега формы с именем «[your-subject]», не забудьте заменить его на что-нибудь другое. Например, если у вас есть только тег формы для записи имени посетителя (например, [your-name]), вы можете изменить строку темы на . Вы получили сообщение от [your-name] .
Поле «Дополнительные заголовки»
В разделе «Дополнительные заголовки» вы можете указать такие заголовки электронной почты, как «ответ», «Копия» и «Скрытая копия».По умолчанию контактная форма 7 добавляет следующий заголовок — Reply-To: [ваш-адрес электронной почты] . Этот заголовок позволяет вам ответить на адрес электронной почты, указанный в отправленной контактной форме.
Заголовок ответа по умолчанию подходит, если вы используете тег формы электронной почты по умолчанию в Contact Form 7. Если это не так, обязательно измените его, чтобы он соответствовал имени тега формы электронной почты. Для нашей контактной формы имя тега формы электронной почты — «email-632», поэтому тег формы ответа необходимо изменить на . Reply-To: [email-632] .
«Тело сообщения»
Далее идет «Тело сообщения», которое определяет содержание тела электронного письма с уведомлением. В шаблоне контактной формы 7 по умолчанию используются теги формы [your-name], [your-email], [your-subject] и [your-message], и он выглядит так:
От кого: [ваше имя] Тема: [ваша-тема] Текст сообщения: [Ваше сообщение] - Это письмо было отправлено через контактную форму на сайте kinstalife (http://kinstalife.com)
Не забудьте изменить эти теги формы, если вы не используете их в шаблоне контактной формы.Поскольку созданная нами контактная форма собирает много информации, мы можем настроить тело сообщения с дополнительными тегами формы, например:
Здравствуйте, Брайан, вы получили сообщение от [text-711] ([email-632]). Сайт: [url-601] Номер телефона: Tel-842 Дата назначения: дата-389 Сообщение: textarea-795
Настройте тело сообщения для уведомлений по электронной почте Contact Form 7.
Контактная форма 7 Настройки почты — Вложения файлов
Если ваша контактная форма предполагает загрузку файла, вы можете включить этот файл в электронное письмо с уведомлением.В нашей контактной форме у нас есть тег формы загрузки файла с именем «[file-658]». Таким образом, мы можем добавить этот тег формы в «Вложения файлов», чтобы гарантировать, что файл будет включен в уведомление по электронной почте.
Включать прикрепленные файлы в электронные письма с уведомлением Contact Form 7.
Контактная форма 7 Проблемы с доставкой почты
Если вы обнаружите, что Контактная форма 7 не отправляет электронные письма, есть несколько вещей, которые вы можете проверить, прежде чем обратиться за помощью к разработчику WordPress.
Проверьте, отправляет ли ваш сервер другие типы писем.Чтобы проверить это, вы можете инициировать другое действие по доставке электронной почты, сделав тестовый комментарий к сообщению в блоге или отправив запрос на сброс пароля на странице входа в WordPress. Если вы получили электронное письмо после выполнения одного из этих действий, проблема, скорее всего, связана с настройкой контактной формы 7. Если вы не получаете электронные письма, обратитесь в службу поддержки своего хозяина и сообщите им, что у вас возникла проблема с доставкой электронной почты.
Убедитесь, что поля «Кому» и «От» в настройках доставки почты вашей контактной формы настроены правильно.Для правильной работы контактной формы 7 оба этих поля должны быть заполнены реальными адресами электронной почты.
Контактная форма 7 Сообщения об отправке формы
Contact Form 7 позволяет настраивать различные сообщения для отправки формы. Эти сообщения отображаются после выполнения определенного условия. Например, если посетитель забыл заполнить обязательное поле, в контактной форме 7 отобразится сообщение «Это поле обязательно». В большинстве случаев сообщения по умолчанию должны работать нормально. Однако, если вы хотите настроить сообщения, вы можете сделать это, щелкнув вкладку «Сообщения» в редакторе контактной формы.
Настройка контактной формы 7 ситуационных сообщений.
Как защитить вашу контактную форму
По мере того, как с годами автоматизированные боты становились все более умными и распространенными, спам стал серьезной проблемой для контактных форм. Поскольку контактные формы обычно открыты для общего доступа в Интернет, парсеры довольно легко обнаруживают их и отправляют спам-сообщения в ваш почтовый ящик. К счастью, есть разные способы отразить спамеров и защитить вашу контактную форму.
Защитите свою контактную форму 7 с помощью reCAPTCHA
Если вы когда-либо отправляли форму в Интернете, вы, вероятно, уже знакомы с reCAPTCHA, технологией, разработанной Google для определения автоматического поведения ботов.В более старых версиях reCAPTCHA (V2) пользователи должны были пройти головоломку или испытание.
Последняя версия reCAPTCHA (V3) не требует взаимодействия со стороны пользователей. Вместо этого он прозрачно отслеживает активность пользователей в фоновом режиме, чтобы различать посетителей-людей и ботов. Поскольку Contact Form 7 поддерживает reCAPTCHA V3, мы рекомендуем использовать эту последнюю версию, поскольку она обеспечивает лучший пользовательский интерфейс для посетителей.
Чтобы настроить reCAPTCHA, вам сначала нужно сгенерировать ключ API.Для этого войдите в свою учетную запись Google и перейдите на страницу настройки reCAPTCHA.
Зарегистрируйте новый сайт для интеграции reCAPTCHA.
Пройдите через регистрационную форму, чтобы создать reCAPTCHA.
Этикетка — Укажите этикетку по вашему выбору.
Тип reCAPTCHA — Contact Form 7 поддерживает reCAPTCHA v3, поэтому выберите эту версию.
Домены — Если ваш сайт использует корневой домен, добавьте версию своего домена без www и www.Если ваш сайт использует субдомен, просто добавьте субдомен.
Владельцы — Адрес электронной почты, связанный с вашей учетной записью Google, будет добавлен в качестве владельца по умолчанию. Не стесняйтесь добавлять дополнительные адреса электронной почты, если это необходимо.
После того, как вы заполнили все параметры, нажмите Отправить . Затем вам будут представлены «ключ сайта» и «секретный ключ» для вашего сайта. Обязательно храните эти ключи в надежном месте, потому что вам нужно будет добавить их в контактную форму 7.
Google reCAPTCHA сайт и секретные ключи.
Затем нажмите «Контакт» на боковой панели панели инструментов WordPress и нажмите Integration . Выберите опцию reCAPTCHA и вставьте ключ своего сайта и секретный ключ в соответствующие поля. Наконец, нажмите Сохранить изменения , чтобы завершить интеграцию reCAPTCHA.
Настройте reCAPTCHA в контактной форме 7.
После настройки reCAPTCHA в контактной форме 7 вы увидите логотип reCAPTCHA в правом нижнем углу страницы контактной формы. Это означает, что reCAPTCHA активна и защищает вашу контактную форму от спама.
Контактная форма WordPress защищена reCAPTCHA V3.
Защитите свою контактную форму с помощью Cloudflare (необязательно)
Если вы используете Cloudflare для защиты своего сайта, вы можете настроить специальное правило страницы для своей страницы контактной формы, чтобы уменьшить количество спама, отправляемого контактной формой.
Защитите свою контактную форму с помощью Cloudflare.
Чтобы добавить правило страницы, щелкните вкладку «Правила страницы» и используйте следующие настройки, чтобы защитить свою страницу контактов.
Если URL совпадает — * your-domain.ru / your-contact-page / *
Проверка целостности браузера — на
Уровень безопасности — Высокий
Функция Cloudflare «Проверка целостности браузера» анализирует заголовки HTTP. Если он обнаруживает заголовок HTTP, который обычно используется автоматическими ботами и спамерами, он отклоняет запрос к вашему сайту. Установка «Высокого уровня безопасности» бросит вызов всем посетителям, которые проявляли злонамеренное поведение в течение последних двух недель.
Если вы ограничите эти настройки своей контактной страницей с помощью правила соответствия URL, другие страницы вашего сайта не будут затронуты этими правилами страниц.Мы рекомендуем эту конфигурацию, потому что обычные страницы вашего сайта, предназначенные только для чтения, обычно не требуют повышенного уровня безопасности.
Не оставляйте аудиторию на прочтении. 👀 Поддерживайте прямой контакт со своими читателями и потенциальными клиентами через плагин Contact Form 7 Нажмите, чтобы твитнуть
Сводка
Contact Form 7 — самый популярный плагин для контактной формы, и не зря! Его можно использовать для создания всего: от базовых контактных форм до опросов типа «вопрос-ответ» и до сложных форм, поддерживающих вложения файлов и раскрывающиеся меню.