FEATURED: What to watch in the markets today  - read our article!
Инструкции WP

Как создать всплывающую контактную форму в WordPress (открыть форму во всплывающем окне)

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

Во-первых, я покажу вам, как сделать это с помощью 100% бесплатный плагинов: комбинация плагина для высплывающих окон и плагина формы. Затем я также покажу вам, как вы можете сделать это с помощью одного плагина с платной версией Elementor Pro. Вы также можете потребовать от пользователей нажать кнопку, которая открывает форму контакта во всплывающем окне. Или вы можете просто автоматически вызвать контактную форму на основе различных условий.

Итак — два способа открыть контактную форму во всплывающем окне на WordPress.

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

Вот пример того, что вы будете создавать с помощью этого метода:

Пример всплывающей контактной формы WordPress

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

Для достижения этой функциональности вам понадобятся два бесплатных плагина:

  • Popup Maker — этот плагин позволяет создавать всплывающее окно, в котором размещается ваша контактная форма, и запускать его, когда пользователь нажимает кнопку.
  • WPForms (или ваш предпочтительный плагин контактной формы) — для этого урока я буду использовать WPForms создать контактную форму, которая идет внутри всплывающего окна. Тем не менее, вы можете использовать любой плагин для создания контактной формы, главное чтобы он позволял вам вставлять формы через шорткод.

Шаг 1: Создайте свою контактную форму

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

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

Когда вы закончите с вашей формой, нажмите «Встроить (Embed)» Нажмите кнопку и скопируйте шорткод для вставки формы, потому что он понадобится вам на следующем шаге:

Шаг 2. Создайте всплывающее окно

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

Для этого перейдите в Popup Maker → Добавить всплывающее окно (Add popup)

Затем вставьте код для встраивания вашей контактной формы в текстовый редактор:

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

Когда вы закончите, убедитесь, что опубликовали ваше всплывающее окно

Шаг 3: Создать кнопку, чтобы открыть всплывающее окно

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

Чтобы кнопка открыла контактную форму, вам нужно добавить CSS-класс только что созданного всплывающего окна .

Вот пример кнопки HTML:

Чтобы найти этот CSS-класс — popmake-contact-form в моем примере — нужно перейти в Popup Maker → All popups и посмотреть на колонку CSS Classes:

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

Если вы используете новый редактор блоков Gutenberg, Вы можете добавить HTML в Пользовательский HTML блок. Или, если вы использете классический редактор, вы можете использовать Текст вкладка:

На этом все! После того, как вы опубликуете страницу, ваши посетители смогут нажать на кнопку, чтобы открыть контактную форму:

Пример всплывающей контактной формы WordPress

Как открыть всплывающее окно автоматически (вместо нажатия кнопки)

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

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

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

Как открыть контактную форму во всплывающем окне на WordPress с Elementor Pro

Пример того, чтоу вас получится:

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

Elementor Pro это популярный плагин для конструктора страниц, который позволяет создавать контент с помощью визуального редактора методом перетаскивания.

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

Шаг 1. Создайте всплывающее окно

После того, как вы установили и активировали Elementor Pro, нужно перейти в Шаблоны → Всплывающие окна → Добавить новый попап (Add new popup):

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

Задайте имя вашему всплывающему окну и нажмите Создать шаблон (Create Template):

создать новый шаблон

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

Шаг 2: Настройте свою форму

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

Этот виджет позволит вам добавлять и изменять поля для сбора необходимой информации:

шаблон элемента

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

Шаг 3: опубликовать всплывающее окно

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

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

Вкладка Триггеры (Triggers), чтобы выбрать, когда отображать форму.

Однако в этом руководстве я показываю вам, как открыть форму, когда пользователь нажимает кнопку. Для этого, вам не нужно устанавливать какие-либо триггеры или условия — просто нажмите кнопку Сохранить и закрыть :

Шаг 4: Создать кнопку, чтобы открыть всплывающую контактную форму

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

Добавить виджет Кнопка. Нужно выбрать динамический. От слова динамический (Dynamic) в раскрывающемся списке, выберите вариант Действия (Action)> Всплывающее окно (Popup):

Затем нажмите на Popup и отредактируйте его настройки:

  • Действие (action) — «Open Popup»
  • Popup — выберите всплывающее окно, которое вы только что создали

Все! И не забудьте опубликовать страницу!

Рекомендую прочитать
Инструкции WP

Как исправить ошибку: "Warning: A non-numeric value encountered..."

Инструкции WP

Как исправить ошибку «Небезопасный контент» (смешанный контент) в WordPress

Инструкции WP

Как правильно перейти с Wix на WordPress (2019)

Инструкции WP

Как легко вставлять видео в записи блога WordPress

Sign up for our Newsletter and
stay informed

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *