Cómo crear un formulario con un deslizador de rango numérico en WordPress

Los deslizadores de rango numérico en un formulario tienen un aspecto realmente atractivo. Eso en sí mismo es un beneficio importante: es probable que los visitantes confíen más en ti si utilizas formularios visualmente impresionantes que reflejen profesionalidad.

Además, los deslizadores de rango numérico añaden un mayor nivel de interactividad a sus formularios. La interactividad genera compromiso, y son los visitantes comprometidos los que acaban convirtiendo.

Entonces, ¿cómo agregar un control deslizante de rango numérico en sus formularios de WordPress?

Te guiaré a través de la forma más sencilla de conseguirlo aquí mismo.

Crear formulario deslizante de rango numérico ahora

Cómo crear un formulario con un deslizador de rango numérico

Paso 1: Instalar WPForms

La forma más fácil de insertar un deslizador de rango numérico en su formulario es usar el plugin WPForms. Mientras que usted puede utilizar WPForms Lite (la versión gratuita) para crear un formulario con el control deslizante rango de números, voy a utilizar WPForms Pro para este tutorial porque esto abre un montón de posibilidades adicionales para el uso del campo deslizante de maneras interesantes.

Si no sabe cómo instalar el plugin, haga clic en esta guía para obtener instrucciones de instalación de WPForms.

Esto sólo le tomará unos minutos. Cuando WPForms esté listo en su sitio, puede comenzar a crear un formulario con el deslizador numérico.

Paso 2: Crear un formulario sencillo

Desde el panel de control de WordPress, vaya a WPForms " Añadir nuevo para crear un nuevo formulario.

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

Puede crear su propio sitio web desde cero (partiendo de una plantilla en blanco), o puede utilizar una plantilla ya creada para agilizar aún más el proceso.

Para este post, voy a utilizar la plantilla Simple Contact Form para demostrar cómo se puede trabajar con una plantilla para insertar campos adicionales como el deslizador numérico.

Una vez seleccionada la plantilla, accederás a la interfaz del creador de formularios, donde podrás incrustar el formulario directamente en tu sitio o personalizarlo aún más.

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

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

Ahora vamos a seguir adelante y añadir un control deslizante rango de números a su forma.

Sólo tiene que arrastrar el campo Deslizador numérico del menú Campos estándar de la izquierda a su formulario de la derecha.

Para cambiar algunos de los ajustes y el comportamiento de este campo, haga clic en el Deslizador Numérico que acaba de añadir. Verás que sus Opciones de campo aparecen ahora en el panel de la izquierda.

Estas opciones te permiten cambiar:

• Etiqueta: utilice esta opción 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 - Establezca los valores mínimo y máximo seleccionables para el control deslizante
• Valor por defecto - Este es el valor que asumirá el campo cuando el formulario se cargue por primera vez.
• Incremento - Le permite elegir la cantidad de incremento entre cada valor seleccionable.

Por último, puede añadir cualquier campo adicional a su formulario deslizante de intervalo de números arrastrándolos del lado izquierdo al derecho.

Cuando haya terminado de personalizar su formulario deslizante de rango, haga clic en Guardar en la esquina superior derecha.

🧮 Crear un formulario de WordPress con un deslizador de números

Paso 4: Configurar notificaciones y confirmaciones de formularios

WPForms le envía automáticamente una notificación cada vez que su formulario es enviado.

Puede personalizar las notificaciones de los formularios yendo a Configuración " Notificaciones.

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

De paso, le recomiendo que compruebe las confirmaciones de los formularios. La confirmación aparece inmediatamente después de enviar un formulario. Esto podría ser tan simple como un mensaje, o una redirección a una página diferente dependiendo de su estrategia.

Puede personalizar las confirmaciones yendo a Configuración " Confirmaciones.

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

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

Paso 5: Añada su formulario deslizante de rango numérico a su sitio web

Después de crear su formulario, necesita agregarlo a su sitio web WordPress. WPForms le permite añadir sus formularios a muchos lugares en su sitio web, incluyendo sus entradas de blog, páginas, e incluso widgets de la barra lateral.

Echemos un vistazo a la opción de colocación más común: la incrustación de páginas/post.

Para empezar, haga clic en el botón Incrustar situado en la parte superior del generador de formularios.

A continuación, verás un modal preguntándote si quieres incrustar este formulario en una página nueva o en una ya existente. Optemos por esta última opción y hagamos clic en Crear nueva página.

Dale un nombre a tu página y pulsa el botón Let's Go.

Ahora se encontrará dentro del editor de bloques de WordPress con el formulario incrustado. Si quieres, puedes dar estilo a tu formulario usando el editor de bloques sin ningún código.

Cuando esté listo, pulse el botón Publicar para publicar su página con formulario integrado.

Ahora podrá ver su formulario deslizante de intervalo de números en su sitio web, y los visitantes podrán empezar a utilizarlo de inmediato.

Para ver las entradas de formularios una vez enviadas, consulte esta guía completa sobre entradas de formularios. Por ejemplo, puedes ver, buscar, filtrar, imprimir y eliminar cualquier entrada de formulario.

¡Y ahí lo tiene! Ahora ya sabes cómo crear un formulario con un rango de números deslizante en WordPress usando el plugin WPForms para que puedas obtener fácilmente envíos de formularios detallados de los visitantes de tu sitio web.

Crear formulario deslizante de rango numérico ahora

Preguntas frecuentes sobre formularios con deslizador numérico

Estas son algunas preguntas que recibimos a menudo de nuestros usuarios interesados en utilizar un deslizador numérico en sus formularios:

¿Por qué utilizar un deslizador de rango numérico?

El uso de un control deslizante rango de números en sus formularios de WordPress ofrece una serie de beneficios como:

• Detalles adicionales: obtenga fácilmente información adicional de las personas que rellenen el formulario. Gracias a su carácter interactivo, es mucho más probable que los visitantes rellenen un campo deslizante que les pida más información.
• Clientes potenciales de mayor calidad - Con detalles adicionales sobre sus clientes potenciales desde el primer momento, sus clientes potenciales son aún mejores, lo que convierte a un formulario deslizante de alcance en una gran herramienta de generación de clientes potenciales.
• Responsive - El campo deslizante de rango numérico se ve muy bien en todos los dispositivos. Usted puede mantener su sitio y responsive tema de WordPress que parece grande mediante la adición de este campo.
• Fácil de usar - Una vez añadido el deslizador numérico a su formulario, sus clientes potenciales y clientes pueden utilizarlo fácilmente. Todo lo que tienen que hacer es simplemente arrastrarlo hacia adelante y hacia atrás para ajustar la cantidad.

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

Sí, puede establecer fácilmente un valor inicial predeterminado para su formulario deslizante. En WPForms, esta configuración es accesible desde las Opciones de campo del campo Deslizador numérico, y se denomina Valor predeterminado. Puede escribir cualquier valor numérico aquí para establecer el valor predeterminado.

Esta configuración puede variar si utiliza un creador de formularios diferente.

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

Por supuesto. El deslizador numérico de WPForms le permite establecer un valor de incremento. Esto determina los "pasos" de incremento entre un valor y el siguiente.

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

El campo numérico en WPForms se configura automáticamente para mostrar el valor seleccionado actual. Esto se actualiza dinámicamente a medida que su visitante ajusta el control deslizante, proporcionando información visual instantánea para una experiencia de usuario ideal.

¿Cómo personalizo el aspecto de mi deslizador?

El color del deslizador, la barra de progreso, las viñetas de los campos de radio y varios otros elementos en WPForms están todos conectados al color del botón de envío. Esto es para asegurar la coherencia temática entre el botón de envío y otros elementos interactivos de su formulario.

Así que puede cambiar el color de su deslizador numérico cambiando el color del botón Enviar desde las sencillas opciones de estilo de WPForms disponibles en el editor de bloques de WordPress.

También puedes editar la etiqueta de tu deslizador y el ancho del campo mientras editas tu formulario usando el constructor de formularios.

¿Cuáles son las mejores aplicaciones para los deslizadores de rango numérico en formularios web?

El deslizador de rango numérico es perfecto para utilizar cuando desea que los visitantes puedan seleccionar una cantidad de un rango predefinido.

Algunos ejemplos prácticos en los que hemos visto a nuestros clientes emplear deslizadores de rango numérico incluyen:

• Presupuestos: Un deslizador de rango numérico funciona muy bien cuando sus funciones de cálculo se utilizan para ofrecer un presupuesto en tiempo real. Al ser ajustable, es relativamente fácil para los visitantes ver cómo cambia el presupuesto a medida que seleccionan sus requisitos en un deslizador.
• Selección de presupuesto: Los contratistas suelen utilizar controles deslizantes para que los clientes puedan indicar su presupuesto a partir de una gama cuidadosamente elegida de valores mínimos y máximos.
• Duración del servicio: Si usted es un proveedor de servicios que acepta citas de duración variable, un deslizador numérico puede ayudar a los clientes a elegir la duración de su servicio requerido entre una gama de opciones predeterminadas.
• Preguntas de encuesta: Algunas preguntas de encuesta son fáciles de responder con un deslizador numérico. Por ejemplo, las preguntas sobre los ingresos del hogar o la edad del encuestado se pueden adaptar a un formato deslizante.
• Evaluaciones de bienestar: En un entorno sanitario, suelen utilizarse formularios deslizantes para evaluar el nivel de dolor, el estrés mental, la calidad del sueño y otras cuestiones similares.

Estos son sólo algunos ejemplos. Puede utilizar el deslizador numérico en una gran variedad de entornos.

A continuación, explore ejemplos de encuestas NPS

¿Quiere saber qué piensan los visitantes de su sitio web? Dirígete a este post con ejemplos de encuestas NPS para ver lo fácil que es poner una encuesta en tu sitio y recopilar valiosos comentarios.

¿A qué estás esperando? Empiece hoy mismo con el plugin de formularios para WordPress más potente. WPForms Pro viene con un formulario deslizante de rango numérico gratuito y tiene una garantía de devolución de dinero de 14 días.

Y no lo olvide, si le gusta este artículo, síganos en Facebook y Twitter.