แบ็กเอนด์แบบฟอร์มที่เชื่อถือได้ โดยไม่ต้องปวดหัว SMTP

<form id="contact-form">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="you@domain.com" required />
  <textarea name="message" placeholder="How can we help?" required></textarea>

  <!-- Invisible Honeypot Field (Bots fill this; real users ignore it) -->
  <input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

  <button type="submit">Send Message</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const formData = new FormData(form);

  const payload = {
    fields: {
      name: formData.get('name'),
      email: formData.get('email'),
      message: formData.get('message')
    },
    honeypot: formData.get('_gotcha') || ''
  };

  const response = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(payload)
  });

  if (response.ok) {
    alert('Thank you! Your message was received.');
    form.reset();
  }
});
</script>

curl -X POST "https://www.lugatu.com/api/v1/forms/YOUR_FORM_GUID/submissions" \
  -H "Authorization: Bearer lug_live_your_secret_api_key" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: $(uuidgen)" \
  -d '{
    "fields": {
      "name": "Alex Taylor",
      "email": "alex@studio.design",
      "message": "Project consultation request from custom backend service."
    }
  }'