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

Los controles deslizantes de rango numérico en un formulario quedan muy bien. Esto 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 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.

¿Cómo añadir 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

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

Paso 1: Instalar WPForms

La forma más fácil de insertar un control deslizante de rango numérico en tu formulario es usar el plugin WPForms. Si bien 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 esto abre un sinfín de posibilidades adicionales para usar el campo deslizante de maneras interesantes.

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

Esto solo te llevará unos minutos. Cuando WPForms esté listo en tu sitio, puedes empezar a crear un formulario con el control deslizante numérico.

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 hacia 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 mínimos y máximos seleccionables para el control deslizante
• Valor predeterminado – Este es el valor que asumirá el campo 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.

🧮 Crea un formulario de WordPress con un control deslizante numérico

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 dependiendo de 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 constructor de formularios.

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

Dale un nombre a tu página y luego pulsa el botón ¡Vamos!.

Te encontrarás 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 necesidad de código.

Cuando estés listo, pulsa el botón Publicar para poner en línea 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.

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.

Crear formulario con control deslizante numérico ahora

Preguntas frecuentes sobre formularios con control deslizante numérico

Aquí tienes algunas preguntas que recibimos a menudo de nuestros usuarios interesados en usar un control deslizante numérico en sus formularios:

¿Por qué usar un control deslizante de rango numérico?

Usar un control deslizante de rango numérico en tus formularios de WordPress ofrece una serie de beneficios como:

• Detalles adicionales: obtén información adicional de las personas que completan tu formulario fácilmente. Debido a que tiene una sensación tan interactiva, es mucho más probable que tus visitantes completen un campo de control deslizante de rango numérico que solicita más detalles.
• Leads de mayor calidad : con detalles adicionales sobre tus leads desde el principio, tus leads mejoran aún más, lo que convierte un formulario con control deslizante de rango en una excelente herramienta de generación de leads.
• Adaptable : el campo de control deslizante de rango numérico se ve genial en todos los dispositivos. Puedes mantener tu sitio y tu tema de WordPress adaptable con un aspecto excelente agregando este campo.
• Fácil de usar: una vez que se agrega el control deslizante numérico a tu formulario, tus leads y clientes pueden usarlo 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í, puedes establecer fácilmente un valor inicial predeterminado para tu formulario con control deslizante. En WPForms, esta configuración es accesible desde las Opciones de campo del campo Control deslizante numérico y se etiqueta como Valor predeterminado.  Puedes escribir cualquier valor numérico aquí para establecer el valor predeterminado.

Esta configuración puede variar si estás utilizando un generador de formularios diferente.

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

¡Absolutamente! El control deslizante numérico de WPForms te permite establecer un valor de incremento. Esto determina los "pasos" de incremento entre un valor y el siguiente.

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

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

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

El color del control deslizante, la barra de progreso, los puntos de los campos de opción y varios otros elementos en WPForms están conectados al color del botón de envío. Esto es para garantizar la coherencia temática entre tu botón de envío y otros elementos interactivos de tu formulario.

Por lo tanto, puedes cambiar el color de tu control deslizante numérico cambiando el color del botón de envío desde las sencillas opciones de estilo de WPForms disponibles en el editor de bloques de WordPress.

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

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

El control deslizante de rango numérico es perfecto para usar cuando deseas que los visitantes puedan seleccionar una cantidad de un rango predefinido.

Algunos ejemplos prácticos donde hemos visto a nuestros clientes emplear controles deslizantes de rango numérico incluyen:

• Cotizaciones/Estimaciones: Un control deslizante de rango numérico funciona muy bien cuando sus funciones de cálculo se utilizan para ofrecer una cotización en tiempo real. Debido a que es ajustable, es relativamente fácil para los visitantes ver cómo cambia la cotización a medida que seleccionan sus requisitos en un control deslizante.
• Selección de presupuesto: Los contratistas usan frecuentemente controles deslizantes para permitir a los clientes indicar su presupuesto dentro de un rango cuidadosamente elegido de valores mínimos y máximos.
• Duración del servicio: Si eres un proveedor de servicios que acepta citas de duraciones variables, un control deslizante numérico puede ayudar a los clientes a elegir la duración de tu servicio requerida entre una variedad de opciones predeterminadas.
• Preguntas de la encuesta: Ciertas preguntas de la encuesta son fáciles de responder con un control deslizante numérico. Por ejemplo, las preguntas sobre ingresos familiares o la edad del encuestado se pueden adaptar a un formato de control deslizante.
• Evaluaciones de bienestar: En un entorno sanitario, los formularios con controles deslizantes se utilizan a menudo para evaluar el nivel de dolor, el estrés mental, la calidad del sueño y otras preguntas similares.

Estos son solo algunos ejemplos. Puedes usar el control deslizante numérico en una gran variedad de entornos.

A continuación, explora ejemplos de encuestas NPS

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

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

Y no olvides que, si te gusta este artículo, síguenos en Facebook y Twitter.