Un sitio estático todavía necesita un formulario de contacto, y las opciones honestas son menos y mejores que las que implica cualquier hilo de stackOverflow. El patrón es el mismo para todos ellos: la validación del navegador sigue siendo el validador y el destino solo cambia.

const form = document.querySelector("#contact");
if (!form.reportValidity()) return; // browser already showed the errors

const data = Object.fromEntries(new FormData(form));
const body = JSON.stringify(data, null, 2);

// Destination A: the mail object, zero backend, opens the reader
location.href =
  "mailto:hello@example.com" +
  "?subject=" + encodeURIComponent(data.subject) +
  "&body=" + encodeURIComponent(body);

La escalera de destino, la última más fácil

  • Método GET para una página de búsqueda o de resultados: el formulario de contacto estático más indulgente y es el comportamiento de búsqueda propio de este sitio.
  • mailto con asunto y cuerpo prediseñados: sin líneas de servidor en ninguna parte, sin compensación de privacidad más allá del propio cliente de correo.
  • Los puntos finales del formulario público de su red social o CRM: el tercero toma los datos, así que lea esa página de privacidad dos veces antes de conectarla.
  • Servicios de formularios proporcionados por el host: algunos hosts estáticos incluyen una función de formularios (Netlify es una de ellas); Es un backend real instalado en su URL y su historia de spam viene con su host.

La capa de validación

  1. required, type="email", minlength: browser constraints first, error rendering for free.
  2. reportValidity() para rutas programáticas: una llamada muestra la burbuja de error nativa del navegador donde quedó el formulario.
  3. Una capa visual personalizada en la parte superior cuando el diseño lo necesita: el artículo sobre validez de formulario de este sitio tiene la receta CSS.
  4. Campos de Honeypot en casos de backend y límites de velocidad del host; Estático no significa que no se pueda enviar spam, dígalo en voz alta.

El resumen es genial: el navegador valida, la plataforma transporta y el paso de compilación no envía nada. Las bibliotecas de formularios de contacto son un síntoma de olvidar que el elemento del formulario nunca salió.