Gridsome Integration

Gridsome is a free & open source Vue.js-powered JAMStack framework for building static websites & apps that are fast by default

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.

Add a Contact Section to your Gridsome site

Create a new file called contact.vue under src/pages directory and copy your form HTML

TIP

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/{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>
         </form>
        </div>
      </div>
   </Layout>
</template>

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

TIP

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

Run your Gridsome 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.