Cómo agregar un control deslizante de rango numérico en formularios de WordPress (Gratis)

Los controles deslizantes de rango numérico en un formulario se ven muy bien y eso en sí mismo es un beneficio importante, ya que es probable que los visitantes confíen más en ti si utilizas formularios visualmente impresionantes que reflejen profesionalismo.

Además, los controles deslizantes de rango numérico añaden un mayor nivel de interactividad a tus formularios. La interactividad crea participación, y son tus visitantes comprometidos los que finalmente se convierten.

Entonces, ¿cómo agregas un control deslizante de rango numérico en tus formularios de WordPress? Te guiaré a través de la forma más sencilla de lograr esto aquí mismo.

Crear formulario con control deslizante numérico ahora

¿Qué es un control deslizante de rango de WordPress?

Un control deslizante de rango de WordPress es un campo de formulario que permite a las personas elegir un número arrastrando un control a lo largo de una barra en lugar de escribirlo.

Establece los valores más bajos y más altos que acepta el campo, y su visitante elige cualquier número dentro de ese rango. Ese pequeño cambio hace algunas cosas útiles:

• Campos completados con más frecuencia: Arrastrar es más rápido que escribir, por lo que es menos probable que las personas dejen el campo en blanco o se lo salten.
• Mejores respuestas de calidad: Obtienes una cifra real en lugar de una suposición vaga, lo que convierte al control deslizante en una herramienta de generación de leads genuinamente útil cuando haces un seguimiento.
• Funciona en teléfonos: Es más fácil pulsar un control deslizante en una pantalla táctil que un campo numérico, y se ve bien en cualquier tema de WordPress que estés utilizando.
• Nada que aprender: Tu visitante arrastra hacia la izquierda o hacia la derecha, por lo que no hay ningún formato que se pueda hacer mal ni ningún error de validación con el que encontrarse.

WPForms llama a este campo Control deslizante numérico, y se encuentra en el grupo Campos estándar del creador de formularios. Sigue los pasos a continuación para empezar:

Cómo añadir un control deslizante de rango numérico en WordPress

Paso 1: Instalar el plugin WPForms

La forma más sencilla de insertar un control deslizante de rango numérico en tu formulario es usar WPForms, que es el plugin de formularios de WordPress más fácil para principiantes y que viene equipado con un montón de funciones avanzadas de creación de formularios.

Lo que más me gusta de WPForms es que ofrece un campo nativo de Control deslizante numérico. Lo arrastras, estableces un mínimo y un máximo, y la etiqueta debajo de la barra empieza a mostrar el valor seleccionado por sí sola.

Aunque puedes usar WPForms Lite (la versión gratuita) para crear un formulario con el control deslizante de rango numérico, usaré WPForms Pro para este tutorial porque abre un montón de posibilidades adicionales para usar el campo deslizante de formas interesantes.

Si no sabes cómo instalar el plugin, haz clic en esta guía para ver las instrucciones de instalación de WPForms. Solo te llevará unos minutos. Cuando WPForms esté listo en tu sitio, puedes empezar a crear un formulario con el control deslizante numérico.

Crea tu formulario de WordPress ahora

Paso 2: Crear un formulario sencillo

Desde tu panel de WordPress, navega a WPForms » Añadir nuevo para crear un nuevo formulario.

Inmediatamente, verás la pantalla de configuración del formulario aparecer en tu ventana. Aquí, puedes introducir un nombre para tu formulario y seleccionar una plantilla.

Puedes construir tu formulario completamente desde cero (empezando con una plantilla en blanco), o puedes usar una plantilla predefinida para que las cosas sean aún más rápidas para ti.

Para esta publicación, usaré la plantilla de formulario de contacto simple para demostrar cómo puedes trabajar con una plantilla para insertar campos adicionales como el control deslizante numérico.

Después de seleccionar la plantilla, serás llevado a la interfaz del constructor de formularios donde puedes proceder a incrustar el formulario directamente en tu sitio o personalizarlo aún más.

En el siguiente paso, exploraremos el campo de control deslizante de rango numérico y su configuración asociada.

Paso 3: Añadir un control deslizante de rango numérico

Ahora vamos a añadir un control deslizante de rango numérico a tu formulario. Simplemente puedes arrastrar el campo Control deslizante numérico desde el menú Campos estándar de tu izquierda a tu formulario de la derecha.

Para cambiar algunas de las configuraciones y el comportamiento de este campo, haz clic en el Control deslizante numérico que acabas de añadir. Verás sus Opciones de campo aparecer en el panel izquierdo ahora.

Estas opciones te permiten cambiar:

• Etiqueta – Úsala para añadir un nombre que represente la cantidad controlada por el control deslizante.
• Descripción – Esto ayuda a proporcionar contexto adicional, si es necesario.
• Valor – Establece los valores seleccionables mínimo y máximo para el control deslizante.
• Valor predeterminado – Este es el valor que el campo asumirá cuando el formulario se cargue por primera vez.
• Incremento – Te permite elegir la cantidad de incremento entre cada valor seleccionable.

Por último, puedes añadir cualquier campo adicional a tu formulario de control deslizante de rango numérico arrastrándolos desde el lado izquierdo al lado derecho.

Cuando hayas terminado de personalizar tu formulario de control deslizante de rango, haz clic en Guardar en la esquina superior derecha.

Paso 4: Configura las notificaciones y confirmaciones del formulario

WPForms te envía automáticamente una notificación cada vez que se envía tu formulario. Puedes personalizar las notificaciones del formulario yendo a Ajustes » Notificaciones.

Aquí, puedes elegir los destinatarios de tu notificación (que puede ser tu correo electrónico de administrador, la persona que envía el formulario o cualquier otro correo electrónico codificado que desees introducir). Los usuarios de WPForms Basic y superior también pueden crear múltiples notificaciones de formulario.

Ya que estás en ello, también te recomiendo revisar las confirmaciones de tu formulario. La confirmación aparece inmediatamente después de enviar un formulario. Podría ser tan simple como un mensaje o una redirección a una página diferente según tu estrategia. Puedes personalizar las confirmaciones yendo a Ajustes » Confirmaciones.

A continuación, puedes seleccionar el tipo de confirmación (Mensaje, Mostrar página, Redirigir a URL) que deseas e introducir el mensaje y otros detalles según sea necesario.

Cuando hayas terminado, pulsa de nuevo Guardar en la parte superior del constructor de formularios. ¡Es hora de incrustar tu formulario!

Paso 5: Añadir tu formulario con control deslizante numérico a tu sitio

Después de haber creado tu formulario, necesitas agregarlo a tu sitio web de WordPress. WPForms te permite agregar tus formularios a muchas ubicaciones en tu sitio web, incluyendo tus publicaciones de blog, páginas e incluso widgets de barra lateral.

Echemos un vistazo a la opción de colocación más común: la incrustación en páginas/entradas. Para empezar, haz clic en el botón Incrustar en la parte superior del creador de formularios.

A continuación, verás una ventana modal preguntando si deseas incrustar este formulario en una página nueva o en una existente. Vayamos con esta última opción y hagamos clic en Crear página nueva.

Dale un nombre a tu página y luego presiona el botón ¡Vamos!. Te encontrarás dentro del editor de bloques de WordPress ahora con el formulario incrustado.

Si quieres, puedes dar estilo a tu formulario usando el editor de bloques sin ningún código. Cuando estés listo, presiona el botón Publicar para poner en vivo tu página con el formulario incrustado.

Ahora podrás ver tu formulario de control deslizante de rango numérico en tu sitio web, y los visitantes podrán empezar a usarlo de inmediato, sin ningún problema.

Para ver las entradas del formulario después de que se hayan enviado, consulta esta guía completa sobre las entradas del formulario. Por ejemplo, puedes ver, buscar, filtrar, imprimir y eliminar cualquier entrada del formulario.

¡Y eso es todo! Ahora sabes cómo crear un formulario con un control deslizante de rango numérico en WordPress usando el plugin WPForms para que puedas obtener fácilmente envíos detallados de tu formulario de los visitantes de tu sitio web.

Preguntas frecuentes sobre controles deslizantes de rango de WordPress

Un control deslizante de rango de WordPress plantea el mismo puñado de preguntas cada vez, principalmente sobre qué cubre la versión gratuita y dónde se encuentran los límites del campo. Estas son las que surgen con más frecuencia.

¿El control deslizante numérico es gratuito en WPForms?

Sí, el Control deslizante numérico es un Campo Estándar, por lo que está incluido en WPForms Lite sin coste alguno y no necesita ningún complemento adicional.

Solo necesitas una licencia de pago para lo que construyas a su alrededor, específicamente la lógica condicional en Básico y superior, y los cálculos en Pro.

¿Puedo establecer un valor inicial predeterminado para el control deslizante?

Puedes hacerlo, y la configuración se llama Valor predeterminado, ubicada en la pestaña Avanzado de las opciones del campo. Coincide con tu valor mínimo hasta que lo cambies, así que escribe cualquier número entero dentro de tu rango para mover la posición inicial.

¿Puedo hacer que el control deslizante se ajuste a incrementos específicos?

Eso es exactamente para lo que sirve la configuración de Incremento, ya que controla el tamaño del paso entre un valor seleccionable y el siguiente.

Un incremento de 5 en un control deslizante de 0 a 100 te da 0, 5, 10 y así sucesivamente. Solo asegúrate de que tu incremento divida uniformemente tu rango, o el control se detendrá antes de tu máximo.

¿Cómo muestro el valor actualmente seleccionado junto al control deslizante?

La configuración de Visualización de valor en la pestaña Avanzado se encarga de esto, y está activada por defecto. El texto dice Valor seleccionado: {value}, donde {value} se actualiza en vivo mientras tu visitante arrastra el control.

Puedes reescribir el texto alrededor de ese marcador a lo que quieras, que es cómo añades un símbolo de moneda o una etiqueta de unidad.

¿Puedo usar un control deslizante de rango con dos controles para un mínimo y un máximo?

No con un solo campo, porque el Control deslizante numérico tiene un solo control y tú defines el rango sobre el que se mueve.

Si necesitas que tu visitante seleccione un intervalo, añade dos campos de Control deslizante numérico etiquetados algo como Mínimo y Máximo. Ambos valores se guardan en la entrada por separado, por lo que son fáciles de leer y actuar después.

¿El control deslizante numérico admite decimales?

No, el campo funciona solo con números enteros, y eso se aplica al mínimo, máximo, valor predeterminado e incremento por igual.

Cuando necesites precisión decimal, usa el campo Números en su lugar. Tiene su propia configuración de Rango para valores mínimos y máximos, y tu visitante escribe la cifra en lugar de arrastrar hasta ella.

¿Cómo personalizo la apariencia de mi control deslizante?

La barra y el control deslizante toman su color de su botón de envío, junto con la barra de progreso y los puntos de radio, lo que mantiene todo en el formulario visualmente coherente.

Por lo tanto, cambiar el color del botón de envío en las opciones de estilo del editor de bloques también cambia su control deslizante. También puede cambiar el tamaño del campo entre Pequeño, Mediano y Grande, y editar la etiqueta desde el creador de formularios.

A continuación, cree un formulario de calculadora con su control deslizante

El siguiente paso obvio es poner ese control deslizante a trabajar dentro de una fórmula, para que el precio se mueva en tiempo real mientras su visitante se decide.

Esa es la razón por la que la mayoría de la gente agrega un control deslizante a un formulario en primer lugar, y convierte un campo de recopilación de datos en uno de venta.

Si prefiere dirigir el control deslizante a la retroalimentación en lugar de a los precios, estos ejemplos de encuestas NPS muestran cómo funciona una escala de 0 a 10 como pregunta de satisfacción y qué hacer con las respuestas que reciba.

Añada ahora un control deslizante de rango numérico a su formulario

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.