Form Integration

Vue Contact Form for Static Websites

Create and launch Vue contact forms without any backend setup or JavaScript libraries. Just connect to FormBold’s API endpoint and start receiving submissions instantly.

Vue.js Contact Form with Backend API

Easily add a fully functional contact form to your Vue.js project without writing any backend code. FormBold makes it effortless—just insert your unique API endpoint into the form action, and you’re good to go.

vuejs.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>

    <!-- Response 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>
import { ref, reactive } from 'vue';

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',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: JSON.stringify(form),
    });

    const result = await response.json();
    if (response.ok) {
      statusMessage.value = result.message || 'Message sent successfully!';
      form.email = '';
      form.subject = '';
      form.message = '';
    } else {
      statusMessage.value = result.message || 'Something went wrong';
    }
  } 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 your Vue contact form with FormBold is straightforward and backend-free.

Create an Account

Paste the Action URL

Use the example form code in your Vue component and replace the form action with your unique endpoint.

Start Receiving Submissions

Submissions are securely sent to your FormBold dashboard, inbox, or connected apps like Slack and Notion.

Features

Key Features of FormBold

Get powerful backend features with minimal effort—ideal for Vue.js single-page apps and static sites.

No Backend Setup Needed

Skip Node.js servers or Firebase functions. Just connect to FormBold’s hosted API endpoint.

Instant Email Alerts

Receive form submissions instantly via email or tools like Slack, Telegram, or Google Sheets.

Spam Protection Included

Includes built-in server-side validation and optional Google reCAPTCHA for extra security.

File Upload Support

Allow users to attach files, automatically delivered with CDN-hosted download links.

Integrate with 5+ Apps

Easily connect your Vue contact form to Notion, Sheets, Slack, Telegram, and more—no code required.

FAQ's

Frequently Asked Questions

Common questions about adding a contact form to Vue.js with FormBold.

Just set the action attribute to your FormBold API endpoint and use method="POST". No extra packages or backend required.