Resumen de IA
¿Te gustaría añadir un control deslizante numérico a tus formularios de WordPress? Un campo de control deslizante numérico permite a tus usuarios hacer clic y arrastrar fácilmente un selector para elegir un valor en una línea numérica.
Este tutorial te mostrará cómo usar el campo de control deslizante numérico en WPForms.
Antes de empezar, primero deberás asegurarte de que WPForms esté instalado y activado en tu sitio de WordPress y de que hayas verificado tu licencia. Luego, puedes crear un nuevo formulario o editar uno existente para acceder al creador de formularios.
Añadir un campo de control deslizante numérico a tu formulario
Una vez abierto el creador de formularios, busca en Campos estándar para encontrar la opción de control deslizante numérico. Simplemente haz clic en él o arrástralo y suéltalo en el área de vista previa para añadirlo a tu formulario.
Configurar las opciones del campo de control deslizante numérico
Una vez que hayas añadido el campo a tu formulario, haz clic en él en el área de vista previa para abrir su panel de Opciones de campo. A continuación, repasaremos cada configuración disponible aquí, utilizando un formulario de reserva de restaurante como ejemplo.
Etiqueta y descripción
En las opciones del campo de control deslizante numérico, puedes personalizar su etiqueta y descripción. La etiqueta por defecto será "Control deslizante numérico", pero puedes cambiarla a lo que desees.
Para nuestro ejemplo de reserva de restaurante, cambiaremos la etiqueta a "¿Cuántas personas habrá en tu grupo?".
La descripción del campo te da la oportunidad de añadir texto adicional a tu formulario, como instrucciones sobre cómo usar el control deslizante numérico. Puedes introducir el texto que desees en el campo proporcionado.
Valores mínimo y máximo
También puedes personalizar los valores mínimo y máximo que un usuario puede seleccionar en la configuración de Valor. Los valores predeterminados serán de 0 a 10, pero puedes reemplazarlos con los números enteros que desees.
Para nuestro ejemplo, estableceremos el mínimo en 1 persona y el máximo en 20 personas.
Configurar las opciones avanzadas del control deslizante numérico
Puedes personalizar el tamaño del campo, el valor predeterminado y el valor de incremento en la pestaña Avanzado del panel de opciones del campo. Haz clic en él en el creador de formularios para acceder a estas configuraciones adicionales.
Tamaño del campo
Por defecto, el tamaño del campo está configurado en Mediano. Sin embargo, tienes la opción de cambiar la longitud de tu control deslizante a Pequeño, Mediano o Grande.
A continuación, se muestran ejemplos de cómo se verá cada tamaño de campo en el frontend de tu sitio:
Valor predeterminado
El valor predeterminado determina dónde se establecerá el control deslizante cuando los usuarios abran tu formulario. Se establecerá automáticamente en el valor mínimo que elijas en las opciones del campo.
Sin embargo, puedes ajustarlo a cualquier número entero dentro del rango de tu control deslizante de números introduciendo tu valor deseado en el campo Valor predeterminado.
Nota: Para más detalles sobre cómo establecer valores predeterminados para los campos de tus formularios, consulta nuestro tutorial completo sobre esta opción.
Visualización del valor
Por defecto, la etiqueta debajo de tu control deslizante dirá: "Valor seleccionado: {value}". La etiqueta {value} extrae el número que está actualmente seleccionado por el usuario para que pueda comprobar que es correcto.
Puedes cambiar lo que dice la etiqueta en Visualización del valor.
Sin embargo, recomendamos dejar la etiqueta {value} en su lugar para que los usuarios puedan confirmar su selección.
Nota: ¿Quieres permitir a los usuarios revisar toda la información que han introducido en tu formulario antes de enviarlo? Consulta nuestro tutorial sobre cómo mostrar previsualizaciones de entradas en WPForms para todos los detalles.
Incremento
Esta configuración determina el tamaño del paso para cada aumento en la posición del control deslizante. Por ejemplo, si tuvieras esta configuración establecida en 2, cada aumento añadiría 2 al valor seleccionado (0, 2, 4, 6, etc.).
Por defecto, el valor de incremento se establecerá en 1. Sin embargo, puedes editarlo a cualquier número entero que desees en la configuración de Incremento.
Nota: Si eliges incrementar tu valor en un número par, pero tu valor máximo es impar (o viceversa), el control deslizante de números se detendrá en el número anterior a tu valor máximo.
Configurar la lógica condicional
Si lo deseas, también puedes mostrar a los usuarios que seleccionan un valor particular un mensaje utilizando lógica condicional.
Para nuestro ejemplo de reserva de restaurante, mostraremos un mensaje a los usuarios que indiquen que su grupo será de más de 10 personas. En nuestro mensaje, les informaremos que se añadirá un cargo automático de propina del 20% a su factura.
Para configurar esto, primero añadiremos un campo HTML a nuestro formulario con el texto "Nota: Se añadirá automáticamente una propina del 20% a tu factura para grupos de más de 10 personas."
A continuación, configuraremos la lógica condicional para que este campo HTML solo aparezca si un usuario elige un número mayor que 10 usando el control deslizante de números. Para hacer esto, haz clic en la pestaña Lógica inteligente en el panel Opciones de campo para el campo HTML y activa la configuración para Habilitar lógica condicional.
Luego establece la regla que determina cuándo aparecerá el campo. Para este ejemplo, estableceremos la lógica para que diga: "Mostrar este campo si ¿Cuántas personas habrá en tu grupo? es mayor que 10."
Nota: ¿Necesitas ayuda para configurar tu regla de lógica condicional? Nuestro tutorial para principiantes sobre cómo usar la lógica condicional en WPForms tiene todos los detalles.
El campo HTML permanecerá oculto a menos que el usuario seleccione un valor mayor que 10 en el campo Control deslizante de números.
¡Eso es todo! Ahora puedes añadir y personalizar un campo de Control deslizante de números para cualquiera de tus formularios.
A continuación, ¿te gustaría aprender a analizar los datos que has recopilado? Asegúrate de consultar nuestro tutorial sobre el complemento Encuestas y Sondeos para obtener detalles sobre cómo ver estadísticas de entradas, generar informes y más.