Add a Gridsome contact form with a Vue 2 component
Gridsome runs on Vue 2, so its contact form uses the Options API rather than script setup. Put the fields in data, post to FormThunder with fetch from a method, and read the key from a GRIDSOME_ variable. FormThunder stores each submission and emails you, so the site stays static.
Updated
The Gridsome code
GRIDSOME_FORMTHUNDER_KEY=YOUR_ACCESS_KEY<template>
<form @submit.prevent="submit">
<label>Name <input v-model="form.name" required /></label>
<label>Email <input v-model="form.email" type="email" required /></label>
<label>Message <textarea v-model="form.message" required></textarea></label>
<button :disabled="status === 'sending'">Send</button>
<p v-if="status === 'sent'" role="status">Thanks, we got your message.</p>
<p v-if="status === 'error'" role="alert">That didn't send. Please try again.</p>
</form>
</template>
<script>
export default {
data() {
return { status: "idle", form: { name: "", email: "", message: "" } };
},
methods: {
async submit() {
this.status = "sending";
try {
const response = await fetch("https://formthunder.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({
...this.form,
access_key: process.env.GRIDSOME_FORMTHUNDER_KEY,
}),
});
const data = await response.json();
this.status = data.success ? "sent" : "error";
} catch (error) {
this.status = "error";
}
},
},
};
</script>Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Gridsome
- Variables reach the browser only with the
GRIDSOME_prefix. Restartgridsome developafter you change them. fetchis only called inside the method, so Gridsome's server render at build time won't hit a missing-fetcherror.- Gridsome hasn't kept pace with Vue 3. If you're starting a new site, our Nuxt and Astro pages cover the same job on current frameworks.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Gridsome site that emails hello@example.com. Send a test when you're done.Questions
Does Gridsome have a form plugin?
You don't need one. A component and a fetch call do all the work here.
Does this work with Vue 3?
The Options API code does, but on Vue 3 the composition version on our Vue page is shorter.
Get your Gridsome form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.