Вы ищете простой способ показать всплывающую контактную форму на вашем сайте WordPress?
Контактные формы отлично подходят для общения с вашими посетителями. Размещая их во всплывающем окне, вашим клиентам будет еще проще связаться с вами по поводу ваших продуктов и услуг.
В этой статье мы покажем вам, как добавить всплывающую контактную форму в WordPress.
Зачем использовать всплывающую контактную форму?
Каждый сайт или блог WordPress нуждается в контактной форме, чтобы пользователи могли связаться с вами со своими вопросами, отзывами или проблемами.
Однако если ваша контактная форма находится только на одной странице, то людям трудно ее найти, и они могут не захотеть покидать страницу, на которой находятся.
В результате пользователи могут покинуть ваш сайт, а вы потеряете потенциальных клиентов и конверсии.
Всплывающая контактная форма помогает решить эту проблему, позволяя вашим посетителям быстро просмотреть форму, нажав на кнопку, чтобы они могли связаться с вами с любой страницы, на которой они находятся.
Это помогает держать людей на вашем сайте, так как они не должны покинуть страницу они просматривают. Вы также можете увеличить свой список адресов электронной почты с помощью всплывающего окна контактной формы.
Учитывая это, вам сначала нужно будет создать контактную форму, а затем поместить ее во всплывающее окно для отображения на ваших веб-страницах. Не волнуйтесь, мы поможем вам создать контактную форму и добавить ее во всплывающее окно в WordPress.
- Как создать контактную форму WordPress
- Как добавить всплывающую контактную форму на ваш сайт
Видеоинструкция
Подписаться на WPBeginner
Если вы предпочитаете письменные инструкции, просто продолжайте читать.
Как создать контактную форму WordPress
Сначала вам нужно выбрать плагин контактной формы WordPress.
Существует множество бесплатных и платных вариантов, из которых вы можете выбрать, но мы рекомендуем использовать WPForms, так как это лучший вариант.
WPForms — это плагин для новичков, предлагающий конструктор форм, который позволяет создать контактную форму в WordPress всего за несколько кликов. Он также предлагает готовые шаблоны форм и множество вариантов настройки.
В этом руководстве мы будем использовать версию WPForms Lite, поскольку она бесплатна и предлагает шаблон контактной формы.
Однако вы также можете использовать его премиум-версию, чтобы разблокировать больше возможностей. Например, WPForms Pro предлагает множество шаблонов форм, больше возможностей настройки, мощные аддоны и позволяет собирать онлайн-платежи.
Для начала вам нужно установить и активировать плагин WPForms Lite. Если вам нужна помощь, то посмотрите наше пошаговое руководство о том, как установить плагин WordPress.
Когда плагин активирован, вы готовы к созданию контактной формы. Все, что вам нужно сделать, это перейти к WPForms » Добавить новую из вашей приборной панели WordPress.
После этого WPForms попросит вас ввести название вашей формы и выбрать шаблон. Перейдите и выберите шаблон ‘Simple Contact Form’.
Далее вы можете добавить поля в форму, используя конструктор перетаскивания.
Просто перетащите поля, которые вы хотите добавить в форму, из вариантов, представленных в меню слева от вас. Вы также можете изменить порядок расположения каждого поля в форме.
WPForms также позволяет настраивать каждое поле контактной формы.
Например, если вы нажмете на поле «Имя», то получите различные опции, такие как изменение надписи и формата. Вы даже можете добавить описание или пометить любое поле как обязательное.
Как только вы закончите, перейдите к опции «Настройки», чтобы настроить уведомление и подтверждение формы.
В общих настройках вы можете переименовать форму, изменить текст кнопки отправки, включить защиту от спама и многое другое.
Далее, вы можете перейти к опции настроек уведомлений. По умолчанию уведомления отправляются на электронную почту администратора, установленную на вашем сайте WordPress.
Тем не менее, вы можете выбрать отправку уведомления о контактной форме на любой адрес электронной почты, который вы хотите. Если вы хотите получать уведомления на несколько электронных писем, то отделите каждое письмо запятой.
Для темы письма WPForms использует имя формы, которое вы ввели ранее. Однако вы можете изменить текст темы письма по своему усмотрению.
После этого перейдите и нажмите на опцию Подтверждения.
WPForms будет использовать ‘Message’ в качестве типа подтверждения по умолчанию, где ваши посетители увидят сообщение с благодарностью после отправки формы.
Однако вы можете изменить тип сообщения и перенаправить пользователей на определенную страницу вашего сайта, когда они заполняют форму.
Как только вы закончите создание контактной формы, не забудьте нажать кнопку «Сохранить» в правом верхнем углу, чтобы сохранить изменения.
Затем нажмите на опцию ‘Embed’ в верхнем углу рядом с кнопкой Сохранить. Когда появится новое окно, выберите опцию «использовать шорткод».
Как только вы нажмете на ссылку, WPForms отобразит шорткод для вашей контактной формы. Мы рекомендуем вам держать эту вкладку/окно открытым, так как она понадобится вам на следующем шаге, где мы покажем вам, как добавить контактную форму во всплывающее окно.
Добавьте всплывающую контактную форму на ваш сайт WordPress
Чтобы создать всплывающее окно с контактной формой, вам понадобится плагин для всплывающих окон WordPress.
Мы рекомендуем использовать OptinMonster, так как это лучший плагин для генерации лидов и оптимизации конверсии для WordPress. Прием 1.2 миллиона сайтов используют этот мощный инструмент.
Для этого руководства мы будем использовать версию OptinMonster Pro, так как она включает в себя шаблон без беспорядка и расширенные правила отображения всплывающего окна.
Сначала вам нужно зарегистрироваться на сайте OptinMonster.
Затем установите и активируйте бесплатный плагин OptinMonster на вашем сайте. Для получения более подробной информации, следуйте нашему руководству о том, как установить плагин WordPress.
После того как плагин станет активным, вам нужно будет связать его с вашим сайтом WordPress.
Для этого просто перейдите по ссылке OptinMonster » Настройки откройте панель WordPress и нажмите кнопку «Подключить существующий аккаунт».
Теперь появится всплывающее окно, и OptinMonster попросит подключиться к вашей учетной записи. Просто нажмите кнопку «Подключиться к WordPress».
Теперь, когда ваш аккаунт подключен, необходимо создать новую кампанию для всплывающей контактной формы.
Вы можете начать, перейдя по адресу OptinMonster » Кампании затем нажмите кнопку «Создать свою первую кампанию».
На следующем экране вам нужно будет выбрать тип кампании. Поскольку мы будем создавать всплывающее окно с контактной формой, выберите ‘Popup’ в качестве типа кампании.
После этого прокрутите страницу вниз, чтобы выбрать шаблон для вашего всплывающего окна. OptinMonster предлагает более 75 привлекательных и высококонверсионных дизайнов для ваших всплывающих окон.
Мы рекомендуем вам выбрать шаблон Canvas. Это пустой шаблон, который отлично подходит для отображения вашей контактной формы, так как пользователи могут сосредоточиться на заполнении формы без каких-либо отвлекающих факторов.
Далее введите имя для вашей кампании и нажмите кнопку ‘Start Building’.
Теперь, используя конструктор перетаскивания в OptinMonster, вы можете редактировать свой шаблон всплывающего окна. Чтобы начать, нажмите кнопку ‘+ Add Blocks’ вверху.
Теперь вы увидите, как в меню слева появляются различные блоки. Просто перейдите к HTML-блоку и перетащите его на свой шаблон.
После этого вам нужно будет ввести шорткод контактной формы WPForms в ваш HTML-блок.
Чтобы найти код, вернитесь к настройкам встраивания WPForms и скопируйте шорткод.
Теперь введите скопированный шорткод в блок HTML в OptinMonster, где написано «Добавить HTML сюда».’
Важно отметить, что при добавлении шорткода вы не увидите предварительного просмотра контактной формы в шаблоне.
Это нормально, и ваша контактная форма появится, когда кампания будет опубликована.
Далее вы можете перейти на вкладку Правила отображения в верхней части, чтобы выбрать, когда всплывающее окно должно появляться на вашем сайте.
По умолчанию OptinMonster установит его на время нахождения на странице 5 секунд, и всплывающее окно будет появляться на любой странице.
Однако вы можете изменить настройки правил отображения и выбрать различные триггеры и варианты таргетинга.
Мы предлагаем использовать таргетинг MonsterLink (On Click). Таким образом, ваше всплывающее окно будет появляться, когда посетитель нажмет на ссылку или кнопку.
После этого вы можете нажать кнопку «Скопировать код монстр-ссылки» и добавить его в любой текст, изображение или кнопку на вашем сайте. Для получения более подробной информации вы можете прочесть наше руководство для начинающих о том, как добавить ссылку в WordPress.
Ваш код MonsterLink будет выглядеть следующим образом в HTML:
Однако, чтобы вставить ссылку в пост или страницу вашего блога WordPress, вам нужен только URL из кода.
https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/
Например, допустим, вы хотите добавить на свой сайт кнопку «Связаться с нами». Вы можете начать с редактирования любой страницы или поста и перейти в редактор WordPress. Далее, нажмите на знак (+) плюс вверху и добавьте блок «Кнопки».
После этого введите текст для вашей кнопки, а затем нажмите на значок ссылки. Теперь добавьте URL MonsterLink к вашей кнопке.
После этого опубликуйте свой пост или страницу WordPress. MonsterLink теперь будет добавлен к вашей кнопке «Связаться с нами.
Затем вернитесь в свою кампанию OptinMonster, чтобы завершить настройку.
После выбора MonsterLink в качестве таргетинга и показа его на любой странице, вы можете нажать кнопку ‘Next’ внизу.
На следующем экране вы увидите опции для изменения типа представления кампании, добавления анимации MonsterEffect и воспроизведения звука при появлении всплывающего окна. Нажмите кнопку «Далее», когда будете удовлетворены настройками.
После этого OptinMonster покажет сводку настроек вашего правила отображения. Это поможет вам убедиться, что вы правильно настроили, когда ваши кампании будут появляться на вашем сайте.
Теперь вы готовы к запуску кампании и публикации всплывающей контактной формы. Для этого перейдите на вкладку ‘Publish’ в верхней части страницы.
Далее вы можете нажать кнопку «Предварительный просмотр» перед публикацией вашей кампании. Это покажет вам живой предварительный просмотр того, как ваше всплывающее окно будет выглядеть на вашем сайте.
Когда вы будете довольны внешним видом вашей кампании, измените «Статус публикации» с «Черновик» на «Опубликовать».
Вы можете выйти из конструктора кампаний OptinMonster и проверить статус вашей кампании из вашей приборной панели WordPress.
Просто перейдите к OptinMonster » Кампании и в колонке «Статус» вашей кампании всплывающего окна контактной формы должно появиться «Опубликовано».
Далее перейдите на кнопку «Связаться с нами», которую вы создали ранее с помощью MonsterLink, и посмотрите на всплывающую контактную форму в действии.
Надеемся, что эта статья помогла вам узнать, как добавить всплывающее окно контактной формы в WordPress. Вы также можете ознакомиться с нашим руководством по выбору лучшего конструктора сайтов или сравнением лучших программ для расчета заработной платы для малого бизнеса.
Источник: www.wpbeginner.com