Form Integration

Nuxt Contact Form for Web Apps

Easily create a contact form in your Nuxt app—no backend, JavaScript libraries, or server config required. Just use FormBold’s API endpoint to start collecting submissions instantly.

Nuxt JS Contact Form with Backend API

Add a fully working contact form to your Nuxt.js project without writing any backend code. With FormBold, all it takes is a few steps—just add your unique API endpoint to the form’s action attribute, and you're ready to launch.

nuxtjs.html

<template>
  <form @submit.prevent="submitForm" class="flex flex-col gap-4 max-w-[452px] mx-auto">
    <!-- Email Address -->
    <div class="flex flex-col gap-2">
      <label for="email" class="text-sm font-medium text-gray-700">
        Email Address<span class="ml-0.5 text-red-500">*</span>
      </label>
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        v-model="form.email"
        required
        class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      />
    </div>

    <!-- Subject -->
    <div class="flex flex-col gap-2">
      <label for="subject" class="text-sm font-medium text-gray-700">
        Subject<span class="ml-0.5 text-red-500">*</span>
      </label>
      <input
        type="text"
        id="subject"
        placeholder="Enter your subject"
        v-model="form.subject"
        required
        class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      />
    </div>

    <!-- Message -->
    <div class="flex flex-col gap-2">
      <label for="message" class="text-sm font-medium text-gray-700">
        Message<span class="ml-0.5 text-red-500">*</span>
      </label>
      <textarea
        id="message"
        rows="5"
        placeholder="Type your message..."
        v-model="form.message"
        required
        class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
      ></textarea>
    </div>

    <!-- Submit Button -->
    <button
      type="submit"
      :disabled="loading"
      class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
    >
      {{ loading ? 'Submitting...' : 'Submit Message' }}
    </button>

    <!-- Status Message -->
    <p
      v-if="statusMessage"
      class="rounded-xl p-3 text-center text-sm font-medium bg-gray-50 text-gray-800"
    >
      {{ statusMessage }}
    </p>
  </form>
</template>

<script setup>
const form = reactive({
  email: '',
  subject: '',
  message: '',
});

const loading = ref(false);
const statusMessage = ref('');

async function submitForm() {
  loading.value = true;
  try {
    const response = await $fetch('https://formbold.com/s/FORM_ID', {
      method: 'POST',
      body: form,
    });
    statusMessage.value = response.message || 'Message sent successfully!';
    form.email = '';
    form.subject = '';
    form.message = '';
  } catch (err) {
    statusMessage.value = 'Failed to submit form.';
  } finally {
    loading.value = false;
    setTimeout(() => (statusMessage.value = ''), 4000);
  }
}
</script>

How it works

See How It Works

Setting up a contact form in Nuxt with FormBold is quick and backend-free.

Create an Account

Paste the Action URL

Use the sample form code inside your Nuxt component and update the action with your FormBold endpoint.

Start Receiving Submissions

Submissions are sent securely to your dashboard, inbox, or any connected apps.

Features

Key Features of FormBold

Powerful backend features for your Nuxt JS forms—without the complexity.

No Backend Needed

Works seamlessly with both static and server-rendered Nuxt sites.

Instant Notifications

Receive submissions directly in your email, Slack, Telegram, Google Sheets, and more.

Spam & Bot Protection

Includes server-side validation and optional Google reCAPTCHA to keep bots away.

File Upload Ready

Allow users to upload files and receive CDN-hosted download links with every submission.

Connect with 5+ Apps

Integrate your form with productivity tools like Notion, Sheets, and Slack—no coding required.

FAQ's

Frequently Asked Questions

Get answer to common questions about building a contact form in Nuxt with FormBold.

Just add your FormBold API endpoint to the form’s action and use method="POST". No JavaScript or backend needed.