Недавно один читатель спросил нас, как добавить варианты изображений в формы WordPress. Возможно, вы тоже задавались этим вопросом.
Вместо того чтобы просто отображать текстовые варианты, изображения могут мгновенно сделать ваши формы более привлекательными. Это может помочь улучшить количество откликов и конверсию форм.
В этой статье мы покажем вам, как добавить варианты изображений в формы WordPress для повышения вовлеченности и конверсии.
Что такое варианты изображений и зачем их использовать в формах?
Варианты изображений — это фотографии, иллюстрации, графики или иконки, которые пользователи могут выбрать при заполнении формы.
Вот форма, использующая варианты с изображениями, а не обычные текстовые варианты. Первый вариант, Клубника, был выбран:
Выбор изображения может быть преимуществом во многих отношениях. Во всех случаях они позволяют сделать вашу форму более привлекательной и визуально интересной.
Использование изображений также может помочь придать вашим формам более отточенный и профессиональный вид. Они также могут помочь пользователям быстрее принять решение.
Например, если вы управляете рестораном, который предлагает доставку, вы захотите иметь форму заказа на вашем сайте. Вы можете использовать изображения различных блюд, чтобы помочь потенциальным клиентам выбрать то, что они хотят.
Выбор изображений может облегчить читателям заполнение формы, особенно для аудитории с трудностями чтения или для тех, кто не владеет вашим языком.
Если вы предпочитаете письменные инструкции, просто продолжайте читать.
Добавление вариантов изображений в ваши формы WordPress
В этом руководстве мы будем использовать плагин WPForms. Это лучший плагин для построения форм WordPress на рынке, который позволяет легко создавать формы с помощью простого конструктора перетаскивания форм.
Сначала вам нужно установить и активировать плагин WPForms. Если вы не уверены, как это сделать, вы можете получить пошаговые инструкции в нашем руководстве по установке плагина WordPress.
WPForms — это премиум-плагин WordPress. Они также предлагают бесплатную версию под названием WPForms Lite, в которой также есть функция выбора изображений.
Создание формы с помощью WPForms
После активации плагина перейдите в раздел WPForms » Добавить форму страница в приборной панели WordPress для создания новой формы.
Сначала укажите название вашей формы, а затем нажмите, чтобы выбрать шаблон. Мы будем использовать простую контактную форму в качестве отправной точки.
Запустится интерфейс конструктора WPForms с предварительно загруженными полями формы. Вы можете редактировать любое поле формы, нажимая на него, перемещать его вверх и вниз или удалять.
Далее мы добавим поле множественного выбора, чтобы покупатели могли выбрать тип фруктов, которые они хотят получить.
Примечание: Варианты изображений также работают с полем «Флажки». Используйте это, если вы хотите, чтобы пользователь мог выбрать более одного варианта.
Чтобы добавить поле, просто перетащите поле Multiple Choice из раздела Standard Fields в левой части экрана. Мы разместим его прямо над полем ‘Комментарий или сообщение’.
Как вы можете видеть, поле множественного выбора по умолчанию имеет текстовые опции. Если вы нажмете на поле, чтобы отредактировать его, вы увидите опции поля в левой части экрана.
Здесь вам просто нужно установить флажок «Использовать варианты изображений», и WPForms автоматически обновит поле.
Вы можете ввести любой текст для текстовой метки поля, а затем нажать кнопку «Загрузить изображение». Вы можете загрузить изображение с вашего компьютера или выбрать его из медиатеки WordPress.
Мы рекомендуем использовать .jpg или .png изображения размером не более 250px на 250px. Ваши изображения будут лучше всего смотреться в форме, если они все одинакового размера.
Важно: WPForms не изменяет размер ваших изображений. Перед загрузкой изображений вам нужно убедиться, что они имеют нужный вам размер. Кроме того, вы можете отредактировать изображения в самом WordPress перед добавлением их в форму.
Если у вас есть более 3 вариантов для включения, просто нажмите кнопку (+), чтобы добавить новый вариант. Вы можете использовать кнопку (-), чтобы удалить выбор.
Изменение отображения выбранных изображений в форме
WPForms позволяет легко изменить макет выбора изображения и другие настройки на вкладке «Дополнительные параметры».
Вы можете установить флажок ‘Randomize Choices’, если хотите отображать варианты изображений в случайном порядке, а не в определенном. Это полезно, если вы создаете опрос и хотите устранить предвзятость результатов при выборе первого варианта.
В разделе ‘Стиль выбора изображений’ вы можете выбрать, как оформить ваши изображения. По умолчанию используется стиль Modern, который выглядит следующим образом при выбранной опции Strawberries:
Вместо этого вы можете выбрать классический стиль, который выглядит следующим образом при выборе варианта «Клубника»:
В качестве альтернативы вы можете выбрать стиль «Нет». В этом случае ваши изображения будут просто обычными изображениями без рамок и других стилей. Ярлыки будут отображаться с помощью радиокнопок.
Если вы хотите, вы также можете изменить расположение вариантов выбора, используя выпадающий список ‘Choice Layout’. По умолчанию используется ‘Inline’, при этом ваши варианты отображаются рядом друг с другом, пока они не перейдут на новую строку.
Вместо этого вы можете выбрать отображение вариантов в нескольких столбцах. Если вам нужен вертикальный список, просто выберите ‘One Column’ из выпадающего списка. После этого ваши варианты изображений будут выглядеть следующим образом:
Здесь также есть возможность «Скрыть ярлык» для выбранных вами изображений. Это означает, что под изображениями не будет никакого текста. В некоторых случаях имеет смысл поступить следующим образом. Например, вы можете попросить людей проголосовать за то, какой новый дизайн логотипа им нравится больше всего.
Убедитесь, что вы ввели релевантную и полезную метку, где это возможно. Он будет отображаться в качестве alt-текста для ваших изображений, что сделает ваш сайт более доступным для пользователей с ослабленным зрением.
Добавление, удаление или редактирование полей в вашей форме
Вы можете добавлять, удалять или редактировать поля в вашей форме. Чтобы отредактировать поле, просто нажмите на него.
Например, вы можете изменить поле ‘Комментарий или сообщение’, сделав его необязательным для заполнения и добавив другую метку. После того, как вы щелкните на поле, вы можете отредактировать его в левой части экрана.
Просто введите нужный вам ярлык и снимите галочку с поля ‘Required’, чтобы сделать поле необязательным.
Чтобы удалить поле, наведите на него курсор и нажмите на красный значок корзины.
Когда вы будете довольны своей формой, нажмите кнопку «Сохранить» в верхней части экрана.
Добавление формы на ваш сайт
Вы можете добавить свою форму в любой пост или страницу на вашем сайте всего парой кликов. Мы создадим новую страницу для нашего сайта.
Перейти к Страницы » Добавить новую, затем нажмите кнопку (+), чтобы добавить блок на вашу страницу.
Найдите блок WPForms в разделе Виджеты или найдите его с помощью строки поиска. Затем просто нажмите на блок, чтобы добавить его на страницу.
Далее нажмите на выпадающий список «Выбрать форму» и щелкните по названию вашей формы, чтобы выбрать ее. Мы используем нашу форму заказа фруктового ящика здесь.
Теперь вы готовы опубликовать вашу страницу и увидеть вашу форму вживую на вашем сайте. Вот как выглядит наш блок:
Если вы хотите внести изменения в свою форму, вы можете найти ее в разделе WPForms » Все формы в вашей приборной панели. После сохранения изменений ваша форма автоматически обновится и на вашей странице.
Мы надеемся, что это руководство помогло вам узнать, как добавить выбор изображений в формы WordPress. Вам также может понравиться наше руководство о том, как создать опрос в WordPress, и наше сравнение лучших плагинов для построения страниц WordPress.
Источник: www.wpbeginner.com