Nuxt

Use NBForms with Nuxt

Add a working contact form to your Nuxt 3 or Nuxt 4 app without writing a single server route. NBForms handles the backend entirely — email notifications, spam filtering, and a submissions inbox — while Nuxt's auto-imports keep your component clean.

Official Nuxt docs

Nuxt

<template>
  <p v-if="success">Thanks — we'll be in touch!</p>
  <form v-else @submit.prevent="submit">
    <input type="hidden" name="_token" value="YOUR_TOKEN" />
    <label>Name</label>
    <input type="text" name="name" required />
    <label>Email</label>
    <input type="email" name="email" required />
    <label>Message</label>
    <textarea name="message" required></textarea>
    <button type="submit" :disabled="sending">
      {{ sending ? 'Sending…' : 'Send' }}
    </button>
  </form>
</template>

<script setup>
const sending = ref(false)
const success = ref(false)

async function submit(e) {
  sending.value = true
  const res = await fetch('https://api.nbforms.com', {
    method: 'POST',
    body: new FormData(e.target),
  })
  success.value = res.ok
  sending.value = false
}
</script>

Why NBForms?

Works with Nuxt 3 and Nuxt 4
No server routes or Nitro functions needed
Uses Nuxt auto-imports — no explicit ref import required
Compatible with SSR, SSG, and hybrid rendering modes

Add to your Nuxt app in minutes

Free tier included. No credit card. No backend setup — just copy the snippet above and go.

Get started free