Formulario de contacto con respuesta automática

La guía completa (un formulario de contacto que te envía los mensajes y da las gracias al visitante) ahora es el Tutorial. Los pasos más importantes para esta receta:

Crea la plantilla de contactoPaso 2 del tutorial: la plantilla Formulario de contacto de la galería.

Añade una respuesta automáticaPaso 3 del tutorial: un correo de agradecimiento vinculado en Ajustes → Entrega.

Crea el formularioPaso 5 del tutorial: HTML normal con sendForm() y Turnstile.

Cuando ya funcione, vale la pena echar un vistazo a estos extras.

Guarda a los remitentes como contactos

La plantilla Formulario de contacto de la galería ya tiene activada la Recogida de contactos (en la plantilla, Ajustes → Recogida de contactos, Recoger contactos de esta plantilla) con Parámetro del correo email y Parámetro del nombre name. Cada mensaje enviado correctamente crea o actualiza una entrada en Contactos. Añade más parámetros en Campos adicionales, separados por comas, para guardarlos también con el contacto. Consulta Recogida de contactos.

Pide algo más que un mensaje

Añade campos a la plantilla en la pestaña Parámetros y luego añade a tu formulario campos con el mismo name. Los valores del formulario llegan como texto y Frontmail los convierte al tipo declarado, por ejemplo:

Parámetro	Tipo	Campo del formulario
`topic`	`enum` con Valores permitidos `sales, support, other`	`<select name="topic">`
`newsletter`	`boolean`, Valor predeterminado `false`	`<input type="checkbox" name="newsletter">`: marcado se convierte en `true`, sin marcar usa el valor predeterminado

{{#if newsletter}}<p>Quiere recibir el boletín.</p>{{/if}}

Detalles: conversión de los valores de formularios.

Muestra los errores de validación junto a los campos

Cuando un valor incumple una regla de un parámetro (correo no válido, falta un campo obligatorio, mensaje demasiado corto), la solicitud falla con invalid_template_params y no se envía nada. El error enumera todos los problemas, así que puedes mostrar cada uno en el campo correspondiente:

try {
  await frontmail.sendForm(null, 'tpl_…', form);
} catch (err) {
  form.querySelectorAll('.field-error').forEach((el) => (el.textContent = ''));
  for (const issue of err.details?.issues ?? []) {
    // p. ej. <small class="field-error" data-for="email"></small> bajo cada campo
    const el = form.querySelector(`.field-error[data-for="${issue.param}"]`);
    if (el) el.textContent = issue.message;
  }
}

Consulta Gestión de errores.

Protégelo contra el spam

Los sitios web permitidos y la CAPTCHA de Turnstile (paso 4 del tutorial) frenan la mayoría de los abusos. Para un formulario público con mucho tráfico, además puedes:

activar Bloquear navegadores headless en Seguridad → Protección contra abusos,
bajar el Rate limit por IP,
rellenar una Lista de bloqueo con direcciones o dominios de los que nunca quieras saber nada,
añadir un Servicio de respaldo a la plantilla (Ajustes → Entrega) para que una caída del proveedor no retrase tus mensajes.

Consulta Protección contra bots.