JavaScript form

<form id="contact-form">
  <label for="name">Name</label>
  <input id="name" name="name" required />

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

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

  <button type="submit">Send message</button>
  <p id="form-status" role="status"></p>
</form>

const form = document.querySelector('#contact-form');
const status = document.querySelector('#form-status');
const button = form.querySelector('button[type="submit"]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  button.disabled = true;
  status.textContent = 'Sending…';

  const body = Object.fromEntries(new FormData(form));

  try {
    const response = await fetch('https://api.surveyowl.co/v1/submit/YOUR_FORM_PUBLIC_KEY', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });

    const result = await response.json();
    const error = typeof result.error === 'string'
      ? result.error
      : result.error?.message;

    if (!response.ok) throw new Error(error || 'Could not send the form.');

    form.reset();
    status.textContent = 'Thanks — your message was sent.';
  } catch (error) {
    status.textContent = error.message;
  } finally {
    button.disabled = false;
  }
});