7 excelentes ejemplos de formularios de varios pasos para inspirarte

¿Sus formularios en línea podrían necesitar un impulso de UX? Estos ejemplos de formularios de varios pasos le brindarán excelentes ideas y también conclusiones sobre las mejores prácticas. ¡Échales un vistazo!

Tiempo aproximado de lectura: 7 minutos

A nadie le gusta completar formularios largos. Incluso nosotros y estamos en la forma de negocio.

Pero casi todos los sitios web necesitan un formulario, ya sea para suscribirse a un boletín informativo, realizar un pago o ponerse en contacto con el servicio de atención al cliente.

Entonces, como creadores de sitios, ¿cómo podemos hacer que completar los formularios sea menos complicado y al mismo tiempo recopilar la información que necesitamos?

¡La respuesta es el diseño de formularios de varios pasos!

En lugar de bombardear a la gente con todas nuestras preguntas a la vez, las distribuiremos en varias páginas o pasos. Ofrece una experiencia de usuario mucho mejor y aún logramos que los usuarios completen la misma cantidad de campos de formulario.

Ahora, echemos un vistazo más de cerca a siete fantásticos ejemplos de formularios de varios pasos de toda la web y compartamos nuestras conclusiones para que pueda avanzar y conquistar las tasas de conversión.

Cuándo utilizar formularios de varios pasos (y cuándo no)

Muchas situaciones son apropiadas para utilizar un formulario de varios pasos, entre ellas:

• Solicitudes de empleo
• Pruebas o exámenes en línea
• Formularios de inscripción e inscripción
• Cuestionarios e imanes de clientes potenciales
• Asistentes de incorporación
• Solicitudes de cotización de precios

Y eso está fuera de nuestras cabezas. Realmente puedes utilizar el diseño de formularios de varias páginas para todo.

¿Pero deberías hacerlo?

Sólo porque puedas no significa que debas hacerlo . Este dicho es cierto para casi todo en la vida, ¡y resulta que también se aplica a la construcción de formularios!

Probablemente no debería utilizar un formulario de varios pasos si su formulario es muy corto y solo tiene unos pocos campos .

Sería extraño dividir un formulario básico de suscripción a un boletín que solo solicita un nombre, una dirección de correo electrónico y un número de teléfono. Agrega clics innecesarios. Y cuantos más clics se necesiten para completar su formulario, más probabilidades tendrá de perder usuarios antes de que presionen "Enviar".

Pero los formularios simples no son los únicos que pueden beneficiarse de estar en una sola página. Algunas formas más complejas también pueden hacerlo.

Por ejemplo, Sephora tiene un formulario de un solo paso en su página de pago. ️ Dado el tamaño de la empresa, seguramente investigaron y descubrieron que sus clientes prefieren mantener todo en la misma página.

Han utilizado algunos elementos inteligentes de diseño de UX para hacer que el formulario parezca más corto, limitar las distracciones y reducir el abandono del carrito.

Entonces, la respuesta a si se debe utilizar un formulario de varios pasos o de una página se reduce a una combinación de sentido común y datos concretos.

Conoces a tus usuarios mejor que nadie. ¡No tengas miedo de profundizar en las estadísticas y analizar los resultados de tu encuesta para descubrir qué funciona mejor para ellos!

Los mejores ejemplos de formularios de varios pasos

1. Airbnb - Formulario de registro de usuario

En Airbnb, crear una cuenta y completar su perfil puede ser más fácil que elegir su próximo lugar de vacaciones.

El formulario tiene que ver con ser fácil de usar, con un diseño que funcione bien en cualquier dispositivo. Pero no es sólo el diseño. La copia también ofrece un suave empujón para continuar con los pasos, mientras le permite saber que puede omitir cualquier paso y volver a él más tarde.

Esa pequeña línea quita mucha presión a los usuarios primerizos.

Por qué nos gusta:

• Diseño de formulario de varios pasos responsivo y compatible con dispositivos móviles
• Navegación sencilla con botón Atrás y opción para saltar
• Indicador de progreso
• Copia inteligente y eficiente

2. N26 - Creación de cuenta bancaria

N26 mantiene su forma en lo esencial sin sentir frío. ¿No es agradable cuando un banco invierte un poco de tiempo y energía en hacer felices a sus clientes?

Este formulario responsivo se ve encantador ya sea que esté en su teléfono o en una computadora de escritorio y lo guía sin problemas a través de la aburrida pero importante tarea de abrir una cuenta bancaria.

Establece todos los pasos por adelantado, para que no haya sorpresas. Y la opción de cambiar los modos de visualización es un buen toque que mejora la experiencia del usuario.

Por qué nos gusta:

• Indicador de progreso
• Lista clara de pasos
• Navegación fácil
• Opción de modo claro/modo oscuro
• Lógica condicional para opciones basadas en el país de residencia

3. Ubersuggest: imán de leads

Neil Patel, el rey del SEO y el marketing digital, lo dejó fuera del parque (como de costumbre) con este formulario de generación de leads en la página de destino.

El diseño de este cuestionario de varios pasos elimina el desorden sin hacerte sentir perdido o solo. Neil está ahí para guiarte en todo momento, con explicaciones tranquilizadoras y razones claras detrás de cada pregunta. A cambio, su agencia obtiene toneladas de clientes potenciales calificados.

Por qué nos gusta:

• Diseño limpio y minimalista
• Indicadores de progreso
• Borrar opciones de formulario
• Formato conversacional de una pregunta a la vez
• Cara amable y explicaciones.

4. Stripe: registro de cuenta e incorporación de usuarios

Este ejemplo de formulario de varios pasos de Stripe le ayuda a configurar su cuenta sin ningún problema y, al mismo tiempo, le ofrece la tranquilidad y la retroalimentación que desea y necesita.

Desde el principio, puede saber que está en buenas manos con un formulario diseñado de manera inteligente, que enumera claramente para quién es el servicio y mantiene segura toda esa información financiera importante.

Por qué nos gusta:

• Comentarios en cada paso
• Recordatorios a los usuarios de los beneficios del servicio.
• Prueba social
• Diseño elegante y sencillo

5. The Ordinary - Prueba de producto

El creador de regímenes de The Ordinary se parece más a una charla con un especialista en el cuidado de la piel o a un comprador personal que a un formulario de varios pasos. Pero eso es todo, ¡una forma!

Al hacer preguntas cerradas y ofrecerles opciones sencillas, como controles deslizantes, puede completar el formulario en poco tiempo y sin mucho esfuerzo. Y cuando haya terminado, puede hacer clic para agregar instantáneamente productos sugeridos a su carrito.

¡Ojalá todas las experiencias de compra fueran así de fáciles y agradables!

Por qué nos gusta:

• Es hora de completar el formulario que figura en el primer paso.
• Recomendaciones de productos personalizadas
• Lógica condicional
• formato conversacional
• Diseño de forma minimalista que coincide con la misión de la marca.

6. Little Passports: prueba y pago del producto

Little Passports convierte el llenado de formularios en una divertida aventura en la que puedes elegir tu propio. Su proceso de pago tiene varios pasos que lo atraen y muestran diferentes kits para despertar la curiosidad de los niños. Cada parte del formulario está diseñada para que elegir una caja de suscripción sea tan emocionante como obtenerla.

Por qué nos gusta:

• Personalización
• Lógica condicional
• Indicador de progreso
• Diseño divertido y colorido

7. Geico - Solicitud de cotización

El formulario de cotización de seguro de varios pasos de Geico mantiene las cosas claras, amigables y rápidas. Su pequeña y amigable mascota gecko está ahí para animarte mientras haces clic en tus opciones. ¡De repente, el tema de los seguros parece mucho menos aterrador!

Este formulario es rápido y útil. Y al final, obtendrá una cotización de precio instantánea mientras nuestro amigo reptil recopila clientes potenciales calificados para realizar un seguimiento más adelante.

Por qué nos gusta:

• Botones de opción grandes con imágenes para accesibilidad.
• Diseño de respuesta
• Producto o servicio personalizado
• Opciones de producto antes de pedir información personal

Claves para un buen diseño de formularios de varios pasos

Entonces, ¿qué podemos aprender de estos ejemplos?

Si analizamos lo que tienen en común, quedan claras algunas de las mejores prácticas de UX de varios pasos:

• Indicadores de progreso : barra de progreso, línea raíz, pasos numerados, estimaciones de tiempo, etc.
• Comentarios de campo claros y amigables : campos obligatorios, mensajes de error, mensajes de confirmación
• Personalización : campos dinámicos y recomendaciones personalizadas
• Diseño responsivo : los formularios deben verse geniales y ser fáciles de usar en pantallas de cualquier tamaño
• Limite las preguntas abiertas : use menús desplegables, botones, controles deslizantes y alternadores en lugar de campos de texto

También intentamos incluir estos elementos en los formularios de nuestro sitio. Así es como resultó nuestro formulario de pago de varias páginas. ¿Qué opinas? No dudes en probarlo tú mismo aquí.

¿Listo para crear tus propios formularios de varios pasos?

Ahora que estás lleno de inspiración y conocimiento de las formas, ¡es hora de actuar! Pero, ¿cómo puedes convertir en realidad esa increíble forma de varios pasos que tienes en mente?

¡Obtienes nuestro complemento, por supuesto!

Puede que seamos un poco parciales, pero Formidable Forms es realmente el mejor creador de formularios de varios pasos para WordPress. Le permite agregar y personalizar barras de progreso, botones de formulario y más de 30 tipos de campos de formulario.

Incluso puede crear formularios conversacionales, cuestionarios de recomendación de productos, calculadoras y encuestas con Formidable Forms. Sí, ¡obtienes todo eso en un solo complemento!

Haga clic a continuación para obtener su creador de formularios de WordPress y comience a crear sus obras maestras de varios pasos.

¡Empieza con Formidable Forms!

Pruebe Formidable Pro sin riesgos con nuestra garantía de devolución de dinero de 14 días o comience con nuestro complemento de creación de formularios gratuito.

Para obtener más diversión con los formularios en línea, síganos en Facebook, Twitter y YouTube. ¡Hasta la proxima vez!

Obtenga más información sobre el diseño de formularios de varios pasos

• Los 9 mejores complementos de WordPress para formularios de varios pasos
  Leer más

  Cómo crear un formulario Ajax de varios pasos en WordPress
  Leer más

  Cómo crear un formulario de varios pasos con barras de progreso
  Leer más