How to add a backend to a Vue contact form

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

§ 01 · Context Why it still needs a backend.

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.

The form POSTs to an endpoint URL, the submission is stored, and notifications are sent according to the endpoint settings. It's a safer, more maintainable replacement for fragile mailto: patterns or one-off scripts that break the first time your host changes.

§ 02 · Why More than just an email alert.

When the backend stores every submission first and notifies second, you get three things a raw SMTP relay can't give you:

And because the submission is stored, delivery failures stay visible instead of disappearing into email logs. If a notification bounces, you can see it, retry it, and still have the lead.

§ 03 · Setup How to connect it.

None of these steps involve writing server code. First, make sure you have the essentials in place:

§ 04 · Example Keep the form simple.

There's nothing special about the markup. The only required change is the action attribute. The hidden _honeypot input is the one spam-prevention field worth adding by hand:

<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>

§ 05 · FAQ Common questions.