Vue + FormKit

Send the data

JSON submission
File upload

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

const status = ref('');

const handleSubmit = async (data) => {
  const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
    redirect: 'manual',
  });

  status.value = response.status === 303 || response.ok
    ? 'Submitted!'
    : 'Submission failed.';
};
</script>

<template>
  <FormKit type="form" submit-label="Send" @submit="handleSubmit">
    <FormKit name="name" label="Name" validation="required" />
    <FormKit name="email" label="Email" validation="required|email" />
    <FormKit name="message" type="textarea" label="Message" validation="required" />
  </FormKit>
  <p v-if="status">{{ status }}</p>
</template>

JSON is ideal when you do not need file uploads.

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

const status = ref('');

const handleSubmit = async (_data, node) => {
  const formEl = node.el; // underlying form element
  const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
    method: 'POST',
    body: new FormData(formEl),
    redirect: 'manual',
  });

  status.value = response.status === 303 || response.ok
    ? 'Uploaded!'
    : 'Upload failed.';
};
</script>

<template>
  <FormKit type="form" submit-label="Upload" @submit="handleSubmit">
    <FormKit name="name" label="Name" validation="required" />
    <FormKit name="resume" type="file" label="Resume" />
  </FormKit>
  <p v-if="status">{{ status }}</p>
</template>

This approach forwards the underlying form element as FormData.

Getting Started

Integrations

File Uploads

Form Settings

Redirects

Submissions

Security

Self-Hosting

CMS Platforms

FAQ