Tutorial: un formulario de contacto en 15 minutos

En este tutorial añades un formulario de contacto a tu web. Cuando un visitante lo envía:

1. tú recibes el mensaje en tu bandeja de entrada y, con Responder, contestas directamente al visitante,
2. el visitante recibe un breve correo de «gracias, hemos recibido tu mensaje»,
3. los bots se frenan antes de que te cuesten nada.

No hay ningún servidor que programar ni alojar. El formulario habla con Frontmail directamente desde el navegador con tu clave pública; Frontmail comprueba de dónde viene la solicitud, renderiza tu plantilla y envía el correo a través de tu propia cuenta de correo o proveedor.

¿Quieres ver primero el resultado?

La demo en vivo ejecuta el mismo tipo de formulario en React, Svelte y Vue, con el código justo al lado.

Qué necesitas

• Una cuenta de Frontmail. Crea una cuenta en app.frontmail.dev: el plan Free es suficiente. Confirma tu dirección de correo; si no, podrás echar un vistazo, pero no enviar.
• Una cuenta de correo desde la que enviar. Cualquier buzón SMTP (Zoho, tu hosting…), una cuenta de Gmail u Outlook, o un proveedor con API como Resend o Postmark.
• Una web en la que puedas editar el HTML. Basta con una página estática. Para probar en local, también sirve un servidor de desarrollo en localhost.
• Unos 15 minutos.

¿Ya has pasado por «Primeros pasos»?

Después de crear tu organización, el panel te ofrece un breve asistente de configuración. Cubre lo mismo que los pasos 1, 2, 4 y 6 de este tutorial. Si lo terminaste, repasa esos pasos por encima y céntrate en la respuesta automática y en el formulario.

Los pasos

Cada paso es breve y termina con un enlace al siguiente.

1. Conecta un servicio de correoIndica a Frontmail qué cuenta o proveedor envía tus correos.

2. Crea la plantilla de contactoEmpieza desde la galería, revisa el destinatario y pruébala con datos de ejemplo.

3. Añade una respuesta automáticaUna segunda plantilla que da las gracias al visitante, vinculada a la primera.

4. Permite tu sitio webLimita tu clave pública a tu dominio y activa la CAPTCHA.

5. Crea el formularioHTML normal y el SDK para navegador desde la CDN.

6. Prueba y sigue la entregaEnvía una prueba gratuita, envía el formulario real y síguelo en el Historial.

¿Tienes prisa? El inicio rápido resume el mismo proceso en una sola página, sin las explicaciones.