Vue (Vanilla)

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

const status = ref('');
const isSubmitting = ref(false);

const handleSubmit = async (event) => {
  event.preventDefault();
  status.value = '';
  isSubmitting.value = true;

  const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
    method: 'POST',
    body: new FormData(event.currentTarget),
    redirect: 'manual',
  });

  status.value = response.status === 303 || response.ok
    ? 'Submitted!'
    : 'Submission failed.';

  isSubmitting.value = false;
};
</script>

<template>
  <form @submit="handleSubmit">
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? 'Sending...' : 'Send' }}
    </button>
    <p v-if="status">{{ status }}</p>
  </form>
</template>