Situs statis masih memerlukan formulir kontak, dan opsi yang jujur ​​lebih sedikit dan lebih baik daripada yang disarankan oleh thread stackOverflow. Polanya sama untuk semuanya: validasi browser tetap menjadi validator, dan tujuannya hanya berubah.

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);

Tangga tujuan, paling mudah terakhir

  • Metode GET ke halaman pencarian atau hasil: formulir kontak statis yang paling memaafkan, dan ini adalah perilaku pencarian situs ini sendiri.
  • mailto dengan subjek dan isi yang telah dibuat sebelumnya: tidak ada jalur server di mana pun, tidak ada pengorbanan privasi di luar klien email itu sendiri.
  • Titik akhir formulir publik sosial atau CRM Anda: pihak ketiga mengambil datanya, jadi bacalah halaman privasi tersebut dua kali sebelum memasangnya.
  • Layanan formulir yang disediakan host: beberapa host statis mengirimkan fitur formulir (Netlify adalah salah satunya); itu adalah backend nyata yang dipasang di bawah URL Anda, dan cerita spamnya disertakan dengan host Anda.

Lapisan validasi

  1. required, type="email", minlength: browser constraints first, error rendering for free.
  2. reportValidity() untuk jalur terprogram: satu panggilan memunculkan gelembung kesalahan asli browser di tempat formulir ditinggalkan.
  3. Lapisan visual khusus di atas saat desain memerlukannya: artikel validitas formulir situs ini memiliki resep CSS.
  4. Bidang Honeypot pada kasus backend dan batas tarif dari host; statis bukan berarti tidak dapat dikirimi spam, ucapkan dengan lantang.

Ringkasan yang sangat gacor: browser memvalidasi, platform mengangkut, dan langkah pembangunan Anda tidak menghasilkan apa-apa. Pustaka formulir kontak adalah gejala lupa bahwa elemen formulir tidak pernah hilang.