VUE Integration

Overview

Integrate serverless forms into your Vue 3 projects using Vue Composition API and reactive state variables.

Build with AI (LLM Prompt)

promptprompt

Create a Vue 3 template containing a contact form using ref for state, and posting to:
https://voieform.com/f/<YOUR-FORM-API-KEY-HERE>

What you'll get out of the box:

Composition API friendly using ref()

Auto-handles validation states reactively

Support for single-file components (.vue)

Multipart file upload compatibility

Setup instructions

bashbash

# No installation required. Relies on standard Vue 3 Composition API fetch.

Code Example

javascriptjavascript

<template>
  <div v-if="success" class="text-emerald-600 font-bold">
    Thank you for your inquiry!
  </div>
  
  <form v-else @submit.prevent="handleSubmit" class="space-y-4 max-w-sm">
    <input v-model="form.email" type="email" placeholder="Your Email" required class="border p-2 w-full rounded" />
    <textarea v-model="form.message" placeholder="Message" required class="border p-2 w-full rounded"></textarea>
    
    <button type="submit" :disabled="loading" class="bg-blue-600 text-white px-4 py-2 rounded w-full">
      {{ loading ? 'Sending...' : 'Submit' }}
    </button>
    <p v-if="error" class="text-red-500 text-xs">{{ error }}</p>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({ email: '', message: '' });
const loading = ref(false);
const error = ref(null);
const success = ref(false);

const handleSubmit = async () => {
  loading.value = true;
  error.value = null;
  
  try {
    const response = await fetch('https://voieform.com/f/YOUR_FORM_API_KEY', {
      method: 'POST',
      body: JSON.stringify(form.value),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      }
    });
    
    if (response.ok) {
      success.value = true;
    } else {
      const data = await response.json();
      error.value = data.message || 'Submission failed.';
    }
  } catch (err) {
    error.value = 'Connection error.';
  } finally {
    loading.value = false;
  }
};
</script>

Need help?

Contact Support