SvelteKit

PUBLIC_SURVEYOWL_KEY=YOUR_FORM_PUBLIC_KEY

<script lang="ts">
  import { PUBLIC_SURVEYOWL_KEY } from '$env/static/public';

  const endpoint = `https://api.surveyowl.co/v1/submit/${PUBLIC_SURVEYOWL_KEY}`;

  let status = $state('');
  let sending = $state(false);

  async function onsubmit(event: SubmitEvent) {
    event.preventDefault();
    const form = event.currentTarget as HTMLFormElement;
    sending = true;
    status = '';

    try {
      const response = await fetch(endpoint, {
        method: 'POST',
        body: new FormData(form),
      });
      const result = await response.json();

      if (!response.ok) {
        const message =
          typeof result.error === 'string' ? result.error : result.error?.message;
        throw new Error(message || 'Could not send the form.');
      }

      form.reset();
      status = 'Thanks — your message was sent.';
    } catch (error) {
      status = error instanceof Error ? error.message : 'Something went wrong.';
    } finally {
      sending = false;
    }
  }
</script>

<h1>Contact us</h1>

<form {onsubmit}>
  <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" disabled={sending}>
    {sending ? 'Sending…' : 'Send message'}
  </button>
  <p role="status">{status}</p>
</form>