Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All guides

Vue guide

Vue contact form powered by Formserve

Submit a Vue form to Formserve while keeping your current UI intact.

No backend API route Honeypot spam trap Works with any host

Overview

What you are building

Vue makes it easy to keep the user experience inside the component while Formserve handles the backend. Use @submit.prevent, send FormData to your endpoint, and update local status after the request.

Requirements

Before you start

Vue submit handler

Use @submit.prevent to avoid browser navigation.

Template refs

Read the form element through a ref or event target.

Named fields

Each input in the template needs a name attribute.

Status state

Track loading, success, and error messages.

Setup steps

Connect the form

1

Keep the Vue template

Preserve the component styling and only wire up submission behavior.

2

Add hidden spam field

Add _honeypot as a hidden input in the form template.

3

Submit FormData

Use fetch with method POST and the FormData object.

4

Reset and show feedback

Reset the form after success and show a message in the component.

Code

Minimal HTML contract

Every framework eventually sends these same fields. If your tool generates a component, ask it to preserve styling and only adjust the submission behavior. 

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

const status = ref("");

async function submit(event) {
  const response = await fetch("https://formserve.io/f/YOUR_ENDPOINT_KEY", {
    method: "POST",
    body: new FormData(event.target)
  });

  status.value = response.ok ? "Thanks, we received your message." : "Please try again.";
  if (response.ok) event.target.reset();
}
</script>

<template>
  <form @submit.prevent="submit">
    <input name="_honeypot" tabindex="-1" autocomplete="off" class="hidden" />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button type="submit">Send</button>
    <p v-if="status">{{ status }}</p>
  </form>
</template>

Testing checklist

  • ✓ Confirm @submit.prevent is on the form.
  • ✓ Check v-model fields still have name attributes.
  • ✓ Render status near the submit button.
  • ✓ Test after deployment.

Common mistakes

  • ! Relying on v-model names instead of input name attributes.
  • ! Submitting JSON when FormData would preserve form behavior.
  • ! Forgetting to reset the form after success.
  • ! Hiding errors from the user.