Как добавить выбор изображений в формы WordPress (повысить вовлеченность)

/

Недавно один из читателей спросил нас, как добавить выбор изображений в их формы WordPress. Может быть, вы тоже об этом задумывались.

Вместо простого отображения текста, изображения могут мгновенно сделать ваши формы более привлекательными. Это может помочь повысить скорость вашего ответа и сформировать конверсию.

В этой статье мы покажем вам, как добавить выбор изображений в формы WordPress, чтобы повысить вовлеченность и конверсию.

Как легко добавить выбор изображений в форму WordPress

Что такое варианты изображений и зачем их использовать в своих формах?

Варианты изображений - это фотографии, иллюстрации, графика или значки, которые пользователи могут выбирать при заполнении формы.

Вот форма, в которой используются варианты изображений, а не обычные параметры текста. Был выбран первый выбор - Клубника:

Выбор изображения может быть преимуществом во многих отношениях. Во всех случаях они позволяют сделать вашу форму более привлекательной и привлекательной.

Использование изображений также может помочь сделать ваши формы более изысканными и профессиональными. Они также могут помочь пользователям быстрее принимать решения.

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

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

Добавление вариантов изображения в ваши формы WordPress

В этом руководстве мы будем использовать плагин WPForms. Это лучший плагин для создания форм WordPress на рынке, который позволяет легко создавать формы с помощью простого конструктора форм перетаскивания.

Сначала вам нужно установить и активировать плагин WPForms. Если вы не знаете, как это сделать, вы можете получить пошаговые инструкции в нашем руководстве по установке плагина WordPress.

WPForms - это плагин премиум-класса для WordPress. Они также предлагают бесплатную версию WPForms Lite, в которой также есть функция выбора изображений.

Создание формы с помощью WPForms

После активации плагина перейдите на страницу WPForms »Добавить форму на панели инструментов WordPress, чтобы создать новую форму.

Создание новой формы с использованием WPForms

Сначала укажите имя для вашей формы, а затем щелкните, чтобы выбрать шаблон. Мы будем использовать простую контактную форму в качестве отправной точки.

Используйте шаблон простой контактной формы

Это запустит интерфейс компоновщика WPForms с предварительно загруженными полями формы. Вы можете редактировать любое поле формы, нажимая на него, перемещая его вверх и вниз или удаляя.

Затем мы собираемся добавить поле с множественным выбором, чтобы покупатели могли выбирать тот фрукт, который им нужен.

Примечание. Выбор изображения также работает с полем «Флажки». Используйте это, если хотите, чтобы ваш пользователь мог выбрать более одного варианта.

Чтобы добавить поле, просто перетащите поле «Множественный выбор» из раздела «Стандартные поля» в левой части экрана. Мы собираемся разместить его прямо над полем «Комментарий или сообщение».

Как видите, в поле множественного выбора по умолчанию есть текстовые параметры. Если вы нажмете на поле, чтобы отредактировать его, вы увидите параметры поля в левой части экрана.

Здесь вам просто нужно установить флажок «Использовать выбор изображения», и WPForms автоматически обновит поле.

Вы можете ввести все, что хотите для текстовой метки поля, а затем нажать кнопку «Загрузить изображение». Вы можете загрузить изображение со своего компьютера или выбрать его из медиатеки WordPress.

Мы рекомендуем использовать изображения .jpg или .png, размер которых не превышает 250 на 250 пикселей. Ваши изображения будут лучше всего смотреться в вашей форме, если они будут одного размера.

Важно: WPForms не изменяет размер ваших изображений. Перед загрузкой убедитесь, что они нужного вам размера. Кроме того, вы можете отредактировать свое изображение в самом WordPress, прежде чем добавлять его в форму.

Если у вас есть более трех вариантов, просто нажмите кнопку (+), чтобы добавить новый вариант. Вы можете использовать кнопку (-), чтобы отменить выбор.

Изменение способа отображения выбранных изображений в вашей форме

WPForms позволяет легко изменить макет выбора изображения и другие параметры на вкладке «Дополнительные параметры».

Вы можете установить флажок «Случайный выбор», если хотите, чтобы выбранные вами изображения отображались случайным образом, а не в определенном порядке. Это полезно, если вы создаете опрос и хотите устранить предвзятость в результатах.

В разделе «Стиль выбора изображения» вы можете выбрать, как вы хотите стилизовать свои изображения. Стиль по умолчанию - Современный, который выглядит следующим образом с выбранной опцией Клубника:

Вместо этого вы можете выбрать классический стиль, который выглядит следующим образом, когда выбран вариант клубники:

Кроме того, вы можете выбрать для стиля «Нет». В этом случае ваши изображения будут просто обычными изображениями без рамки или другого стиля. Ярлыки будут показаны с переключателями.

При желании вы также можете изменить расположение вариантов с помощью раскрывающегося списка «Вариант макета». По умолчанию выбран вариант «Inline», при этом ваши варианты отображаются рядом друг с другом, пока они не перейдут на новую строку.

Вместо этого вы можете выбрать отображение своего выбора в нескольких столбцах. Если вам нужен вертикальный список, просто выберите «Один столбец» из раскрывающегося списка. Выбранные вами изображения будут выглядеть так:

Здесь также есть возможность «Скрыть ярлык» для выбранных изображений. Это означает, что под изображениями не будет текста. В некоторых случаях это может иметь смысл. Например, вы можете просить людей проголосовать за то, какой новый дизайн логотипа им больше всего нравится.

Однако, по возможности, убедитесь, что вы вводите релевантный и полезный ярлык. Он будет отображаться как замещающий текст для ваших изображений, что сделает ваш сайт более доступным для пользователей с нарушениями зрения.

Добавление, удаление или редактирование полей в вашей форме

Вы можете добавлять, удалять или редактировать поля в вашей форме. Чтобы отредактировать поле, просто щелкните по нему.

Например, вы можете захотеть сделать поле «Комментарий или Сообщение» необязательным и иметь другой ярлык. После того, как вы нажмете на поле, вы можете редактировать его в левой части экрана.

Просто введите ярлык, который хотите использовать, и снимите флажок «Обязательно», чтобы сделать поле необязательным.

Чтобы удалить поле, наведите на него курсор и щелкните красный значок корзины.

Когда вы будете довольны формой, нажмите кнопку «Сохранить» вверху экрана.

Добавление формы на ваш сайт

Вы можете добавить свою форму к любому сообщению или странице вашего сайта всего за пару кликов. Мы собираемся создать для себя новую страницу.

Перейдите в Pages »Add New, затем нажмите кнопку (+), чтобы добавить блок на вашу страницу.

Найдите блок WPForms в разделе «Виджеты» или найдите его с помощью панели поиска. Затем просто нажмите на блок, чтобы добавить его на свою страницу.

Добавление блока WPForms на вашу страницу или сообщение

Затем щелкните раскрывающееся меню «Выбрать форму» и щелкните имя своей формы, чтобы выбрать ее. Здесь мы используем нашу форму заказа коробки для фруктов.

Теперь вы готовы опубликовать свою страницу и увидеть свою форму на своем сайте. Вот как выглядит наш:

Если вы хотите внести изменения в свою форму, вы можете найти ее в разделе WPForms »Все формы на панели инструментов. После того как вы сохранили изменения, ваша форма автоматически обновится и на вашей странице.

Мы надеемся, что это руководство помогло вам узнать, как добавлять изображения в формы WordPress. Вам также может понравиться наше руководство о том, как создать опрос в WordPress, и наше сравнение лучших плагинов для создания страниц WordPress.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как создать веб-сайт для микро-вакансий, такой как Fiverr, с помощью WordPress

Недавно один из наших читателей спросил, можно ли создать сайт, похожий на Fiverr, с помощью WordPress? Создание нишевого веб-сайта для микро-вакансий

Как отслеживать и сокращать количество отказов от форм в WordPress

Вы хотите отслеживать и сокращать количество отказов от форм в WordPress? Заброшенные формы приводят к более низким конверсиям и меньшему доходу.

Как запретить клиентам отключать плагины WordPress

Хотите, чтобы клиенты случайно не отключили плагины WordPress на веб-сайте? Если вы создаете веб-сайты для клиентов, то, вероятно, у вас уже есть любимый

Как добавить случайные изображения заголовков в свой блог WordPress

Вы хотите добавить случайные изображения заголовков в свой блог WordPress? Большинство тем WordPress имеют встроенную поддержку для добавления изображений