Все для начинающих интернет-предпринимателей

Как заменить радио-кнопки изображениями в контактных формах WordPress

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

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

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

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

plagin-wpforms-1

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

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

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

Для этого урока мы будем использовать плагин WPForms. Итак, начала вам нужно скачать, установить и активировать плагин WPForms. WPForms — это премиальный плагин для WordPress. Скачать вы его можете, перейдя по данной ссылке.

После того, как вы активировали плагин, перейдите на страницу WPForms «Новая форма» на панели инструментов WordPress.

plagin-wpforms-2

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

plagin-wpforms-3

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

plagin-wpforms-4

 

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

plagin-wpforms-5

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

plagin-wpforms-6

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

plagin-wpforms-7

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

plagin-wpforms-8

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

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

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

plagin-wpforms-9

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

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

plagin-wpforms-10

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

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

plagin-wpforms-11

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

plagin-wpforms-12

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

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

plagin-wpforms-13

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

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

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

plagin-wpforms-14

plagin-wpforms-15

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

plagin-wpforms-16

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

С уважением Вячеслав и Валерия!

Понравился материал? Поделитесь с друзьями!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *