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

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


Вы хотите открыть свою контактную форму, когда пользователь нажимает на кнопку контакта или ссылку?

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

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

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

  1. мощный всплывающий плагин
  2. надежный плагин для конструктора форм

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

WPForms, регистрация пользователей, плагин, плагин входа пользователя

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

optinmonster-всплывающие окна

Чтобы узнать больше об OptinMonster, прочитайте наш подробный обзор OptinMonster.

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

надстройку WordPress-плагинов

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

Все готово? Отлично.

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

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

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

Если у вас нет контактной формы, перейдите на панель инструментов и нажмите WPForms »Добавить новый.

wpforms-панель

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

WPForms Lite Шаблоны

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

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

Теперь нажмите встраивать вкладку рядом с кнопкой сохранения и скопировать шорткод.

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

Следующим шагом является создание всплывающего окна на вашем сайте. Мы создадим модальное всплывающее окно, используя OptinMonster. Перейдите на панель инструментов WordPress и нажмите OptinMonster »Создать новую кампанию.

Это откроет новый экран, где вы можете выбрать тип кампании, а затем шаблон вашего optin. Для типа кампании мы выберем опцию всплывающего окна..

Для шаблона, давайте перейдем к холст. Это пустой холст, который поддерживает все формы шорткодов. Таким образом, вы можете вставить любой шорткод HTML, CSS, JavaScript и даже WordPress здесь.

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

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

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

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

У вас есть вопросы?

Хотите узнать больше о наших услугах? Просто заполните форму, и мы свяжемся с вами как можно скорее..

Вот предварительный просмотр того, как вы можете это сделать.

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

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

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

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

Наконец, перейдите к Публиковать вкладка и переключить статус на жить.

optinmonster, входные ворота, входные ворота wp, создание списка

После этого вернитесь на панель управления WordPress и перейдите на OptinMonster »Кампании. Здесь вы увидите свою кампанию. Ниже этого нажмите на Изменить настройки вывода ссылка на сайт. Это расширится, чтобы показать несколько вариантов. Установите флажок рядом с Включить кампанию на сайте вариант.

Наконец нажмите на Сохранить настройки вариант в конце страницы.

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

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

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

Связаться с нами

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map