NuxtJS Installation

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 Nuxt form.

Step 2 — Prepare your Nuxt 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 Nuxt site

If you have a Nuxt app already setup and running, you can skip to Step 4. If you are setting up your site from scratch, you can run the following commands to start setting up your Nuxt app.

$ yarn create nuxt-app <project-name>
$ cd <project-name>
$ yarn dev

Nuxt will start a hot-reloading development environment that is accessible by default at http://localhost:3000/.

Step 4 - Add a Contact Section to your Nuxt site

Install axios with the following command:

$ yarn add axios

Create a new js file and name it as contact.vue file under pages directory, change its content with the following code block:

<template>
  <div>
    <div>
      <form
        accept-charset="UTF-8"
        v-on:submit.prevent="onSubmit()"
        method="POST"
      >
        <div>
          <label>Email address</label>
          <input
            type="email"
            v-model="email"
            class="form-control"
            placeholder="Email"
          >
        </div>
        <div>
          <label>Name</label>
          <input
            type="text"
            v-model="name"
            class="form-control"
            placeholder="Name"
            required="required"
          >
        </div>
        <div>
          <label>Message</label>
          <textarea
            type="text"
            v-model="message"
            class="form-control"
            placeholder="Message"
            required="required"
          ></textarea>
        </div>
        <hr>
        <div class="success" v-if="isSuccess">We received your submission, thank you!</div>
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Contact",
  props: {
    msg: String
  },
  data() {
    return {
      loading: true,
      name: "",
      email: "",
      message: "",
      isSuccess: false
    };
  },
  methods: {
    onSubmit() {
      let data = {
        name: this.name,
        email: this.email,
        message: this.message
      };
      axios
        .post("https://getform.io/f/{unique-endpoint-generated-on-step-1}", data, {
          headers: {
            Accept: "application/json"
          }
        })
        .then(
          response => {
            this.isSuccess = response.data.success ? true : false;
          },
          response => {
            // Error
          }
        );
    }
  }
};
</script>

Step 5 - Run your Nuxt app locally to finalize setup

Run the following command to see your NuxtJS form in action at localhost:3000/contact/:

$ yarn dev

That's it! Your Nuxt app is now running Getform for form handling.