Headlessforms – NextJS Installation

Fabio Duo

01 Aug 2022
2 Min Read

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.

Get started now

Fabio Duo

administrator

Fabio Duo