Send Vue form submissions to an endpoint
v-model the fields, POST the JSON on submit. Works with the Options API, Composition API, and inside Nuxt pages.
- Free plan
- No plugin to install
- Set up in minutes
Vue in three steps.
- 1
Create a form and copy its Public Key
Sign up, create the form, and copy the Public Key into an environment variable your Vue build exposes.
- 2
Bind fields and POST on submit
Collect the answers into a reactive object and fetch the form-specific endpoint from your submit handler.
- 3
Reset the form on success
The 201 response is your cue to clear the state and show a thank-you. Responses are already in the inbox.
Copy this into Vue.
Swap in your form’s key and submissions start landing in your inbox.
<script setup>
const form = reactive({ email: "", message: "" });
const sent = ref(false);
async function onSubmit() {
const res = await fetch("https://api.surveyowl.co/v1/submit/" + encodeURIComponent(import.meta.env.VITE_FORM_PUBLIC_KEY), {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify(form),
});
if (res.ok) sent.value = true;
}
</script>
<template>
<form @submit.prevent="onSubmit">
<input v-model="form.email" type="email" required />
<textarea v-model="form.message"></textarea>
<button type="submit">Send</button>
</form>
</template>What people build with it.
Contact or signup form in a Vue SPA.
Vue 3 Composition Endpoint forms with useTemplateRef or v-model state.
Forms embedded in a larger Vue app next to existing features.
Vue forms, answered.
1. Create a form and copy its Public Key: Sign up, create the form, and copy the Public Key into an environment variable your Vue build exposes. 2. Bind fields and POST on submit: Collect the answers into a reactive object and fetch the form-specific endpoint from your submit handler. 3. Reset the form on success: The 201 response is your cue to clear the state and show a thank-you. Responses are already in the inbox.
Vue’s reactivity makes the mapping literal: the object you already bind with v-model is the JSON body the endpoint expects. One async submit handler and the form is wired to the same inbox a hosted form would use.
Object keys in the reactive state become question labels in the inbox, exactly like input names in the HTML version. Rename a key and the next response arrives under the new label. No schema to migrate.