Build a working contact form for your Nuxt.js website. Send Nuxt.js form data to email using API in three simple steps. See example code below. No backend or server code needed.
Show steps ↓No Signup required
You already know! Setting up form backend is pain. Web3Forms works without any Server or backend code.
All emails are sent directly to your email address. We never store your form submissions.
Web3Forms is an API based form backend. We can seamlessly integrate to any custom design or style.
Creating Nuxt.js Contact Form is easy as 1 2 3. Just follow the steps and you’re done.
Access key will be sent to your email address.
Use the following code example to create a form inside your Nuxt.js website.
<template>
<form @submit.prevent="submitForm">
<input type="text" name="name" v-model="form.name"/>
<input type="email" name="email" v-model="form.email"/>
<textarea name="message" v-model="form.message"></textarea>
<button type="submit">Send Message</button>
</form>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({
access_key: "YOUR_ACCESS_KEY_HERE",
subject: "New Submission from Web3Forms",
name: "",
email: "",
message: "",
});
const result = ref("");
const status = ref("");
const submitForm = async () => {
result.value = "Please wait...";
try {
const response = await $fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: form.value,
});
console.log(response); // You can remove this line if you don't need it
result.value = response.message;
if (response.status === 200) {
status.value = "success";
} else {
console.log(response); // Log for debugging, can be removed
status.value = "error";
}
} catch (error) {
console.log(error); // Log for debugging, can be removed
status.value = "error";
result.value = "Something went wrong!";
} finally {
// Reset form after submission
form.value.name = "";
form.value.email = "";
form.value.message = "";
// Clear result and status after 5 seconds
setTimeout(() => {
result.value = "";
status.value = "";
}, 5000);
}
};
</script>
Replace the access key with your actual key to start receiving email submissions.
access_key: "YOUR_ACCESS_KEY_HERE",
Nuxt.js Docs & code examples →Create your contact form for static website in minutes.
Create your Access KeyNo Signup required