Framework guide

Vue

Vue, Nuxt (static or SSR), or Vite. The form posts directly to ShipMyForm, so there's no API route to write.

Prefer a composable?: Install @shipmyform/vue for a useSubmit composable with reactive submitting / succeeded / error state, see the JavaScript SDK.

The simplest version

ContactForm.vue

<template>
  <form action="https://shipmyform.com/f/frm_8Kx2mQ9pL4vN" method="POST">
    <input type="email" name="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="Your message"></textarea>
    <input type="text" name="_gotcha" style="display:none" tabindex="-1" />
    <button type="submit">Send</button>
  </form>
</template>

Stay on the page (fetch)

Post with Accept: application/json and toggle a reactive success message.

ContactForm.vue

<script setup>
import { ref } from "vue";
const sent = ref(false);

async function submit(e) {
  const res = await fetch("https://shipmyform.com/f/frm_8Kx2mQ9pL4vN", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(e.target),
  });
  sent.value = res.ok;
}
</script>

<template>
  <p v-if="sent">Thanks, we'll be in touch!</p>
  <form v-else @submit.prevent="submit">
    <input type="email" name="email" required />
    <textarea name="message"></textarea>
    <button type="submit">Send</button>
  </form>
</template>

Give every input a clear name: that's what appears in your dashboard and connectors.