Cómo añadir un formulario de contacto a tu web sin backend

Vas a crear un formulario HTML normal y corriente que envía cada mensaje a tu bandeja de entrada. El correo lo envía Frontmail a través del buzón que ya usas (Gmail, Outlook, cualquier servidor SMTP o un proveedor transaccional), así que no necesitas mantener ningún servidor propio.

Necesitas: una cuenta gratuita de Frontmail y unos diez minutos.

1. Conecta tu buzón

1. En el panel, abre Servicios de correo y haz clic en Añadir servicio.
2. Elige tu proveedor. Gmail y Outlook se conectan con tu cuenta (no se guarda ninguna contraseña); SMTP, Resend, Postmark, Mailgun y el resto piden una clave de API o unas credenciales.
3. Activa Marcar como predeterminado y haz clic en Verificar y guardar. Frontmail comprueba las credenciales sin enviar nada.

2. Crea la plantilla desde la galería

1. Abre Plantillas → Desde la galería y elige Formulario de contacto (categoría Formularios).
2. Haz clic en Usar plantilla. To es tu propia dirección y Reply-To es la del visitante, así que al pulsar Responder le contestas directamente.

La plantilla espera estos parámetros, que serán los atributos name de los campos del formulario:

Parámetro	Obligatorio	Qué es
name	sí	El nombre del visitante
email	sí	La dirección del visitante (validada)
phone	no	Número de teléfono
topic	no	Asunto, aparece en el asunto del correo
message	sí	El mensaje

3. Permite tu sitio web

Tu clave pública está en el código fuente de la página, y no pasa nada, pero solo tu web debería poder usarla.

1. Abre Seguridad y añade tu dominio en Sitios web permitidos (por ejemplo example.com y www.example.com; mientras desarrollas, añade también localhost). Haz clic en Guardar.
2. Recomendado: crea un widget gratuito de Cloudflare Turnstile para tus dominios, pega su clave de sitio y su clave secreta en Seguridad → Protección contra bots y haz clic en Activar la CAPTCHA en todas las plantillas. Así los bots no pueden usar tu formulario, y las personas normalmente ni lo notan.

4. Añade el formulario a tu página

Copia la clave pública (Seguridad) y el ID de la plantilla (pestaña Fragmentos de la plantilla) y pega esto donde quieras que aparezca el formulario:

<form id="contact">
  <label>Name <input name="name" required maxlength="200" /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Turnstile adds a hidden cf-turnstile-response field; leave it out if you skipped the CAPTCHA -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</button>
  <p id="form-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('contact');
  const status = document.getElementById('form-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      // null = your default service
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thank you! We’ll get back to you soon.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset(); // a Turnstile token works only once
    }
  });
</script>

sendForm() lee los campos por su name, de modo que el formulario y la plantilla se mantienen sincronizados sin código de mapeo. Los errores de red y los fallos puntuales del servidor se reintentan automáticamente con la misma clave de idempotencia: un visitante nunca te envía el mismo mensaje dos veces.

5. Pruébalo

Abre la página, rellena el formulario y envíalo. El correo llega a tu bandeja en pocos segundos, y en Historial del panel verás el mensaje con toda su cronología.

Si algo no funciona, el error te dice por qué:

• origin_not_allowed – el dominio de la página no está en Sitios web permitidos (revisa el www y el puerto).
• captcha_required – la plantilla exige Turnstile, pero el widget no está en el formulario.
• invalid_template_params – un campo obligatorio está vacío o un valor no encaja con el parámetro.

¿Te has quedado sin créditos en una semana de mucho trabajo? El mensaje no se pierde: se acepta con el estado held y sale automáticamente en cuanto añades créditos.

Próximos pasos

• Envía una confirmación al visitante: añade la plantilla Respuesta automática: gracias por tu mensaje desde la galería y selecciónala en Ajustes → Entrega de la plantilla de contacto.
• ¿Usas React, Vue o Svelte? Los paquetes para cada framework incluyen un componente FrontmailForm listo para usar con el widget de Turnstile integrado; consulta la documentación del SDK.