Headlessforms – NuxtJS Installation

Headlessforms Integration – Simple Installation Instructions for NuxtJS Forms

1. Prepare New Form Endpoint on Headlessforms

You simply require a name for your form. Once you specify the name, Headlessforms will provide an exclusive form endpoint to identify your Nuxt form.

2. Preparing Your Nuxt Contact Form

On Headlessforms a standard, boilerplate code is provided to create your HTML form. You’ll find a simple contact form with email address, name and message fields:

<form action="https://app.headlessforms.cloud/api/v1/form-submission/{form-token}" 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>

3. Creating a New Nuxt Site

If your Nuxt app is already set up and running, omit step 3 and move ahead to step 4. But if you’re setting up your site from scratch, use these commands to begin setting up your Nuxt app:

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

Nuxt will now run a hot reloading environment which you can access by default at http://localhost:3000/.

4. Contact Section for Your Nuxt Site 

• First, install axios with the following command:

$ yarn add axios

• Next, create a new js file. Name it as contact.vue file under pages directory.
• You will next 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://app.headlessforms.cloud/api/v1/form-submission/{form-token}", data, {
          headers: {
            Accept: "application/json"
          }dd
        })
        .then(
          response => {
            this.isSuccess = response.data.success ? true : false;
          },
          response => {
            // Error please  provide error handling code. 
          }
        );
    }
  }
};
</script>

When visitors try to submit a form that doesn’t validate, they’ll see some errors. They look like this by default:

This is the most common error that you may face while using it.

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

If you’ve carefully followed these steps, your Nuxt app will now be running Headlessforms for form handling.
By following the steps provided, you will have successfully completed Headlessform integration for Contact Forms, Gatsby JS, Next JS and Nuxt JS Forms.

Thank you for reading! You can find more information and resources at Headlessforms Documentation.

Fabio Duo

administrator

Fabio Duo