15 ejemplos de página de agradecimiento con código y siguientes pasos | We.Inc
Quince diseños originales de página de agradecimiento para pedidos, registros, reservas, descargas y donaciones, con HTML y CSS editables y un siguiente paso claro.
Ejemplos de página de agradecimiento
Una buena página de agradecimiento confirma lo que acaba de pasar, dice qué llega después y cuándo, y ofrece exactamente un siguiente paso útil. Abajo tienes quince diseños originales para pedidos, registros, reservas, descargas, donaciones y más, cada uno escrito en HTML y CSS sencillos que puedes editar aquí y copiar a tu propio sitio.
Ajusta el siguiente paso a lo que el visitante acaba de hacer
El visitante acaba de...
Confirma
Mejor siguiente paso único
Comprar algo
Número de pedido, artículos, entrega estimada
Seguir el pedido o crear una cuenta
Suscribirse a un boletín
Qué dirección, con qué frecuencia envías
Revisar la bandeja de entrada para confirmar, o leer un artículo de inicio
Reservar una hora
Fecha, hora, lugar o enlace de videollamada
Añadir al calendario
Descargar un archivo
Nombre del archivo, un enlace de descarga alternativo
Guía o herramienta relacionada
Enviar un formulario de contacto
Plazo de respuesta, una copia de su mensaje
Consultar respuestas a preguntas frecuentes
Donar
Importe, recibo por correo
Compartir o configurar una donación mensual
La mayoría de los visitantes llega a una página de agradecimiento en el momento en que más confía en ti, y luego se va porque la página no dice nada. Estos ejemplos están pensados para ese momento. Cada uno es un fragmento completo y editable para un negocio ficticio, con el tamaño justo para insertarlo en una página, y cada uno muestra una forma distinta de guiar al visitante hacia el paso que importa a continuación.
Recorre los ejemplos por situación: compras, registros, reservas, descargas y mensajes, y luego donaciones y eventos.
Edita el código junto a cualquier ejemplo y el marco de resultado se actualiza mientras escribes. Los scripts están desactivados en el marco.
Copia el fragmento, cambia el texto y los colores por los tuyos, y colócalo en la página a la que tu formulario o tu checkout envía a la gente.
Repasa la lista de comprobación que está sobre los ejemplos antes de publicar, para que la página responda a lo que los visitantes se van a preguntar.
Repite el dato clave: la dirección de correo, la hora de la reserva o el número de pedido. Tranquiliza a la gente y detecta errores de escritura a tiempo.
Di cuándo ocurre lo siguiente. Un correo de confirmación que llega en cinco minutos parece un fallo si nadie avisó de que llegaría.
Ofrece una sola acción principal. Un muro de botones sociales, ventas adicionales y enlaces divide la atención y suele conseguir menos clics en cada uno.
Mantén la cabecera del sitio para que la gente pueda seguir navegando, pero quita los pop-ups y las cajas de boletín para quien acaba de suscribirse.
Añade una etiqueta meta robots noindex a las páginas de agradecimiento para que no aparezcan en los resultados de búsqueda de gente que nunca convirtió.
Preguntas frecuentes
¿Qué debe decir una página de agradecimiento?
Tres cosas: una confirmación exacta de lo que pasó, qué debe esperar el visitante después y cuándo, y una acción clara para hacer ahora. Todo lo demás es opcional.
¿Deben indexar los buscadores una página de agradecimiento?
Normalmente no. Añade <meta name="robots" content="noindex"> al head. Google indica que si robots.txt bloquea la página, su rastreador nunca ve la regla noindex, así que no bloquees también esa misma página en robots.txt.
¿Es mejor una página de agradecimiento que un mensaje de éxito en línea?
Una página aparte tiene su propia dirección, lo que simplifica el seguimiento de conversiones y te da espacio para un siguiente paso. Un mensaje en línea mantiene a la gente donde está, lo que encaja con formularios pequeños como una caja de comentarios. Ambos deben confirmar con palabras lo que pasó.
¿Qué hace buena a una página de confirmación de pedido?
El número de pedido en letra grande, un breve resumen de artículos y total, la estimación de entrega o recogida, la dirección de correo a la que se envió el recibo y un único enlace para seguir o gestionar el pedido.
¿Puedo hacer una venta adicional en una página de agradecimiento?
Sí, si la oferta tiene relación clara con lo que acaban de hacer y no empuja hacia abajo los datos de confirmación. Un accesorio a juego o una recompensa por recomendar es mucho más bienvenido que un banner genérico de rebajas.
Por qué importa la página que viene después del formulario
El envío de un formulario o un checkout es el único momento en que sabes exactamente qué quería alguien. La página que sigue puede calmar dudas, evitar correos al soporte y empezar el siguiente paso de la relación, o puede ser un callejón sin salida que solo da las gracias.
Escribe la página como la respuesta a la siguiente pregunta del visitante. Después de pagar, es cuándo llega el paquete. Después de reservar, es adónde ir y cómo cambiar la cita. Después de una descarga, es si el archivo se guardó de verdad.
Confirmación accesible
Dale a la página un encabezado claro como Pedido confirmado en lugar de un icono solitario, y no dependas solo del color para indicar el éxito. Si muestras la confirmación en línea en vez de en una página nueva, colócala en un elemento con role="status" para que los lectores de pantalla la anuncien con cortesía sin mover el foco.
Después de una compra
1. Pedido confirmado con un número de pedido grande
El número es lo primero que pedirá el soporte, así que lleva la letra más grande después del encabezado.
2. Calendario de envío
Tres pasos muestran dónde está el pedido y fijan el plazo de entrega antes de que nadie tenga que preguntar.
3. De compra como invitado a cuenta
Un comprador invitado ya escribió un correo, así que la página ofrece un campo de contraseña para guardar el historial de pedidos.
4. Complemento relacionado, debajo de la confirmación
La oferta va bajo los datos de confirmación y está relacionada con lo comprado, así que se lee como ayuda y no como una venta agresiva.
Después de un registro
5. Revisa tu bandeja de entrada
Las listas con doble confirmación necesitan este paso. Nombrar el remitente y el asunto ayuda a la gente a encontrar el correo rápido.
6. Bienvenida con una lectura de inicio
Cuando alguien ya está suscrito, llévalo a lo mejor que ya has publicado en lugar de hacerle esperar al próximo número.
7. Prueba gratuita iniciada
Una lista corta de configuración en tres pasos convierte una cuenta vacía en progreso, con el primer paso marcado como el punto de partida.
Después de una reserva o un mensaje
8. Cita con añadir al calendario
Fecha, hora y lugar en un bloque compacto, con los enlaces de calendario y de cambio de cita justo al lado.
9. Llamada de descubrimiento reservada con preguntas de preparación
Una breve lista de preparación hace la llamada más útil y fija discretamente las expectativas de ambas partes.
10. Mensaje recibido con plazo de respuesta
Repetir el mensaje demuestra que llegó, y un plazo de respuesta real evita que la gente lo envíe dos veces.
11. Solicitud de presupuesto con referencia
Un número de referencia y una persona con nombre hacen que una solicitud de presupuesto parezca atendida y no perdida en una cola.
Después de una descarga, una donación o la inscripción a un evento
12. Descarga con enlace alternativo
Los navegadores a veces bloquean las descargas automáticas, así que un enlace visible y el tamaño del archivo cubren el caso en que no apareció nada.
13. Donación con impacto y recibo
Decir qué consigue la donación y confirmar el recibo es mejor que un agradecimiento genérico. La opción mensual se ofrece una vez, con suavidad.
14. Inscripción a un evento con entrada
Un bloque con forma de entrada reúne los datos que la gente busca ese día: fecha, apertura de puertas y su nombre.
15. Lista de espera con un empujón para recomendar
Una lista de espera es el único lugar donde encaja una invitación a compartir, porque invitar a amigos le da al visitante algo que quiere.
El encabezado dice con palabras lo que acaba de pasar
Se repite el dato clave (número de pedido, correo, hora)
Dice qué llega después y aproximadamente cuándo
Hay un único siguiente paso principal, con estilo de botón principal
Hay una forma de corregir un error (correo equivocado, cambiar la cita, cancelar)
La navegación del sitio sigue disponible para seguir navegando
No hay pop-up ni caja de registro para quien acaba de registrarse
La página tiene una etiqueta meta robots noindex
Lista de comprobación de la página de agradecimiento
{n} de {total} hechos
Todo listo. Tu página de agradecimiento cubre lo que los visitantes se van a preguntar.