Как добавить поля выбора с помощью Select2 в регистрационную форму WordPress?

Если вы хотите создать расширенные регистрационные формы, вы можете использовать поля Select2 WordPress вместо поля Select.

Интересно, как вы можете это сделать? Ну, вы в правильном месте!

В этой статье вы узнаете, что такое поле Select2 в WordPress, его значение и отличие от стандартного поля Select.

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

Что такое Select2? Чем он отличается от стандартного выбора?

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

Теперь вам должно быть интересно, чем поле Select2 отличается от стандартного поля Select. Давай выясним!

Выбрать против Выбрать2

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

Поле Select2 имеет все операции, которые предлагает стандартное поле Select. Таким образом, он также позволяет пользователям выбирать один из доступных вариантов.

Однако Select2 предлагает больше гибкости и настройки.

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

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

Select2 против Multi Select2

Технология Select2 поддерживает поля выбора как с одним значением, так и с несколькими значениями. Поле выбора с одним значением просто известно как поле Select2.

С другой стороны, поле выбора с несколькими значениями называется полем Multi Select2 или Pillbox.

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

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

Эта функция отсутствует в обычном поле Select2.

Зачем добавлять поле Select2 WordPress в регистрационную форму?

Знакомство с полями Select2 помогло вам лучше понять эту технологию.

Но какую ценность это добавляет к регистрационной форме? Почему бы просто не использовать стандартное поле Select для регистрации?

Что ж, давайте рассмотрим несколько причин, по которым вам стоит добавить поле Select2 WordPress в регистрационную форму:

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

Вот почему мы предлагаем вам добавить поле Select2 в регистрационные формы вместо стандартного поля Select.

И как лучше всего добавить поля Select2 в настраиваемую форму? Давайте рассмотрим это в следующем разделе.

Лучший способ добавить поля Select2 в регистрационную форму

WordPress не позволяет добавлять поля Select2 в регистрационную форму по умолчанию без обширного кода.

Но зачем полагаться на кодирование, если можно использовать поля Select2 гораздо проще?

Плагин User Registration помогает вставлять и настраивать поля Select2 и Multi Select2 в регистрационных формах без написания кода.

Все, что вам нужно, это расширение Advanced Fields. Вот почему это лучший способ добавить поля Select2 в регистрационные формы.

Кроме того, User Registration — это плагин формы регистрации.

Следовательно, вы можете создавать неограниченное количество настраиваемых регистрационных форм с полями Select2 для своего сайта. А интерфейс конструктора с перетаскиванием делает процесс очень быстрым!

Кроме того, регистрация пользователя является идеальным дополнением к веб-сайтам WooCommerce. Этот невероятный плагин WordPress помогает вам создавать собственные регистрационные формы WooCommerce и синхронизировать их со страницей оформления заказа.

Это всего лишь несколько основных моментов плагина User Registration. Если вы хотите узнать больше об этом плагине, посетите официальную страницу.

А пока давайте приступим к пошаговому руководству, где мы будем использовать регистрацию пользователя для демонстрации процесса.

Как добавить поле Select2 в регистрационную форму WordPress?

Вот полное руководство по добавлению полей WordPress Select2 в регистрационную форму.

Внимательно выполните все шаги, и у вас должна быть настроенная регистрационная форма с полем Select2, готовой в кратчайшие сроки!

Шаг 1. Настройте регистрацию пользователей Pro

Установка и активация User Registration Pro на вашем сайте — это первый шаг. Это премиум-версия бесплатного плагина для регистрации пользователей.

Чтобы получить профессиональный плагин, приобретите любой из трех тарифных планов на официальном сайте регистрации пользователей.

Затем настройте User Registration Pro на своем веб-сайте. Если вам нужна помощь в этом, следуйте нашему руководству о том, как правильно установить регистрацию пользователя.

После того, как вы успешно настроили плагин, вы можете перейти к следующему шагу.

Шаг 2. Установите и активируйте надстройку Advanced Fields.

User Registration Pro дает вам доступ к надстройке Advanced Fields.

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

Итак, для их использования необходимо установить и активировать надстройку Advanced Fields .

Вы можете легко сделать это на странице «Регистрация пользователя» >> «Расширения» на панели управления WordPress.

Здесь найдите надстройку и нажмите кнопку «Установить надстройку» . Когда установка будет завершена, нажмите кнопку «Активировать» .

Теперь вы готовы использовать поля Select2 WordPress в своей регистрационной форме.

Шаг 3: Создайте новую регистрационную форму с полями Select2

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

Начните с перехода в «Регистрация пользователя» >> «Добавить нового» .

Как видите, для быстрого старта можно выбрать готовый шаблон.

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

В противном случае вы можете начать создавать регистрационную форму с нуля. Нажмите «Начать с нуля» и назовите форму.

Как только вы нажмете «Продолжить» , вы попадете в конструктор форм с перетаскиванием.

Форма имеет четыре поля по умолчанию: Имя пользователя , Электронная почта пользователя , Пароль пользователя и Подтверждение пароля .

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

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

Регистрация пользователя поставляется с двумя типами полей Select2: Select2 и Multi Select2 . Вы можете добавить любое из этих полей в форму в соответствии с вашими требованиями.

Когда вы закончите, нажмите кнопку «Обновить форму» вверху.

Поэтому вы создали новую регистрационную форму с полем Select2 WordPress.

Шаг 4: Настройте поля Select2 и Multi Select2

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

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

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

общие настройки

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

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

Кроме того, вы можете изменить порядок параметров, перетаскивая их вверх или вниз. И если у вас есть длинный список опций, плагин позволяет вам добавлять их массово .

Расширенные настройки

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

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

Например, поле Multi Select2 имеет аналогичные Общие настройки . Однако дополнительные настройки предлагают две новые опции:

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

Итак, настройте каждое поле соответствующим образом и нажмите кнопку «Обновить форму» .

Шаг 5: Настройте параметры регистрационной формы

Ваша регистрационная форма не будет завершена, пока вы не настроите ее параметры.

Для этого перейдите на вкладку «Настройки формы» в конструкторе. Здесь вы можете настроить два типа параметров: Общие и Дополнительные .

В разделе «Общие» вы можете выбрать «Утверждение пользователя и вариант входа» , «Роль пользователя по умолчанию », «Шаблон формы » и т. д.

Вы также можете включить надежные пароли и поддержку CAPTCHA. Кроме того, вы можете установить URL-адрес перенаправления , текст кнопки отправки , класс формы и многое другое.

Настройки «Дополнительно» позволяют включить форму, удобную для клавиатуры , активировать защиту от спама с помощью Honeypot , включить домен из белого/черного списка и т. д.

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

Шаг 6. Отобразите пользовательскую регистрационную форму на своем сайте

Наконец, ваша регистрационная форма с полем Select2 готова к публикации на вашем сайте.

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

Это приведет вас к редактору Gutenberg. Здесь нажмите на средство вставки блока и добавьте блок регистрации пользователя на страницу.

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

Наконец, нажмите кнопку «Обновить» вверху, чтобы форма появилась на вашем сайте.

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

Поздравляем! Теперь на вашем сайте есть настраиваемая регистрационная форма с полем Select2 WordPress.

Подведение итогов!

На этом мы завершаем нашу статью о том, как добавить поля Select2 WordPress в регистрационную форму.

Подводя итог, вы можете добавить поля Select2 вместо стандартных полей Select, чтобы создать более сложные регистрационные формы.

А плагин User Registration поможет вам сделать это без проблем. Все, что вам нужно сделать, это добавить в форму поля Select2 и Multi Select2 и настроить их.

Кроме того, регистрация пользователя одинаково полезна для предотвращения спам-регистрации, изменения URL-адреса входа по умолчанию на пользовательский URL-адрес и т. д.

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

Кроме того, следите за нами в Twitter и Facebook, чтобы быть в курсе новых статей.