Nuxt

Nuxt 3 runs on Vue, so the @formstork/vue composable drops straight into any <script setup> component. You get a working contact form in one file, with no server code to maintain.

Install

npm install @formstork/vue

Add the component

Create a ContactForm.vue file under components/. Nuxt auto-imports it, so you can drop <ContactForm /> into any page.

<script setup>
import { useFormstork } from "@formstork/vue";

const { submit, isSubmitting, isSuccess, message } = useFormstork({
  accessKey: "YOUR_ACCESS_KEY",
});
</script>

<template>
  <p v-if="isSuccess">Thanks, {{ message }}</p>
  <form v-else @submit="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button :disabled="isSubmitting">
      {{ isSubmitting ? "Sending..." : "Send" }}
    </button>
  </form>
</template>

The composable reads the form fields, posts them for you, and exposes reactive refs: isSubmitting, isSuccess, and message.

Step by step

1. Grab a free access key from the Formstork dashboard at app.formstork.com.
2. Install the composable: npm install @formstork/vue.
3. Add the ContactForm.vue file above under components/, then swap YOUR_ACCESS_KEY for your key.
4. Place <ContactForm /> in a page such as pages/contact.vue.
5. Run npm run dev, send a test message, and watch it land in your dashboard.

The free plan covers 250 submissions a month.

Without the composable

If you would rather not add a dependency, post the form directly with fetch. This works in any Nuxt component with no imports:

<script setup>
async function onSubmit(e) {
  e.preventDefault();
  await fetch("https://api.formstork.com/submit", {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
}
</script>

<template>
  <form @submit="onSubmit">
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button>Send</button>
  </form>
</template>