Un formulario se envía y la página se queda en blanco. No pasa nada. La persona se pregunta si su envío funcionó. ¿Lo recibió el servidor? ¿Sigue procesándose? ¿Debería enviarlo otra vez? Ese momento entre hacer clic en enviar y saber que la acción tuvo éxito genera mucha ansiedad. La experiencia del formulario no termina cuando alguien hace clic en enviar. Termina cuando sabe que lo ha conseguido. Lo que pasa en esos momentos determina si confían en tu marca y si los datos que recogiste sirven de algo.
Tres elementos controlan ese último momento. Un estado de carga muestra que algo está pasando mientras el formulario se procesa. Un mensaje de éxito confirma que el envío funcionó. Una página de agradecimiento guía lo que viene después. Bien hechos, estos tres elementos hacen que alguien tenga la seguridad de haber hecho lo correcto. Mal hechos, crean confusión y desconfianza. Este artículo explica qué hace cada uno, cuándo usarlos, qué decir y cómo crearlos sin estropear la experiencia del formulario.
Por qué importan los estados de carga antes de que el formulario termine
El envío de un formulario ocurre en el servidor. Cuando alguien hace clic en enviar, sus datos viajan a un ordenador en algún sitio, se procesan y vuelve una respuesta. Todo ese recorrido suele tardar de uno a cinco segundos. Un segundo parece instantáneo. Cinco segundos parecen una eternidad. Durante ese tiempo, la persona se queda parada. Ve el formulario y no sabe qué hacer. ¿Enviar otra vez? ¿Esperar? ¿Recargar la página?
Un estado de carga elimina esa incertidumbre. Algo visible cambia cuando alguien hace clic en enviar. El botón se desactiva y cambia de texto. Aparece un indicador giratorio. Una barra de progreso muestra movimiento. Algo le dice a la persona "tu acción se registró y está pasando algo".
La regla más importante de los estados de carga es la regla del segundo. Si el envío tarda más de un segundo, muestra un indicador de carga. Si tarda menos de un segundo, puedes omitir el estado de carga visual porque ocurre tan rápido que apenas se nota. En casi todos los formularios reales que se conectan a un servidor, el envío tarda más de un segundo. Muestra el estado de carga.
Sin un estado de carga, la gente suele hacer clic en enviar varias veces. Su ansiedad les hace pensar que el primer clic no funcionó. Los envíos múltiples crean datos duplicados, gastan recursos del servidor y frustran a los usuarios. Un indicador de carga lo evita al señalar con claridad que la acción está en curso.
Cómo diseñar un estado de carga que dé confianza
El estado de carga más simple es desactivar el botón de enviar y cambiar su texto. El botón dice "Enviar" normalmente. Al hacer clic, pasa a decir "Enviando..." y se vuelve gris o se atenúa. La persona ve que el botón ya no se puede pulsar. Sabe que algo está pasando. Esto sirve para la mayoría de los formularios.
Un paso más es añadir movimiento visual. Aparece un pequeño icono giratorio junto al texto del botón o dentro de él. El icono gira de forma continua. Esto crea sensación de actividad y progreso. La velocidad de giro importa. Una vuelta completa por segundo se siente estable. Más rápido se siente frenético. Más lento se siente congelado. Quédate con el ritmo de una vuelta por segundo.
Para procesos más largos, una barra de progreso funciona mejor que un indicador giratorio. Una barra horizontal en la parte superior del formulario se llena a medida que avanza el proceso. Si el formulario sabe cuántos pasos tiene que realizar, puede mostrar un progreso realista. Si no conoce la duración total, usa una barra porcentual que se llene hasta el 90% y se complete cuando haya éxito. Esto le dice a la persona exactamente cuánto falta.
El color de tu indicador de carga debe destacar sin chocar con el diseño de tu formulario. Usa el color de tu marca o un azul o gris neutro. El rojo o el naranja pueden parecer un error aunque no lo sea. El verde puede hacer pensar que el formulario ya se envió con éxito.
Mantén los estados de carga mínimos. El botón cambia. Aparece un indicador giratorio. El formulario no necesita desvanecerse, los campos no necesitan desactivarse y un texto nuevo no necesita entrar deslizándose por un lado. La simplicidad genera confianza. La complejidad genera sospecha.
La diferencia entre un mensaje de éxito y una página de agradecimiento
Cuando un formulario se envía con éxito, el usuario necesita una confirmación. Esa confirmación puede darse de dos maneras. Un mensaje de éxito en la propia página aparece donde estaba el formulario. O el formulario redirige a una nueva página de agradecimiento con un mensaje de éxito. Ambas funcionan. La elección depende de tu objetivo.
Un mensaje de éxito en la página mantiene al usuario en el mismo sitio. El formulario desaparece o cambia para mostrar "Hemos recibido tu envío." Una confirmación simple y clara. Funciona bien en formularios pequeños o cuando quieres que el usuario siga en la misma página explorando más contenido. Los formularios de contacto suelen usar mensajes en la página. Las suscripciones a la newsletter también. Rápido, simple, ya está.
Una página de agradecimiento es una página dedicada a la que llega el usuario tras el envío. Solo existe después de que el formulario se envíe con éxito. Tiene su propia URL. Es útil cuando necesitas medir la conversión por separado en la analítica, cuando quieres mostrar contenido adicional tras el envío o cuando quieres guiar al usuario hacia el siguiente paso de un embudo de ventas. Los formularios de pago de las tiendas online redirigen a páginas de agradecimiento. Los formularios de captación de leads también. La página dedicada te da más espacio para trabajar.
La diferencia técnica importa para el seguimiento. Un mensaje en la página muestra la conversión en la misma página que el formulario. Una página de agradecimiento muestra una visita de página aparte y una URL aparte. Desde el punto de vista del seguimiento, la página de agradecimiento es más limpia. Es un evento distinto que las herramientas de analítica pueden medir con precisión.
Qué debe decir un mensaje de éxito
Un mensaje de éxito tiene un solo trabajo: decir a la persona que su envío funcionó. Nada más. No añadas texto de marketing, no ofrezcas más productos, no lo compliques.
Empieza con una confirmación clara. "Gracias. Hemos recibido tu envío." No "Su envío ha sido recibido correctamente por nuestro sistema automatizado." El primero suena humano. El segundo suena robótico y corporativo. La confirmación debe sonar personal y directa.
Añade el siguiente paso enseguida. Si el formulario era una solicitud de contacto, di cuándo recibirá respuesta la persona. "Te responderemos en dos horas laborables." No "Te contestaremos pronto." Los plazos concretos generan confianza. "Pronto" es vago. "Dos horas" es concreto.
Si el envío activa una respuesta automática, menciónala. "Revisa tu email para ver el enlace de confirmación." O "Te hemos enviado a tu bandeja de entrada un enlace para restablecer la contraseña." Esto explica qué pasa después sin que la persona tenga que adivinar ni preocuparse por si se le escapó algo.
Opcional pero potente: haz referencia a algo que la persona envió. "Hemos recibido tu mensaje sobre optimización web. Le echaremos un vistazo y te escribiremos." Devolverle sus propias palabras crea la sensación de que se la ve y se la entiende. Confirma que sus datos se recibieron y se registraron de verdad.
Que el mensaje sea corto. Una o dos frases en un mensaje en la página. De tres a cinco frases en el mensaje de una página de agradecimiento. Los mensajes de éxito largos parecen spam o un discurso comercial extra.
Usa un lenguaje cercano y conversacional. "Gracias por escribirnos." No "Gracias por completar el envío de este formulario." El lenguaje conversacional hace que el momento se sienta humano, no automático.
Diseñar una página de agradecimiento que convierta, no un callejón sin salida
Una página de agradecimiento es un momento de mucho valor. La persona acaba de convertir. Está de buen humor. Ha actuado. Ha completado lo que le pediste. Este es el momento justo después de decir que sí. Es el momento de guiarla hacia delante, no de mandarla fuera.
En la parte superior de la página de agradecimiento, repite la confirmación. "Gracias. Hemos recibido tu solicitud." Que sea breve. La persona ya sabe que lo ha conseguido. La confirmación está solo para hacerlo oficial.
Debajo de la confirmación, añade contenido que encaje con lo que acaba de hacer. Si se suscribió a una newsletter, muéstrale qué va a recibir. Si pidió una demo, muestra los siguientes pasos. Si hizo una compra, muestra los detalles del pedido y el plazo de envío. El contenido debe sentirse como la continuación natural de lo que acaba de enviar.
Añade una acción opcional. No cinco. No tres. Una. ¿Qué debería hacer a continuación? ¿Explorar tu web? ¿Leer recursos útiles? ¿Seguirte en redes sociales? ¿Reservar una llamada? Elige una y haz que sea el centro de la página. Varias llamadas a la acción compitiendo confunden a la gente. Acaban de decir que sí. Guíalas hacia delante con un único paso claro.
Si quieres recoger información adicional, una página de agradecimiento es un buen sitio. No la pidas en el propio formulario. Pídela después de que ya se hayan comprometido enviando una vez. Un segundo formulario, más ligero, en la página de agradecimiento suele convertir mejor que meter todo en el primero.
Incluye prueba social si procede. Una cita de un cliente satisfecho. Una estadística sobre personas que dieron el mismo paso. Algo que refuerce que tomaron la decisión correcta. No se trata de convencerlas de que conviertan. Ya han convertido. Se trata de reforzar su confianza en lo que acaban de hacer.
Asegúrate de que el diseño de la página coincide con el resto de tu web. Una página de agradecimiento que se ve distinta, usa otras fuentes o tiene una combinación de colores chocante hace que el usuario sienta que ha salido de la web de tu marca. La coherencia genera confianza. La página de agradecimiento debe sentirse parte de tu sitio.
El momento de la transición del formulario al estado de éxito
Cuando alguien hace clic en enviar, ¿cuánto debe mostrarse el estado de carga antes de que aparezca el mensaje de éxito o la página de agradecimiento? La respuesta: tanto como tarde en procesarse el formulario.
En los formularios que se envían muy rápido, en menos de un segundo, mantén visible el estado de carga al menos un segundo de todos modos. Si el envío tarda realmente 300 milisegundos pero tu indicador de carga desaparece a los 400, la gente puede pensar que algo se rompió. La transición debe sentirse deliberada, no precipitada.
En los formularios que tardan de dos a cinco segundos, muestra el estado de carga durante todo el tiempo. Deja que la gente vea la espera. No ocultes cuánto está tardando el proceso. La transparencia genera confianza.
No muestres nunca un estado de carga que desaparece y luego vuelve a aparecer. Crea confusión. Muéstralo una vez y mantenlo visible hasta que haya éxito. Si necesitas reintentar tras un error, quita por completo el estado de carga y muestra el mensaje de error antes de volver a intentarlo.
Para procesos muy largos, de más de diez segundos, plantéate mostrar actualizaciones de progreso. No solo un indicador giratorio. Un mensaje que cambie. "Validando tu información." Luego "Procesando tu solicitud." Luego "Finalizando el envío." Tres o cuatro mensajes pequeños a lo largo de un proceso largo mantienen a la gente atenta y consciente de que algo sigue pasando.
El móvil: estados de carga y mensajes de éxito
En la pantalla de un teléfono, el espacio es limitado. Un indicador de carga que funciona bien en escritorio puede ocupar demasiado en el móvil. Una página de agradecimiento larga en escritorio se vuelve larguísima en el móvil.
En los estados de carga del móvil, reduce el texto al mínimo. "Enviando..." en lugar de "Espera mientras procesamos tu envío." Un indicador giratorio ocupa menos espacio que una barra de progreso. Coloca el indicador de carga dentro del botón de enviar o justo encima o debajo, no flotando en medio de la página.
En los mensajes de éxito del móvil, sé breve. Una frase es lo ideal. Dos son aceptables. Más que eso y el mensaje se sale de la pantalla.
En las páginas de agradecimiento del móvil, coloca el mensaje principal de confirmación en los dos primeros párrafos. No hagas que la gente tenga que bajar por la página para saber si el formulario se envió de verdad. El mensaje de agradecimiento debe verse de inmediato, sin desplazarse.
Prueba tus estados de carga y de éxito en teléfonos reales, no solo en la emulación del navegador. El tamaño y el renderizado de la pantalla del teléfono pueden afectar cómo se ven las cosas.
Analítica y seguimiento de los últimos momentos de tu formulario
La página o el mensaje de éxito es donde mides si el formulario convirtió de verdad. Plataformas de analítica como Google Analytics, el píxel de Meta y las plataformas de email pueden seguir el momento de éxito con precisión.
Si usas un mensaje de éxito en la misma página que el formulario, fija un disparador de conversión en la aparición de ese mensaje. Usa JavaScript para registrar cuándo aparece el mensaje, no solo cuándo carga la página. Así sabes exactamente quién envió con éxito, no solo quién visitó la página.
Si rediriges a una página de agradecimiento, el seguimiento es automático. Cada visita a esa página es una conversión. Por eso muchos formularios usan páginas de agradecimiento. La URL es única. Las herramientas de analítica la entienden perfectamente. Una visita de página equivale a un envío con éxito.
Añade la URL de la página de agradecimiento a los objetivos de conversión de tu analítica. En Google Analytics, crea un objetivo que se active cuando alguien llegue a yourdomain.com/thank-you. Así se cuenta automáticamente cada envío correcto del formulario.
Si usas varios formularios en tu web, crea una página de agradecimiento única para cada uno o usa parámetros en la URL para distinguirlos. contact-form.com/thank-you frente a demo-form.com/thank-you. O usa parámetros como /thank-you?form=contact. Así puedes seguir qué formularios convierten.
Errores comunes que estropean el momento de éxito
Un mensaje de éxito que no confirma que la acción funcionó no es un mensaje de éxito. Es un callejón sin salida. "Gracias." Y nada más. ¿Qué debería hacer la persona después? ¿Dónde está su confirmación? No aclarar genera desconfianza.
Los estados de carga demasiado largos o demasiado cortos parecen rotos. Un indicador que gira durante 20 segundos hace pensar que algo salió mal. Uno que aparece y desaparece en 100 milisegundos puede pasar desapercibido.
Páginas de agradecimiento que intentan vender en lugar de agradecer. Justo después de que alguien convierta no es el momento de ofrecerle otra cosa. Reconoce lo que hizo. Guíalo hacia delante. Ya habrá tiempo de vender.
Un mensaje de éxito o una página de agradecimiento que repite información que el formulario ya pidió. La persona ya te dio su nombre y su email. No hagas que los lea de nuevo en la página de éxito. Úsalos para personalizar el mensaje, no para repetir lo recogido.
Formularios móviles con estados de carga demasiado grandes para la pantalla. Un indicador que ocupa la mitad de la pantalla del teléfono abruma. Mantén los indicadores visuales proporcionales al tamaño de la pantalla.
Olvidar añadir un siguiente paso claro. "Gracias por enviar." Y luego nada. ¿Qué debería hacer la persona? Sin dirección, se va. Una única acción siguiente y clara la mantiene interesada.
Cómo te ayuda WEMASY a diseñar estados de carga y experiencias de éxito
El creador de formularios de WEMASY incluye estados de carga integrados que se muestran automáticamente al enviar un formulario. Puedes personalizar el estilo del indicador de carga para que encaje con tu marca. Elige entre un mensaje de texto, un indicador giratorio o una barra de progreso. Fija el color para que combine con el tema de tu marca. El estado de carga aparece mientras se procesan los datos del formulario y desaparece cuando termina el envío.
Los mensajes de éxito son totalmente personalizables en el creador de formularios. Escribe tu propio mensaje. Elige si se muestra en la página o si redirige a una página de agradecimiento. Si rediriges, WEMASY te deja indicar la URL de tu página de agradecimiento. El formulario redirige automáticamente tras un envío correcto.
Para las páginas de agradecimiento, crea una página en el creador de webs de WEMASY como cualquier otra. Diséñala para que combine con tu marca. Añade el texto de confirmación, los siguientes pasos, prueba social o llamadas a la acción secundarias. Cuando termines de configurar tu formulario, pega la URL de la página de agradecimiento en los ajustes de redirección del formulario. WEMASY se encarga de la redirección automáticamente.
La validación en tiempo real evita muchos errores de envío antes de que ocurran. Cuando los datos del formulario llegan sin errores, el envío se hace limpio. El estado de carga aparece brevemente y el estado de éxito se activa antes. Menos errores significan envíos más rápidos y menos tiempo mostrando estados de carga.
La integración con la analítica viene incluida. WEMASY registra los envíos de formularios y puede activar objetivos de analítica automáticamente. Cuando un formulario se envía con éxito, puedes configurar eventos en Google Analytics o en el píxel de Meta. Mira qué campos del formulario tienen las mejores tasas de conversión, qué formularios convierten con más frecuencia y dónde abandona la gente.
Consulta qué funciones de formularios incluye tu plan de WEMASY.