NuxtJS Guide

Add A Contact Form To NuxtJS

Here is a guide for integrating Fabform with a Nuxt.js site:

Step 1: Create a new Nuxt site

If you haven’t set up a Nuxt app yet:

1. Create Nuxt App: Run the following command to create a new Nuxt app. You’ll be prompted to name your project:

   yarn create nuxt-app <project-name>

2. Navigate to Your Project: Move into the newly created project directory:

   cd <project-name>

3. Start Development Server: Launch the Nuxt development environment:

   yarn dev

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

Step 2: Add a Contact Section to your Nuxt site

1. Install Axios: Install Axios, a promise-based HTTP client, to handle HTTP requests:

   yarn add axios

2. Create Contact Page: Inside the pages directory of your Nuxt app, create a new Vue file named contact.vue.

3. Update Contact Page Content: Replace the content of contact.vue 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",
     data() {
       return {
         name: "",
         email: "",
         message: "",
         isSuccess: false
       };
     },
     methods: {
       onSubmit() {
         const data = {
           name: this.name,
           email: this.email,
           message: this.message
         };
         axios
           .post("https://fabform.io/f/{your-form-endpoint}", data, {
             headers: {
               Accept: "application/json"
             }
           })
           .then(response => {
             this.isSuccess = response.data.success ? true : false;
           })
           .catch(error => {
             console.error("Error submitting form:", error);
           });
       }
     }
   };
   </script>

   Note: Replace {your-form-endpoint} with the unique form endpoint provided by Fabform.

Step 3: Run your Nuxt app locally to finalize setup

1. Start Nuxt Development Server: Run the following command to see your Nuxt form in action at localhost:3000/contact/:

   yarn dev

That’s it! Your Nuxt app is now integrated with Fabform for handling form submissions.

---