Add a working contact form to Nuxt 3 using FormsList.
TL;DR
Add a contact form to Nuxt.js using $fetch and a FormsList endpoint. No Nitro API routes needed — create a form endpoint at formslist.com, add a few lines of code, and start receiving submissions with spam filtering and email alerts.
Sign up at formslist.com and create a form.
Use Nuxt 3 auto-imported composables.
<script setup>
const name = ref('')
const email = ref('')
const message = ref('')
const submitted = ref(false)
async function handleSubmit() {
await $fetch('https://formslist.com/f/YOUR_HASH', {
method: 'POST',
headers: { Accept: 'application/json' },
body: { name: name.value, email: email.value, message: message.value },
})
submitted.value = true
}
</script>
<template>
<p v-if="submitted">Thanks!</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>Use the component in any pages/*.vue file.
Deploy and test.
Add a working contact form to any Vue.js app using FormsList.
Learn moreLearn how to add a working contact form to your Next.js application in minutes. No backend code required — just create your form, point it at FormsList, and start receiving submissions by email.
Learn moreSet up your form backend in under a minute. No server required, no complex configuration — just a simple endpoint for your forms.