Хотите ли вы отобразить вашу форму в одну строку?
Однострочные формы дают вам больше гибкости при размещении форм. Это означает, что вы можете легко добавить формы в высоко посещаемые области вашего сайта и улучшить конверсию.
В этой статье мы покажем вам, как легко отобразить вашу форму в одну строку в WordPress.
Зачем отображать форму в одну строку в WordPress?
Однострочные формы дают вам больше гибкости при выборе места для размещения ваших форм. Поскольку формы этого стиля состоят всего из одной строки, они не занимают много места и могут быть легко интегрированы с существующим контентом.
Формы подписки на рассылку новостей по электронной почте часто отображаются в одну строку над или под содержанием записей блога. Однострочные формы также хорошо работают на целевых страницах, страницах контактов и других важных страницах вашего сайта.
Помимо увеличения числа подписчиков и лидов, вы можете превратить любую форму в однострочную. Например, может иметь смысл отобразить контактную форму в одну строку, чтобы сэкономить место на странице.
Учитывая это, давайте покажем вам, как отобразить однострочную форму на вашем сайте WordPress.
Создание однострочной формы в WordPress
В этом руководстве мы будем использовать плагин WPForms для создания однострочной формы. Это лучший плагин для генерации лидов для WordPress, который используют более 5 миллионов сайтов.
Вы можете использовать конструктор перетаскивания, чтобы быстро создать любую форму для вашего сайта. Кроме того, он интегрируется с популярными инструментами маркетинга электронной почты, поэтому вы можете легко увеличить свой список рассылки.
Существует премиум-версия плагина с гораздо большим количеством функций, но мы будем использовать легкую версию для этого руководства, поскольку она позволяет создать простую форму и подключить ее к Constant Contact для генерации лидов.
Первое, что вам нужно сделать, это установить и активировать плагин. Для получения более подробной информации смотрите наше руководство для начинающих о том, как установить плагин WordPress.
После этого перейдите в WPForms » Добавить новую в админ-панель WordPress и дайте вашей форме имя. Затем вам нужно выбрать шаблон формы.
Мы выберем шаблон ‘Opt-In Form’. Просто наведите курсор на шаблон и нажмите кнопку «Использовать шаблон».
Откроется конструктор форм с перетаскиванием.
Вы увидите, что выбранный нами шаблон автоматически включает поля имени, электронной почты и кнопку отправки.
Каждое поле можно редактировать, нажимая на него и внося изменения в левой колонке.
Вы также можете перетаскивать поля, чтобы изменить их порядок.
После того как вы настроите поля, вы можете отобразить форму в одну строку.
Чтобы сделать это, перейдите в раздел Настройки » Общие а затем нажмите на выпадающую вкладку «Дополнительно».
Затем введите ‘inline-fields’ в поле ‘Form CSS Class’ (без кавычек).
Это позволит применить данный CSS-класс к форме. Поскольку WPForms включает в себя стилизацию для класса ‘inline-fields’, он автоматически сделает так, что вся ваша форма будет красиво отображаться в одну строку.
После этого вы можете сделать форму еще меньше, скрыв метки полей.
Просто нажмите на навигационную опцию «Поля», затем выберите опцию меню «Дополнительно» и нажмите на тумблер «Скрыть ярлык», чтобы включить его.
Затем вам нужно сделать то же самое для всех меток полей формы.
После этого, в том же разделе ‘Advanced’, вы можете ввести текст в поле ‘Placeholder’.
Это подскажет вашим пользователям, для чего нужно каждое поле формы.
Как только вы закончите настройку формы, не забудьте нажать кнопку ‘Save’, чтобы сохранить изменения.
Если вы используете форму для генерации лидов, то вы можете подключить ее к провайдеру email-маркетинга. Для более подробной информации смотрите наше руководство о том, как правильно создать рассылку по электронной почте.
Добавление однострочной формы на сайт WordPress
Теперь пришло время добавить однострочную форму на ваш сайт. Вы можете добавить ее на любую страницу, пост или в область виджетов.
Мы собираемся добавить ее на существующую страницу, но процесс будет аналогичным, если вы добавляете ее в другую область вашего блога WordPress.
Просто откройте страницу, на которой вы хотите отобразить однострочную форму, нажмите на значок добавления блока ‘Plus’ и найдите ‘WPForms’.
Затем нажмите на блок ‘WPForms’, чтобы добавить его на свой сайт.
Здесь появляется выпадающее окно для выбора однострочной формы, которую вы создали ранее.
Как только вы выберете форму, плагин загрузит предварительный просмотр вашей формы в редакторе контента. Затем нажмите кнопку «Обновить» или «Опубликовать», чтобы ваша новая форма стала активной.
Теперь вы можете посетить свой сайт, чтобы увидеть новую форму в действии.
Мы надеемся, что эта статья помогла вам узнать, как отобразить форму в одну строку в WordPress. Вы также можете посмотреть наше руководство о том, как получить бесплатный домен электронной почты, и подборку лучших приложений для создания виртуального номера телефона для бизнеса с бесплатными опциями.
Источник: www.wpbeginner.com