Nuxt

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      surveyowlKey: '', // filled from NUXT_PUBLIC_SURVEYOWL_KEY
    },
  },
});

NUXT_PUBLIC_SURVEYOWL_KEY=YOUR_FORM_PUBLIC_KEY

<script setup lang="ts">
const { public: config } = useRuntimeConfig();
const endpoint = `https://api.surveyowl.co/v1/submit/${config.surveyowlKey}`;

const status = ref('');
const sending = ref(false);

async function onSubmit(event: Event) {
  const form = event.target as HTMLFormElement;
  sending.value = true;
  status.value = '';

  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.value = 'Thanks — your message was sent.';
  } catch (error) {
    status.value = error instanceof Error ? error.message : 'Something went wrong.';
  } finally {
    sending.value = false;
  }
}
</script>

<template>
  <main>
    <h1>Contact us</h1>

    <form @submit.prevent="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 />

      <button type="submit" :disabled="sending">
        {{ sending ? 'Sending…' : 'Send message' }}
      </button>
      <p role="status">{{ status }}</p>
    </form>
  </main>
</template>