AJAX Contact Form (No Page Reload)

<form id="contact-form" action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Send Message</button>
  <p id="form-status" style="display:none"></p>
</form>

<script>
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(form);

    try {
      const response = await fetch(form.action, {
        method: 'POST',
        body: data,
      });

      if (response.ok) {
        status.textContent = 'Message sent successfully!';
        status.style.display = 'block';
        status.style.color = '#16a34a';
        form.reset();
      } else {
        throw new Error('Failed to send');
      }
    } catch (error) {
      status.textContent = 'Something went wrong. Please try again.';
      status.style.display = 'block';
      status.style.color = '#dc2626';
    }
  });
</script>