Хотите ли вы добавить выдвижную контактную форму в WordPress? Если ваш бизнес зависит от получения новых лидов из контактной формы вашего сайта, то один из лучших способов увеличить источник лидов — сделать вашу контактную форму более заметной. В этой статье мы покажем вам, как добавить выдвижную контактную форму в WordPress, не раздражая ваших пользователей.
Зачем добавлять выдвижную контактную форму в WordPress?
Многие владельцы малого бизнеса создают свой сайт в надежде, что он поможет им развивать свой бизнес.
Именно поэтому вы добавляете страницу с контактной формой, чтобы пользователи могли связаться с вами.
Однако проблема в том, что большинство пользователей, у которых могут возникнуть вопросы, покинут ваш сайт, не связавшись с вами.
Именно поэтому вы можете заметить, что многие популярные сайты добавляют всплывающие контактные формы, выдвижные контактные формы или кнопки призыва к действию, которые открывают контактные формы.
Эти анимированные и интерактивные опции отвлекают внимание пользователя на контактную форму и позволяют ему быстро заполнить форму, не посещая другую страницу. Эти формы значительно повышают конверсию, поэтому вы видите их повсюду.
Давайте рассмотрим, как создать выдвижную контактную форму в WordPress.
Добавление выдвижной контактной формы в WordPress
Для этого урока вам понадобится WPForms. Это лучший плагин контактных форм WordPress на рынке.
Вы можете использовать бесплатную версию плагина контактных форм WPForms, если вам не нужны все премиум-функции.
Вам также понадобится OptinMonster. Это самое мощное программное обеспечение для оптимизации конверсии. Это поможет вам превратить бросивших сайт посетителей в покупателей. Вам понадобится тарифный план pro, который даст вам доступ к функции canvas, которую мы будем использовать в этом руководстве.
Шаг 1. Создание контактной формы в WordPress
Сначала вам нужно установить и активировать плагин WPForms. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
После активации, вам необходимо посетить WPForms » Add New страница для создания контактной формы. После этого запустится интерфейс конструктора WPForms.
Введите название для вашей контактной формы, а затем выберите шаблон ‘Select contact form’.
WPForms загрузит простую контактную форму. Вы увидите предварительный просмотр формы в правой панели. Вы можете нажать на любое поле, чтобы отредактировать его или добавить новые поля из левой колонки.
Как только вы закончите редактирование формы, нажмите на кнопку сохранения, чтобы сохранить изменения.
Далее вам нужно нажать на кнопку вставки сверху, чтобы получить код вставки вашей формы.
Появится всплывающее окно, показывающее шорткод вашей формы. Скопируйте этот шорткод, потому что он понадобится вам на следующем шаге.
Шаг 2. Создание слайд-аута Optin в OptinMonster
Теперь мы создадим выдвижную кампанию, которая будет отображать контактную форму, созданную вами в первом шаге.
Сначала вам нужно установить и активировать плагин OptinMonster. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Этот плагин действует как соединитель между вашим сайтом и аккаунтом OptinMonster.
После активации нажмите на меню OptinMonster в панели администратора WordPress и введите свой API ключ. Вы можете получить эту информацию из вашей учетной записи на сайте OptinMonster.
После ввода лицензионного ключа нажмите на кнопку «Создать новый optin» в правом верхнем углу экрана.
Вы перейдете на сайт OptinMonster.
OptinMonster предлагает различные типы динамических кампаний. Для этого урока мы будем использовать кампанию ‘Slide in’. Выберите тип кампании ‘Slide in’.
Далее необходимо выбрать шаблон. OptinMonster предлагает несколько готовых шаблонов, но нам нужно выбрать ‘Canvas’ для этого урока.
Как только вы выберете шаблон, вам будет предложено указать имя для вашей кампании. Это поможет вам легко найти кампанию на приборной панели OptinMonster.
Теперь OptinMonster загрузит интерфейс конструктора кампаний.
Справа вы увидите живой предварительный просмотр вашей кампании. Поскольку мы используем шаблон холста, он будет абсолютно пустым.
Слева вы увидите различные вкладки. В разделе ‘Общие настройки оптина’ вам нужно ввести URL вашего сайта под опцией ‘Сайт кампании оптина’.
Далее, вам нужно переключиться на вкладку ‘Optin’. Здесь вы можете выбрать цвета, высоту и ширину для вашей формы.
Выберите цвета, которые вам нравятся, настройте ширину и высоту, чтобы форма была видна полностью.
После этого, вам нужно прокрутить вниз до раздела ‘Canvas custom HTML’ и ввести шорткод WPForms, который вы скопировали ранее.
Ввод шорткода не покажет вашу форму внутри слайд-кампании сразу же. Это потому, что шорткод работает только на вашем собственном сайте WordPress.
Теперь вы можете нажать на кнопку «Сохранить» в верхней части, чтобы сохранить настройки, а затем нажать на кнопку «Опубликовать».
На следующем экране вам нужно изменить статус оптина на опубликованный. Это сделает оптин доступным для вашего сайта WordPress.
Шаг 3. Показ выдвижной контактной формы в WordPress
Теперь, когда вы создали контактную форму и кампанию, вы готовы отобразить их на своем сайте.
Перейдите на сайт OptinMonster страница в вашей админзоне WordPress. Вы увидите там недавно созданную вами кампанию с выдвижной контактной формой.
Вам нужно нажать на ссылку ‘Редактировать параметры вывода’, чтобы решить, как вы хотите, чтобы форма отображалась на вашем сайте.
На следующем экране убедитесь, что вы установили флажок напротив «Включить оптин на сайте?’ опция. OptinMonster позволяет вам выбрать, кто может видеть optin. Вы также можете выбрать конкретную область вашего сайта для отображения оптина.
Не забудьте нажать на кнопку сохранения настроек, чтобы сохранить изменения.
Теперь вы можете посетить свой сайт, чтобы увидеть выдвижную контактную форму в действии. Убедитесь, что вы используете режим icognito в вашем браузере или вышли из WordPress, чтобы вы могли видеть именно то, что увидят ваши пользователи.
По умолчанию, выезжающая кампания появляется через 5 секунд после полной загрузки страницы. Однако OptinMonster позволяет вам изменить и это.
Вы можете создавать бесчисленные правила для показа кампании при выполнении определенных условий.
Например, вы можете показать выезжающую форму, когда пользователь прокрутил 50% страницы, когда пользователь собирается покинуть страницу, и многое другое.
Надеемся, эта статья помогла вам узнать, как добавить выдвижную контактную форму в WordPress. Вы также можете ознакомиться с нашим списком практических советов по привлечению трафика на ваш сайт WordPress.
Источник: www.wpbeginner.com