¿Le gustaría añadir un Deslizador Numérico a sus formularios WordPress? Un campo deslizante numérico permite a los usuarios hacer clic y arrastrar fácilmente un selector para elegir un valor en una línea numérica.
Este tutorial le mostrará cómo utilizar el campo Deslizador numérico en WPForms.
Antes de empezar, primero tendrá que asegurarse de que WPForms está instalado y activado en su sitio de WordPress y que ha verificado su licencia. A continuación, puede crear un nuevo formulario o editar uno existente para acceder al constructor de formularios.
Añadir un campo deslizante numérico a su formulario
Después de abrir el generador de formularios, busque en Campos estándar la opción Deslizador numérico. Simplemente haga clic en él o arrástrelo y suéltelo en el área de vista previa para añadirlo a su formulario.
Configuración de las opciones del campo deslizante numérico
Una vez que hayas añadido el campo a tu formulario, haz clic sobre él en el área de vista previa para abrir su panel de Opciones de campo. A continuación, repasaremos cada una de las opciones disponibles, utilizando como ejemplo un formulario de reserva de restaurante.
Etiqueta y descripción
En las opciones del campo Deslizador numérico, puede personalizar su etiqueta y descripción. La etiqueta por defecto será "Deslizador numérico", pero puedes cambiarla por la que desees.
Para nuestro ejemplo de reserva de restaurante, cambiaremos la etiqueta a "¿Cuántas personas habrá en su grupo?".
La descripción del campo le da la oportunidad de añadir texto adicional a su formulario, como instrucciones sobre cómo utilizar el deslizador numérico. Puede introducir el texto que desee en el campo correspondiente.
Valores mínimo y máximo
También puede personalizar los valores mínimo y máximo que un usuario puede seleccionar en la configuración de Valor. Los valores por defecto serán de 0 a 10, pero puedes sustituirlos por los números enteros que desees.
Para nuestro ejemplo, fijaremos el mínimo en 1 persona y el máximo en 20 personas.
Configuración de las opciones avanzadas del deslizador numérico
Puede personalizar el tamaño del campo, el valor por defecto y el valor de incremento en la pestaña Avanzado del panel de opciones de campo. Haz clic en ella en el constructor de formularios para acceder a estos ajustes adicionales.
Tamaño del campo
Por defecto, el Tamaño de campo está ajustado a Mediano. Sin embargo, tiene la opción de cambiar la longitud de su deslizador a Pequeño, Mediano o Grande.
A continuación encontrará ejemplos de cómo se verá cada tamaño de campo en el frontend de su sitio:
Valor por defecto
El valor predeterminado determina dónde se situará el control deslizante cuando los usuarios abran el formulario. Se establecerá automáticamente en el valor mínimo que elija en las opciones de campo.
Sin embargo, puede ajustarlo a cualquier número entero dentro del rango de su deslizador numérico introduciendo el valor deseado en el campo Valor por defecto.
Nota: Para más detalles sobre cómo establecer valores por defecto para los campos de sus formularios, consulte nuestro tutorial completo sobre esta opción.
Visualización de valores
By default, the label beneath your slider will read, “Selected Value: {value}.” The {value} tag pulls the number that is currently selected by the user so they can check that it’s correct.
Puede cambiar lo que se lee en la etiqueta en Visualización de valores.
Sin embargo, recomendamos dejar la etiqueta {value} para que los usuarios puedan confirmar su selección.
Nota: ¿Desea permitir que los usuarios revisen toda la información que han ingresado en su formulario antes de enviarlo? Echa un vistazo a nuestro tutorial sobre cómo mostrar vistas previas de entrada en WPForms para todos los detalles.
Incremento
Este ajuste determina el tamaño del paso para cada incremento en la posición del deslizador. Por ejemplo, si este valor es 2, cada incremento añadirá 2 al valor seleccionado (0, 2, 4, 6, etc.).
Por defecto, el valor de incremento se establece en 1. Sin embargo, puede editarlo a cualquier número entero que desee en el ajuste Incremento.
Nota: Si elige incrementar su valor en un número par, pero su valor máximo es impar (o viceversa), el deslizador numérico se detendrá en el número anterior a su valor máximo.
Configuración de la lógica condicional
Si lo desea, también puede mostrar un mensaje a los usuarios que seleccionen un valor determinado utilizando la lógica condicional.
En 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 de que se añadirá automáticamente un 20% de propina a su cuenta.
Para configurarlo, primero añadiremos un campo HTML a nuestro formulario con el texto "Nota: Se añadirá automáticamente un 20% de propina a su factura para grupos de más de 10 personas".
A continuación, configuraremos la lógica condicional para que este campo HTML sólo aparezca si el usuario elige un número superior a 10 utilizando el deslizador numérico. Para ello, haz clic en la pestaña Lógica inteligente del panel Opciones de campo del campo HTML y activa la opción Activar lógica condicional.
A continuación, establezca la regla que determina cuándo aparecerá el campo. Para este ejemplo, configuraremos la lógica para que diga: "Mostrar este campo si ¿Cuántas personas habrá en tu fiesta? es mayor que 10" .
Nota: ¿Necesita ayuda para configurar su regla de lógica condicional? Nuestro tutorial para principiantes sobre el uso de la lógica condicional en WPForms tiene todos los detalles.
El campo HTML permanecerá oculto a menos que el usuario seleccione un valor superior a 10 en el campo Deslizador numérico.
Ya está. Ahora puede añadir y personalizar un campo Deslizador numérico para cualquiera de sus formularios.
A continuación, ¿le gustaría aprender a analizar los datos que ha recopilado? No deje de consultar nuestro tutorial sobre el complemento Encuestas y sondeos para obtener información detallada sobre cómo ver las estadísticas de entrada, generar informes y mucho más.