Vue Integration Guide
Complete guide to integrate MyFormConnect with Vue
Setup time: 5-10 minutes
Difficulty: Easy
Compatible versions: Vue 3
Add a MyFormConnect contact form to a Vue 3 app with the Composition API. Submit with FormData and fetch — no custom backend required.
Prerequisites
- A MyFormConnect account — sign up here
- A form created in your MyFormConnect dashboard with its UUID copied
- A Vue 3 project (Vite or similar)
-
Basic familiarity with the Composition API (
ref,<script setup>)
Integration Methods
Composition API + fetch
5 minutes
Easy
Build a contact form with <script setup>, then POST FormData to MyFormConnect. Do not JSON.stringify the fields.
1
Copy your form UUID
You need the UUID MyFormConnect assigned to your form.
- Log in to your MyFormConnect dashboard
- Open the form you want to use
- Copy the form UUID (e.g.
550e8400-e29b-41d4-a716-446655440000)
Important Note
Using the wrong UUID sends submissions to the wrong form.
2
Add a Vue 3 contact form component
Create a component that posts
FormData to your form endpoint.
- Create
ContactForm.vue(or add the form to an existing view) - Replace
YOUR_FORM_UUIDwith your form UUID - Import and render the component on your contact page
<script setup>
import { ref } from 'vue'
const endpoint = 'https://myformconnect.io/f/YOUR_FORM_UUID'
const status = ref('idle')
const errorMessage = ref('')
async function onSubmit(e) {
e.preventDefault()
status.value = 'loading'
errorMessage.value = ''
try {
const res = await fetch(endpoint, {
method: 'POST',
headers: {
Accept: 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: new FormData(e.target)
})
if (!res.ok) throw new Error('Submission failed')
status.value = 'success'
e.target.reset()
} catch {
status.value = 'error'
errorMessage.value = 'Something went wrong. Please try again.'
}
}
</script>
<template>
<p v-if="status === 'success'">Thanks — we will be in touch soon.</p>
<form v-else action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true" @submit="onSubmit">
<label for="name">Name *</label>
<input id="name" name="name" type="text" required />
<label for="email">Email *</label>
<input id="email" name="email" type="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit" :disabled="status === 'loading'">
{{ status === 'loading' ? 'Sending…' : 'Send Message' }}
</button>
<p v-if="status === 'error'">{{ errorMessage }}</p>
</form>
</template>Important Note
Use
new FormData(e.target) — do not set Content-Type manually. Do not JSON.stringify the payload.
3
Run and verify
Submit a test entry and confirm it appears in MyFormConnect.
- Start your Vue app and open the contact page
- Fill in the form and click Submit
- Check your MyFormConnect dashboard under Leads or Form Responses
Important Note
If Domain Restriction is enabled, add your local origin (e.g.
http://localhost:5173) in the dashboard.
Related Integrations
References & Official Documentation
Next Steps
Configure MyFormConnect
- Set up your timezone
- Configure lead notifications
- Set up advanced spam detection
- Add team members to your account
Advanced Features
- Use our custom form templates
- Try AI Insights for Leads
- Integrate with your CRM
- Set up automated workflows