Headlessforms – NextJS Installation

1. Creating New Form Endpoint

For step 1, you simply need to specify a name for your form, then Headlessforms provides a unique form endpoint for you to recognise your NextJS Form.

2. Create your NextJS 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 Your New NextJS Site

If your NextJS site 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:

$ yarn create next-app

A name for your app is now requested. We will use the example of “my-first-next-app”.

$ cd my-first-next-app
$ yarn dev

NextJS will now run a hot reloading environment, available by default at http://localhost:3000/:

4. Creating a Contact Section 

Make a new js file then name it as contact.js file under pages directory. You will have to change the content with the following code block:

import React, { useState } from "react";
import styles from '../styles/Home.module.css'

export default function App() {
  const [query, setQuery] = useState({
    name: "",
    email: ""
  });
  
  // Update inputs value
  const handleParam = () => (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setQuery((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };
  // Form Submit function
  const formSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    Object.entries(query).forEach(([key, value]) => {
      formData.append(key, value);
    });
    fetch("https://app.headlessforms.cloud/api/v1/form-submission/{form-token}", {
      method: "POST",
      body: formData
    }).then(() => setQuery({ name: "", email: "", message: "" }));
  };
  return (
    <div className="App">
      <h1>NextJS form using Headlessforms</h1>
      <form onSubmit={formSubmit}>
        <div>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            name="name"
            required
            placeholder="Name"
            className="form-control"
            value={query.name}
            onChange={handleParam()}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            required
            placeholder="Email"
            className="form-control"
            value={query.email}
            onChange={handleParam()}
          />
        </div>
        <div>
          <label htmlFor="message">Message</label>
          <input
            type="text"
            name="message"
            required
            placeholder="Message"
            className="form-control"
            value={query.message}
            onChange={handleParam()}
          />
        </div>
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

5. Run NextJS Site Locally to Finalize Setup

Run the following command to see your NextJS form in action at INSERT URL:

$ yarn dev

If you followed these steps, you’ve now succeeded in installing NextJS.

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

Leave a Reply

Your email address will not be published.