Як створити спливаючу форму контактів у WordPress – крок за кроком

Як створити спливаючу форму контактів у wordpress


Ви хочете спливати свою контактну форму, коли користувач натискає кнопку контакту або посилання?

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

Створення легкого спливаючого вікна форми в WordPress

За допомогою WordPress створити спливаючу форму контактної форми легко. Для початку вам потрібно мати дві речі:

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

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

WPForms, реєстрація користувачів, плагін, плагін для входу користувачів

Що стосується спливаючих плагінів, ми думаємо, що немає іншого варіанту, який кращий за OptionMonster. Це один з найпопулярніших та найпотужніших плагінів для покоління свинцю, який дозволяє привернути увагу відвідувача та спонукати їх до дій на вашому сайті із застосуванням приголомшливих оптинів. За допомогою цього плагіна ви можете збільшити залучення користувачів та збільшити кількість конверсій та продажів.

optinmonster-спливаючі вікна

Щоб дізнатися більше про OptinMonster, прочитайте наш детальний огляд OptinMonster.

Крок 1. Встановіть плагіни WPForms та OptinMonster

add-wordpress-плагіни

Почніть із завантаження WPForms підключати. Потім встановіть і активуйте його. Не знаєте, як? Нема проблем. Ви можете перейти до нашого посібника про те, як встановити плагін WordPress, щоб вирішити все. Ми зачекаємо.

Все готово? Ідеально.

Виконайте той самий процес, щоб активувати плагін OptinMonster. Але недостатньо встановити лише плагін. Вам доведеться створити аккаунт з додатком OptinMonster. Плагін діє лише як середовище для підключення вашого WordPress сайту до програми OptinMonster. Тому для правильної роботи вам доведеться встановити плагін і створити обліковий запис разом із додатком.

Крок 2: Створіть контактну форму за допомогою WPForms для спливаючого вікна

Спочатку ми використаємо плагін WPForms, щоб створити контактну форму. Але якщо ви використовували WPForms і вже створили контактну форму з нею, ви можете пропустити цей крок.

Якщо у вас немає форми для контактів, перейдіть на свою інформаційну панель і натисніть на WPForms »Додати нове.

wpforms-приладова панель

Це перенесе вас на іншу сторінку, де ви можете вибрати шаблон форми та додати ім’я до форми. Виберіть Проста контактна форма шаблон і дайте ім’я для вашої форми.

Шаблони WPForms Lite

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

Ви можете додати всі поля, які, на вашу думку, потрібні для вашої форми. Після того, як все зроблено, натисніть кнопку збереження, щоб зберегти зміни. Ваша контактна форма вже готова до запуску.

Тепер натисніть на Вставити біля кнопки збереження та скопіюйте короткий код.

Крок 3: Створення спливаючого вікна WordPress за допомогою OptinMonster

Наступним кроком є ​​створення спливаючого вікна на вашому веб-сайті. Ми створимо модальне спливаюче вікно за допомогою OptinMonster. Тож перейдіть до інформаційної панелі WordPress і натисніть на OptinMonster »Створіть нову кампанію.

Це відкриє новий екран, де ви можете вибрати тип кампанії, а потім шаблон шаблону. Для типу кампанії виберемо спливаючий параметр.

Щодо шаблону, давайте продовжимо Полотно. Це порожнє полотно, яке підтримує всі форми шорткодів. Таким чином, ви можете вставити будь-які 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