Build a working contact form for your Vue website. Send Vue form data to email using API in three simple steps. See example code below. No backend or server code needed.
Show steps ↓Free to get started
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 Vue Contact Form is easy as 1 2 3. Just follow the steps and you’re done.
Verify your email and create an access key.
By signing up, you agree to our terms and privacy policy as well as give consent to reach you for marketing purposes.
Use the following code example to create a form inside your Vue website.
<template>
<form @submit.prevent="submitForm">
<input type="text" name="name" v-model="name"/>
<input type="email" name="email" v-model="email"/>
<textarea name="message" v-model="message"></textarea>
<button type="submit">Send Message</button>
</form>
</template>
<script>
const WEB3FORMS_ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
export default {
data() {
return {
name: "",
email: "",
message: "",
};
},
methods: {
async submitForm() {
const response = await fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
access_key: WEB3FORMS_ACCESS_KEY,
name: this.name,
email: this.email,
message: this.message,
}),
});
const result = await response.json();
if (result.success) {
console.log(result);
}
},
},
};
</script>
Replace the access key with your actual key to start receiving email submissions.
const WEB3FORMS_ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
Vue Docs & code examples →Create your contact form for static website in minutes.
Create your FormGet started for free