Contact Form for Vue.js
Simple and powerful contact form for your Vue.js based website.
Contact Form Code for Vue.js
This is an example of a VueJS contact form, use this contact form with your project after adding your own FormBold API end-point to make it work. Vue.js is a progressive framework for building user interfaces. It combines the simplicity of JavaScript with the power of CSS to build websites faster, more efficiently, and with clean code.
<template>
<form @submit.prevent="submitForm">
<div>
<input
type="email"
placeholder="Email"
name="email"
v-model="email"
required
/>
</div>
<div>
<input
type="text"
placeholder="Subject"
name="subject"
v-model="subject"
required
/>
</div>
<div>
<textarea
name="message"
rows="6"
placeholder="Type your message"
v-model="message"
required
></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</template>
<script>
export default {
data() {
return {
email: "",
subject: "",
message: "",
};
},
methods: {
async submitForm() {
const response = await fetch("https://formbold.com/s/unique_form_id", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
email: this.email,
subject: this.subject,
message: this.message,
}),
});
const result = await response.json();
if (response.ok) {
alert(result.message);
this.$el.reset();
} else {
alert(response.message || "Something went wrong");
}
},
},
};
</script>