¿Cómo agregar campos seleccionados por Select2 en un formulario de registro de WordPress?
Publicado: 2023-02-27Si desea crear formularios de registro avanzados, puede usar los campos de WordPress de Select2 en lugar del campo Seleccionar.
¿Te preguntas cómo puedes hacer eso? Bueno, ¡estás en el lugar correcto!
En este artículo, aprenderá qué es el campo Select2 de WordPress, su significado y su diferencia con el campo Select estándar.
También veremos el proceso paso a paso de agregar el campo a un formulario de registro. Así que, ¡asegúrate de leer el artículo hasta el final!
Tabla de contenido
¿Qué es Select2? ¿En qué se diferencia de la selección estándar?
En términos simples, la tecnología Select2 le brinda campos de selección personalizables. Esto significa que puede agregar funciones como búsqueda, etiquetado, desplazamiento infinito, etc., al campo Seleccionar.
Ahora, debe preguntarse en qué se diferencia el campo Select2 del campo Select estándar. ¡Vamos a averiguar!
Seleccionar frente a Seleccionar2
El campo Seleccionar estándar presenta una lista de opciones disponibles en un menú desplegable. El usuario puede seleccionar una de estas opciones desplazándose para encontrar la opción.
El campo Select2 tiene todas las operaciones que ofrece el campo Select estándar. Así, también permite a los usuarios seleccionar una de las opciones disponibles.
Sin embargo, Select2 ofrece más flexibilidad y personalización.
Le da al usuario un cuadro de búsqueda donde puede escribir la opción. La opción de coincidencia se muestra automáticamente al usuario.
Además, los campos Select2 también facilitan el etiquetado y el desplazamiento infinito, a diferencia de los campos Select estándar.
Select2 frente a Multi Select2
La tecnología Select2 admite cuadros de selección de un solo valor y de varios valores. El cuadro de selección de un solo valor se conoce simplemente como el campo Select2.
Por otro lado, el cuadro de selección de valores múltiples se conoce como el campo Multi Select2 o Pastillero.
Son bastante similares en cómo funcionan; ambos admiten cuadros de selección personalizables.
La única diferencia importante es que Multi Select2 permite a los usuarios elegir varias opciones de las opciones disponibles. Todas las opciones que selecciona el usuario aparecen dentro de la caja, como pastilleros, de ahí el nombre.
Esta característica no está presente en el campo Select2 regular.
¿Por qué agregar un campo de WordPress Select2 en un formulario de registro?
La introducción a los campos Select2 lo ayudó a comprender mejor esta tecnología.
Pero, ¿qué valor agrega a un formulario de registro? ¿Por qué no utilizar simplemente el campo de selección estándar para el registro?
Bueno, veamos algunas razones por las que debería agregar un campo de WordPress Select2 a un formulario de registro:
- El campo Select2 ayuda a los usuarios a encontrar fácilmente la opción correcta con el cuadro de búsqueda.
- Los usuarios no necesitan desplazarse por la lista completa para encontrar la opción que buscan.
- Puede permitir que los usuarios busquen y elijan múltiples opciones.
- El campo admite el desplazamiento infinito, por lo que las opciones siguen cargando cuando el usuario se desplaza hacia abajo.
- Los campos Select2 hacen que el proceso de registro sea rápido y fácil para los usuarios.
- La excelente experiencia de usuario anima a los usuarios a completar y enviar formularios de registro.
Es por eso que le sugerimos que agregue un campo Select2 a los formularios de registro en lugar del campo Select estándar.
¿Y cuál es la mejor manera de agregar campos Select2 a un formulario personalizado? Exploremos eso en la siguiente sección.
La mejor manera de agregar campos Select2 en un formulario de registro
WordPress no le permite agregar campos Select2 al formulario de registro predeterminado sin una codificación extensa.
Pero, ¿por qué confiar en la codificación cuando puede usar los campos Select2 de una manera mucho más fácil?
El complemento de registro de usuario lo ayuda a insertar y personalizar los campos Select2 y Multi Select2 en los formularios de registro sin codificación.
Todo lo que necesitas es su extensión de Campos Avanzados. Es por eso que es la mejor manera de agregar campos Select2 a los formularios de registro.
Además, el registro de usuario es un complemento de formulario de registro.
Por lo tanto, puede crear formularios de registro personalizados ilimitados con campos Select2 para su sitio. ¡Y la interfaz del constructor de arrastrar y soltar hace que el proceso sea súper rápido!
Además, el registro de usuario es el complemento perfecto para los sitios web de WooCommerce. Este increíble complemento de WordPress lo ayuda a crear formularios de registro personalizados de WooCommerce y sincronizarlos con la página de pago.
Estos son solo algunos aspectos destacados del complemento de registro de usuario. Si desea obtener más información sobre este complemento, visite la página oficial.
Por ahora, procedamos con la guía paso a paso, donde usaremos el registro de usuario para demostrar el proceso.
¿Cómo agregar un campo Select2 en un formulario de registro de WordPress?
Aquí hay una guía completa para agregar campos de WordPress Select2 en un formulario de registro.
¡Implemente todos los pasos con cuidado, y debería tener un formulario de registro personalizado con el campo Select2 listo en muy poco tiempo!
Paso 1: configurar el registro de usuario Pro
Instalar y activar User Registration Pro en su sitio web es el primer paso. Es la versión premium del complemento de registro de usuario gratuito.
Para obtener el complemento profesional, compre cualquiera de los tres planes de precios en el sitio oficial de Registro de usuarios.
Luego, configure User Registration Pro en su sitio web. Si necesita ayuda para hacerlo, siga nuestra guía sobre cómo instalar correctamente el Registro de usuario.
Una vez que haya configurado el complemento con éxito, puede pasar al siguiente paso.
Paso 2: Instale y active el complemento de campos avanzados
User Registration Pro le da acceso al complemento Campos avanzados.
Como sugiere el nombre, agrega varios campos avanzados al generador de formularios, incluidos los campos Select2 y Multi Select2.
Entonces, para usarlos, debe instalar y activar el complemento Campos avanzados .
Puede hacerlo fácilmente desde la página Registro de usuario >> Extensiones en su panel de WordPress.
Aquí, busque el complemento y haga clic en el botón Instalar complemento . Cuando se complete la instalación, presione el botón Activar .
Ahora, está listo para usar los campos de Select2 WordPress en su formulario de registro.
Paso 3: cree un nuevo formulario de registro con campos Select2
En el tercer paso, creemos un nuevo formulario de registro donde puede agregar los campos Select2.
Comience navegando a Registro de usuario >> Agregar nuevo .
Como puede ver, puede elegir una plantilla prediseñada para un inicio rápido.
El registro de usuarios ofrece varias plantillas, como el formulario de registro de estudiantes , el formulario de envío de anuncios y más.
De lo contrario, puede comenzar a crear el formulario de registro desde cero. Haga clic en Comenzar desde cero y asigne un nombre al formulario.
Una vez que presione Continuar , será llevado al generador de formularios de arrastrar y soltar.
El formulario tiene cuatro campos predeterminados: Nombre de usuario , Correo electrónico de usuario , Contraseña de usuario y Confirmar contraseña .
Puedes arrastrar el resto de campos que necesites desde la izquierda al formulario de la derecha. También puede reorganizar la ubicación de los campos simplemente arrastrándolos.
Lo más importante, asegúrese de agregar también los campos Select2 al formulario.
El registro de usuario viene con dos tipos de campos Select2: Select2 y Multi Select2 . Puede agregar cualquiera de estos campos al formulario según sus requisitos.
Cuando haya terminado, presione el botón Actualizar formulario en la parte superior.
Por lo tanto, ha creado un nuevo formulario de registro con el campo Select2 WordPress.
Paso 4: personalice los campos Select2 y Multi Select2
Lo mejor del Registro de Usuario es que puedes personalizar todos los campos que agregas al formulario.
Todo lo que tiene que hacer es hacer clic en el campo que desea editar y sus Opciones de campo se abrirán a la izquierda.
Por lo tanto, haga clic en el campo Select2 que ha agregado. Desde sus Opciones de campo , puede editar las siguientes configuraciones:
Configuración general
Desde esta sección, puede editar la etiqueta del campo, la descripción, etc. También puede hacer que el campo sea obligatorio, ocultar su etiqueta o habilitar la información sobre herramientas.
Además, la sección Opciones le ayuda a agregar, editar y eliminar opciones. Haga clic en + para agregar una opción y – para eliminarla. Puede cambiar los nombres de las opciones editando el cuadro de texto.
Además, puede reorganizar las opciones arrastrándolas hacia arriba o hacia abajo. Y si tiene una larga lista de opciones, el complemento le permite agregarlas en bloque .
Ajustes avanzados
La configuración avanzada le permite agregar clases de CSS personalizadas para el campo. También puede permitir que el campo se complete dinámicamente al proporcionar un nombre de parámetro.
Es importante tener en cuenta que las opciones de campo varían para cada campo de formulario.
Por ejemplo, el campo Multi Select2 tiene una configuración general similar. Sin embargo, la Configuración avanzada ofrece dos nuevas opciones:
- Límite de elección: establece el número máximo de opciones que un usuario puede seleccionar.
- Seleccionar todo: permite a los usuarios seleccionar todas las opciones disponibles en la lista.
Por lo tanto, personalice cada campo en consecuencia y presione el botón Actualizar formulario .
Paso 5: configure los ajustes del formulario de registro
Su formulario de registro no está completo hasta que haya configurado sus ajustes de formulario.
Para hacer eso, vaya a la pestaña Configuración de formulario en el generador. Aquí puedes configurar dos tipos de ajustes: General y Extras .
La sección General le permite elegir una opción de aprobación e inicio de sesión del usuario , rol de usuario predeterminado , plantilla de formulario , etc.
También puede habilitar contraseñas seguras y compatibilidad con CAPTCHA. Aparte de eso, puede configurar la URL de redirección , el texto del botón de envío , la clase de formulario y más.
La configuración Extras le permite Habilitar el formulario amigable con el teclado , Activar la protección contra correo no deseado por Honeypot , Habilitar el dominio de la lista blanca / Lista negra , etc.
Cuando haya terminado con la configuración, presione el botón Actualizar formulario .
Paso 6: Muestre el formulario de registro personalizado en su sitio
Finalmente, su formulario de registro con el campo Select2 está listo para ser publicado en su sitio.
Para hacer esto, abra la página o publicación existente donde desea mostrar el formulario personalizado.
Hacer esto te lleva al editor de Gutenberg. Aquí, haga clic en el insertador de bloques y agregue el bloque Registro de usuario a la página.
Luego, seleccione el botón de opción Formulario de registro y elija el formulario que creó anteriormente en el menú desplegable.
Finalmente, presione el botón Actualizar en la parte superior para que el formulario esté activo en su sitio.
Si está creando una nueva página o publicación, siga los mismos pasos anteriores. Luego, presione el botón Publicar al final.
¡Felicidades! Ahora, su sitio web tiene un formulario de registro personalizado con el campo Select2 WordPress.
¡Terminando!
Con esto concluye nuestro artículo sobre cómo agregar campos de WordPress Select2 en un formulario de registro.
Para resumir, puede agregar campos Select2 en lugar de los campos Select estándar para crear formularios de registro más avanzados.
Y el complemento de registro de usuario lo ayuda a hacerlo sin problemas. Todo lo que necesita hacer es agregar los campos Select2 y Multi Select2 a su formulario y personalizarlos.
Además de eso, el registro de usuario es igualmente útil para evitar el registro de spam, cambiar la URL de inicio de sesión predeterminada a una URL personalizada y más.
Obtenga más información sobre este poderoso complemento a través de nuestro blog. También puede consultar los tutoriales en vídeo en nuestro canal de YouTube.
Además, síganos en Twitter y Facebook para mantenerse actualizado sobre nuevos artículos.