How to add a contact form to Gridsome

Step 1 — Create new form endpoint on Getform

All that's required is a name for your form. You specify a name, and Getform will provide a unique form endpoint to identify your form.

Step 2 — Prepare your Gridsome contact form for your website

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with email address, name and message fields:

<form accept-charset="UTF-8" action="https://getform.io/f/{unique-endpoint-generated-on-step-1}" method="POST">
  <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>
</form>

Step 3 — Create a new Gridsome site

$ gridsome create my-gridsome-site
$ cd my-gridsome-site
$ gridsome develop

Gridsome will start a hot-reloading development environment accessible by default at localhost:8080.

Step 4 - Add a Contact Section to your Gridsome site

Create a new file called contact.vue under src/pages directory and copy your form HTML Don’t forget to change the action part of your form tag in your contact.vue file.

<template>
   <Layout>
      <h1>Contact Us</h1>
      <div>
         <form accept-charset="UTF-8" action="https://getform.io/{unique-endpoint-generated-on-step-1}" 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>
         </form>
        </div>
      </div>
   </Layout>
</template>

<script>
export default {
  metaInfo: {
    title: 'About us'
  }
}
</script>

Important: Don't forget to change the action attribute to a form endpoint URL with yours.

Step 5 - Run your Jekyll site locally to finalize setup

Run the following command to see your Gridsome form in action at localhost:8080/contact/:

run gridsome develop

That's it! Your Gridsome site is now running Getform.