Skip to content

Gridsome Guide

Add A Contact Form To Gridsome

Here is a guide on integrating a contact form into a Gridsome site using Fabform:

Setting Up a Contact Form in Gridsome with Fabform

Gridsome is a powerful JAMStack framework based on Vue.js, perfect for creating lightning-fast static websites and applications. Integrating a contact form into your Gridsome site is straightforward, especially with services like Fabform, which handle form submissions effortlessly.

Step 1: Create a New Gridsome Site

If you haven’t already, initiate a new Gridsome project by running the following commands:

Terminal window
gridsome create my-gridsome-site
cd my-gridsome-site

Step 2: Add a Contact Section

Navigate to the src/pages directory within your Gridsome project and create a new file called contact.vue. This will serve as the page where your contact form resides.

Step 3: Implement the Contact Form

Copy the following code into your contact.vue file:

<h1>Contact Us</h1>
<form accept-charset="UTF-8" action="{your-form-endpoint}" method="POST" target="_blank">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="name" placeholder="Your Name">
<input type="text" name="message" placeholder="Your Message">
<button type="submit">Send</button>
export default {
metaInfo: {
title: 'Contact Us'

Make sure to replace {your-form-endpoint} with your actual Fabform endpoint URL.

Step 4: Finalize Setup and Test Locally

To see your Gridsome site with the contact form in action, run the following command:

Terminal window
gridsome develop

Visit localhost:8080/contact/ in your browser to test the form. Upon submission, the form data will be sent to Fabform for processing.


By following these steps, you’ve successfully integrated a contact form into your Gridsome site using Fabform. This allows visitors to easily get in touch with you, making your website more interactive and user-friendly.

Feel free to customize the form’s appearance and functionality further to suit your specific needs. Happy coding!

This guide provides a step-by-step approach, ensuring clarity and completeness in integrating a contact form into a Gridsome site using Fabform.