Как создается всплывающая форма обратной связи WordPress
В этой статье мы пошагово опишем, как создается всплывающая форма обратной связи WordPress
- Контактная форма для WordPress -это очень легко
- Шаг 1. Установите плагины WPForms и OptinMonster
- Шаг 2. Создайте контактную форму, используя WPForms
- Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster
- Шаг 4. Публикация всплывающей формы
- Шаг 5. Добавление ссылки для запуска всплывающей контактной формы
Контактная форма для WordPress -это очень легко
Для создания формы потребуется:
- Плагин для создания всплывающих окон;
- Плагин для создания форм.
Для создания контактной формы мы рекомендуем использовать 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, расположенную справа. Теперь созданная вами форма работает.
Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки огромное вам спасибо!