Add a Contact Form to Your Nuxt Site

Nuxt can handle forms through server routes, but for a contact form you don’t need any backend logic. staticq accepts the POST directly — no /server/api/ handler required.

Code example

Create a page at pages/contact.vue:

<template>
  <main>
    <h1>Contact Us</h1>

    <form action="https://api.staticq.app/q/your-form-slug" 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>

      <button type="submit">Send Message</button>
    </form>
  </main>
</template>

<script setup lang="ts">
useHead({
  title: 'Contact Us',
});
</script>

The form submits as a standard browser POST. No useFetch, no $fetch, no server route — the browser handles everything.

Setup steps

1. Create a form in the staticq dashboard. Name it and configure your notification email.
2. Copy the endpoint — it looks like https://api.staticq.app/q/your-form-slug.
3. Set the form action in your Vue component template to point at the endpoint.
4. Run and test. Start your dev server with npm run dev, submit the form, and verify the submission shows up in your dashboard.

Get started

staticq is free to start with — no credit card required. Create your first form and have submissions flowing in minutes. See pricing for plan details.