Contact form for Nuxt
A Nuxt.js code example to add contact form to your website with the help of FormBold.
Contact Form Code Example for Nuxt
Nuxt.js is a framework for creating Vue.js applications with server-side rendering and a folder-based page and component structure. This is a basic example of a contact form that can be used with yout nuxt website by adding your own FormBold API.
<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>