Use Vue's reactive data binding with Flowqen's API. Works with Vue 2, Vue 3, Nuxt, and any Vue-based framework.
Go to flowqen.com/create and create a form in 10 seconds. No account needed. Copy the form ID from the URL.
The simplest approach — just paste this HTML into your Vue.js project:
<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>Use Vue.js's native patterns for a better developer experience:
<template>
<form @submit.prevent="handleSubmit">
<input v-model="name" type="text" placeholder="Name" required />
<input v-model="email" type="email" placeholder="Email" required />
<textarea v-model="message" placeholder="Message" required />
<p v-if="status">{{ status }}</p>
<button type="submit">Send</button>
</form>
</template>
<script setup>
import { ref } from "vue";
const name = ref("");
const email = ref("");
const message = ref("");
const status = ref("");
async function handleSubmit() {
const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: name.value, email: email.value, message: message.value }),
});
status.value = res.ok ? "Sent!" : "Error";
}
</script>Submit a test entry. Go to your Flowqen dashboard to see the submission. Set up email notifications, Slack alerts, or any of our 22+ integrations.