How to Add a Contact Form to Vue.js (No Backend Required)

Create a FormsList endpoint

Sign up at formslist.com, create a new form, and copy your endpoint URL.

Create the ContactForm component

Create a Vue component with ref() and v-model bindings.

<script setup>
import { ref } from 'vue'
const name = ref('')
const email = ref('')
const message = ref('')
const submitted = ref(false)

async function handleSubmit() {
  const res = await fetch('https://formslist.com/f/YOUR_HASH', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ name: name.value, email: email.value, message: message.value }),
  })
  if (res.ok) submitted.value = true
}
</script>

<template>
  <p v-if="submitted">Thanks! We'll be in touch.</p>
  <form v-else @submit.prevent="handleSubmit">
    <input v-model="name" placeholder="Name" required />
    <input v-model="email" type="email" placeholder="Email" required />
    <textarea v-model="message" placeholder="Message" required />
    <button type="submit">Send</button>
  </form>
</template>

Add to your page

Import and use <ContactForm /> in any page.

Test

Submit a test message and verify in your FormsList dashboard.