NextJS Guide

Add A Contact Form To NextJs

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

Step 1: Create a new Next.js site

If you don’t have a Next.js site set up yet:

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

   yarn create next-app

2. Navigate to Your App: Move into the newly created app directory:

   cd your-app-name

3. Start Development Server: Launch the Next.js development environment:

   yarn dev

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

Step 2: Add a Contact Section to your Next.js site

1. Create Contact Page: Inside the pages directory of your Next.js app, create a new JavaScript file named contact.js.

2. Update Contact Page Content: Replace the content of contact.js with the following code block:

   import React, { useState } from "react";
   
   export default function Contact() {
     const [query, setQuery] = useState({
       name: "",
       email: "",
       message: ""
     });
   
     const handleParam = (e) => {
       const { name, value } = e.target;
       setQuery(prevState => ({ ...prevState, [name]: value }));
     };
   
     const formSubmit = (e) => {
       e.preventDefault();
       const formData = new FormData();
       Object.entries(query).forEach(([key, value]) => {
         formData.append(key, value);
       });
       fetch("https://fabform.io/f/{your-form-endpoint}", {
         method: "POST",
         body: formData
       }).then(() => setQuery({ name: "", email: "", message: "" }));
     };
   
     return (
       <div>
         <h1>Contact Us</h1>
         <form onSubmit={formSubmit}>
           <div>
             <label>Name</label>
             <input
               type="text"
               name="name"
               required
               placeholder="Name"
               value={query.name}
               onChange={handleParam}
             />
           </div>
           <div>
             <label>Email</label>
             <input
               type="email"
               name="email"
               required
               placeholder="Email"
               value={query.email}
               onChange={handleParam}
             />
           </div>
           <div>
             <label>Message</label>
             <textarea
               name="message"
               required
               placeholder="Message"
               value={query.message}
               onChange={handleParam}
             />
           </div>
           <button type="submit">Send</button>
         </form>
       </div>
     );
   }

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

Step 3: Run your Next.js site locally to finalize setup

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

   yarn dev