FORMCARRY EXAMPLES

Vue Contact Form
with only Frontend Code

A Vue contact form collects a visitor's name, email, and message, then posts it to a form endpoint with no backend code. Create your free formcarry endpoint, paste it into one of the five Vue 3 examples below, and start receiving submissions by email in about 2 minutes.

With Fetch

With JSON

Uploading Files

With Toast

Field Validation

VS Code

Copy Code

1<template>
2  <p v-if="submitted">We've received your message, thank you for contacting us!</p>
3
4  <form v-else @submit.prevent="onSubmit">
5    <label for="name">Full Name</label>
6    <input id="name" type="text" v-model="name" required />
7
8    <label for="email">Email</label>
9    <input id="email" type="email" v-model="email" required />
10
11    <label for="message">Message</label>
12    <textarea id="message" v-model="message"></textarea>
13
14    <button type="submit" :disabled="sending">{{ sending ? "Sending..." : "Send" }}</button>
15
16    <p v-if="error">{{ error }}</p>
17  </form>
18</template>
19
20<script setup>
21import { ref } from "vue";
22
23const name = ref("");
24const email = ref("");
25const message = ref("");
26const sending = ref(false);
27const submitted = ref(false);
28const error = ref("");
29
30async function onSubmit() {
31  sending.value = true;
32  error.value = "";
33
34  const formData = new FormData();
35  formData.append("name", name.value);
36  formData.append("email", email.value);
37  formData.append("message", message.value);
38
39  try {
40    // replace with your formcarry endpoint URL
41    const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
42      method: "POST",
43      headers: { Accept: "application/json" },
44      body: formData
45    });
46
47    const data = await response.json();
48
49    if (response.ok && data.code === 200) {
50      submitted.value = true;
51    } else if (data.code === 422) {
52      error.value = data.message;
53    } else {
54      error.value = data.message || "Something went wrong, please try again.";
55    }
56  } catch (err) {
57    error.value = err.message;
58  } finally {
59    sending.value = false;
60  }
61}
62</script>

1<template>
2  <p v-if="submitted">We've received your message, thank you for contacting us!</p>
3
4  <form v-else @submit.prevent="onSubmit">
5    <label for="name">Full Name</label>
6    <input id="name" type="text" v-model="name" required />
7
8    <label for="email">Email</label>
9    <input id="email" type="email" v-model="email" required />
10
11    <label for="message">Message</label>
12    <textarea id="message" v-model="message"></textarea>
13
14    <button type="submit" :disabled="sending">{{ sending ? "Sending..." : "Send" }}</button>
15
16    <p v-if="error">{{ error }}</p>
17  </form>
18</template>
19
20<script setup>
21import { ref } from "vue";
22
23const name = ref("");
24const email = ref("");
25const message = ref("");
26const sending = ref(false);
27const submitted = ref(false);
28const error = ref("");
29
30async function onSubmit() {
31  sending.value = true;
32  error.value = "";
33
34  try {
35    // replace with your formcarry endpoint URL
36    const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
37      method: "POST",
38      headers: {
39        "Content-Type": "application/json",
40        Accept: "application/json"
41      },
42      body: JSON.stringify({ name: name.value, email: email.value, message: message.value })
43    });
44
45    const data = await response.json();
46
47    if (response.ok && data.code === 200) {
48      submitted.value = true;
49    } else if (data.code === 422) {
50      error.value = data.message;
51    } else {
52      error.value = data.message || "Something went wrong, please try again.";
53    }
54  } catch {
55    error.value = "Something went wrong, please try again.";
56  } finally {
57    sending.value = false;
58  }
59}
60</script>

1<template>
2  <p v-if="submitted">Thanks, we've received your message and your files!</p>
3
4  <form v-else @submit.prevent="onSubmit">
5    <label for="name">Full Name</label>
6    <input id="name" type="text" v-model="name" required />
7
8    <label for="email">Email</label>
9    <input id="email" type="email" v-model="email" required />
10
11    <label for="single-file">Upload a single file</label>
12    <input id="single-file" type="file" @change="file = $event.target.files[0]" />
13
14    <label for="multiple-files">Upload multiple files</label>
15    <input id="multiple-files" type="file" multiple @change="files = Array.from($event.target.files)" />
16
17    <label for="photo">Only accept jpg and png</label>
18    <input id="photo" type="file" accept=".jpg, .png" @change="photo = $event.target.files[0]" />
19
20    <button type="submit" :disabled="sending">{{ sending ? "Uploading..." : "Send" }}</button>
21
22    <p v-if="error">{{ error }}</p>
23  </form>
24</template>
25
26<script setup>
27import { ref } from "vue";
28
29const name = ref("");
30const email = ref("");
31const file = ref(null);
32const files = ref([]);
33const photo = ref(null);
34const sending = ref(false);
35const submitted = ref(false);
36const error = ref("");
37
38async function onSubmit() {
39  sending.value = true;
40  error.value = "";
41
42  const formData = new FormData();
43  formData.append("name", name.value);
44  formData.append("email", email.value);
45
46  if (file.value) formData.append("file", file.value);
47  // multiple files go under the same key
48  files.value.forEach((item) => formData.append("files", item));
49  if (photo.value) formData.append("photo", photo.value);
50
51  try {
52    // replace with your formcarry endpoint URL
53    // skip Content-Type, the browser sets the multipart boundary for you
54    const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
55      method: "POST",
56      headers: { Accept: "application/json" },
57      body: formData
58    });
59
60    const data = await response.json();
61
62    if (response.ok && data.code === 200) {
63      submitted.value = true;
64    } else if (data.code === 422) {
65      error.value = data.message;
66    } else {
67      error.value = data.message || "Something went wrong, please try again.";
68    }
69  } catch (err) {
70    error.value = err.message;
71  } finally {
72    sending.value = false;
73  }
74}
75</script>

1<template>
2  <form @submit.prevent="onSubmit">
3    <label for="name">Full Name</label>
4    <input id="name" type="text" v-model="name" required />
5
6    <label for="email">Email</label>
7    <input id="email" type="email" v-model="email" required />
8
9    <label for="message">Message</label>
10    <textarea id="message" v-model="message"></textarea>
11
12    <button type="submit" :disabled="sending">{{ sending ? "Sending..." : "Send" }}</button>
13  </form>
14</template>
15
16<script setup>
17// in main.js: import Toast from "vue-toastification";
18// import "vue-toastification/dist/index.css"; then app.use(Toast);
19import { ref } from "vue";
20import { useToast } from "vue-toastification";
21
22const name = ref("");
23const email = ref("");
24const message = ref("");
25const sending = ref(false);
26
27const toast = useToast();
28
29async function onSubmit() {
30  // dismiss any toast left over from a previous attempt
31  toast.clear();
32  sending.value = true;
33
34  try {
35    // replace with your formcarry endpoint URL
36    const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
37      method: "POST",
38      headers: {
39        "Content-Type": "application/json",
40        Accept: "application/json"
41      },
42      body: JSON.stringify({ name: name.value, email: email.value, message: message.value })
43    });
44
45    const data = await response.json();
46
47    if (response.ok && data.code === 200) {
48      toast.success("We've received your message, we'll be in touch soon!");
49      name.value = "";
50      email.value = "";
51      message.value = "";
52    } else if (data.code === 422) {
53      toast.error(data.message);
54    } else {
55      toast.error(data.message || "Something went wrong, please try again.");
56    }
57  } catch {
58    toast.error("Something went wrong, please try again.");
59  } finally {
60    sending.value = false;
61  }
62}
63</script>

1<template>
2  <p v-if="submitted">We've received your message, thank you for contacting us!</p>
3
4  <form v-else @submit.prevent="onSubmit">
5    <label for="name">Full Name</label>
6    <input id="name" type="text" v-model="name"
7      :class="{ 'field-error': fieldErrors.name }" @input="clearError('name')" />
8    <p v-if="fieldErrors.name" class="error-message">{{ fieldErrors.name }}</p>
9
10    <label for="email">Email</label>
11    <input id="email" type="email" v-model="email"
12      :class="{ 'field-error': fieldErrors.email }" @input="clearError('email')" />
13    <p v-if="fieldErrors.email" class="error-message">{{ fieldErrors.email }}</p>
14
15    <label for="message">Message</label>
16    <textarea id="message" v-model="message"
17      :class="{ 'field-error': fieldErrors.message }" @input="clearError('message')"></textarea>
18    <p v-if="fieldErrors.message" class="error-message">{{ fieldErrors.message }}</p>
19
20    <button type="submit" :disabled="sending">{{ sending ? "Sending..." : "Send" }}</button>
21
22    <p v-if="error">{{ error }}</p>
23  </form>
24</template>
25
26<script setup>
27import { ref, computed } from "vue";
28
29const name = ref("");
30const email = ref("");
31const message = ref("");
32const sending = ref(false);
33const submitted = ref(false);
34const error = ref("");
35const validationErrors = ref({});
36
37// map formcarry's 422 errors object to { field: message }
38const fieldErrors = computed(() =>
39  Object.fromEntries(
40    Object.entries(validationErrors.value).map(([field, err]) => [field, err.message])
41  )
42);
43
44function clearError(field) {
45  delete validationErrors.value[field];
46}
47
48async function onSubmit() {
49  sending.value = true;
50  error.value = "";
51  validationErrors.value = {};
52
53  try {
54    // replace with your formcarry endpoint URL
55    const response = await fetch("https://formcarry.com/s/YOUR-FORM-ID", {
56      method: "POST",
57      headers: {
58        "Content-Type": "application/json",
59        Accept: "application/json"
60      },
61      body: JSON.stringify({ name: name.value, email: email.value, message: message.value })
62    });
63
64    const data = await response.json();
65
66    if (response.ok && data.code === 200) {
67      submitted.value = true;
68    } else if (data.code === 422) {
69      validationErrors.value = data.errors || {};
70    } else {
71      error.value = data.message || "Something went wrong, please try again.";
72    }
73  } catch (err) {
74    error.value = err.message;
75  } finally {
76    sending.value = false;
77  }
78}
79</script>

Step-by-step guide

How to build Vue contact form

What is Vue

Vue is a popular JavaScript framework for building user interfaces. Its simplicity and scalability make it a great choice for both small and large-scale applications.

Formcarry integrates seamlessly with Vue. All examples on this page use Vue 3 with the Composition API (script setup), and the five tabs above cover fetch, JSON, file uploads, toast notifications, and server-side validation.

Before getting started

Visit the formcarry dashboard and create your form. In the Setup section of your form, copy your unique endpoint URL.

💡 Each form has its own unique endpoint URL, so make sure you use the right one, otherwise you will not receive messages.

Vue 3 contact form example with Fetch

Fetch is a native API, so there is nothing to install. The With Fetch tab above contains the full single-file component: v-model bindings for the fields, an

VS Code

Copy Code

1@submit.prevent

Copied example to clipboard 👏

handler that posts

VS Code

Copy Code

1FormData

Copied example to clipboard 👏

to your endpoint, a disabled button while sending, and an inline success or error message. Replace the endpoint URL with your own and the form is live.

Vue 3 contact form example with Axios

Prefer axios? Install it with

VS Code

Copy Code

1npm install axios

Copied example to clipboard 👏

and use the same component shape: the handler calls

VS Code

Copy Code

1axios.post

Copied example to clipboard 👏

with your fields and branches on the response

VS Code

Copy Code

1code

Copied example to clipboard 👏

(200 success, 422 validation error). Axios throws for non-2xx responses, so the error message comes from

VS Code

Copy Code

1err.response.data

Copied example to clipboard 👏

. See the With JSON tab for the fetch equivalent of a JSON submission.

Vue contact form FAQ

Can I make a Vue contact form without a backend?

Yes. Post the fields to a form endpoint such as formcarry with fetch or axios and you get every submission by email. You write zero server code.

How do I send an email from a Vue contact form?

Point the form at your formcarry endpoint; formcarry emails each submission to you and can send auto responses to the sender.

How do I validate a contact form in Vue 3?

Bind fields with v-model, check values in the submit handler before posting, and show inline errors. The Field Validation example above maps formcarry's server-side 422 validation errors under each field.