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

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

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

Обновлено: 2025-08-12 01:27:12 Сергей Бензенкоавтор материала

Контактная форма для WordPress -это очень легко

Для создания формы потребуется:

1. Плагин для создания всплывающих окон;
2. Плагин для создания форм.

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

Для создания всплывающих окон мы используем плагин OptinMonster.

Шаг 1. Установите плагины WPForms и OptinMonster

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

Шаг 2. Создайте контактную форму, используя WPForms

Чтобы создать форму обратной связи, в панели администрирования WordPress перейдите в раздел WPForms > Add New.

На следующей странице выберите шаблон Simple contact form и задайте ей имя.

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

Сохраните внесенные изменения. После этого созданная форма будет готова к работе. Затем перейдите на вкладку Embed и скопируйте код формы.

Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster

Чтобы создать модальное всплывающее окно, в административной панели WordPress перейдите в раздел OptinMonster > Create New Campaign.

На следующей странице выберите тип кампании Simple contact form.

В качестве шаблона установите Canvas. Это пустой холст, куда можно вставить любой код HTML, CSS, JavaScript.

На следующей странице введите название кампании.

Затем перейдите на вкладку Start building. После этого вы будете перенаправлены в конструктор. Чтобы создать всплывающее окно, используйте параметры, расположенные на вкладке Design.

Нажмите на кнопку Add Blocks и прокрутите вниз, чтобы найти варианты блоков. Под ними вы увидите HTML-блок. Перетащите его в область проектирования.

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

<h3>Do you have any questions?</h3>
<p class="tagline">Want to ask more about our service? Simply fill out the form and we'll get back to you as soon as possible.
<!— код вашей формы WPForms -->

Сохраните внесенные изменения. После этого перейдите на вкладку Display rules и установите время на ноль.

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

Шаг 4. Публикация всплывающей формы

Нажмите на кнопку Yes/No, расположенную в верхней части экрана и перейдите на вкладку Activate.

На вкладке Publish переключите статус в режим live.

После этого перейдите в раздел OptinMonster > Campaigns. Здесь вы увидите свою кампанию. Нажмите на кнопку Edit output settings и становите флажок Enable the campaign on site.

Нажмите кнопку Save settings, расположенную в конце страницы.

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

Сначала скопируйте ключ вашей кампании OptinMonster, который указан рядом с ее названием.

Создайте новую страницу в WordPress. Затем перейдите в текстовый редактор WordPress и добавьте приведенный ниже код. Не забудьте вставить ваш ключ.

<a href="#" class="manual-optin-trigger" data-optin-slug="ваш ключ здесь">Contact us</a>

После этого нажмите кнопку Publish, расположенную справа. Теперь созданная вами форма работает.

Сергей Бензенкоавтор-переводчик статьи «How to Create a Contact Form Popup in WordPress – Step by Step»