NextJS Installation

Step 1 — Create new form endpoint on Getform

All that's required is a name for your form. You specify a name, and Getform will provide a unique form endpoint to identify your NextJS form.

Step 2 — Prepare your NextJS contact form for your website

You can use the boilerplate code provided on Getform to create your HTML form. It is a basic contact form with email address, name and message fields:

<form accept-charset="UTF-8" action="https://getform.io/f/{unique-endpoint-generated-on-step-1}" 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>

Step 3 — Create a new NextJS site

If you have a NextJS site already setup and running, you can skip to Step 4. If you are setting up your site from scratch, you can run the following commands to start setting up your NextJS site.

$ yarn create next-app

at this point, you will be asked to give a name to your app. In this example, it will be "my-first-next-app".

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

NextJS will start a hot-reloading development environment that is accessible by default at http://localhost:3000/.

Step 4 - Add a Contact Section to your NextJS site

Create a new js file and name it as contact.js file under pages directory, change its 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://getform.io/f/{unique-endpoint-generated-on-step-1}", {
      method: "POST",
      body: formData
    }).then(() => setQuery({ name: "", email: "", message: "" }));
  };
  return (
    <div className="App">
      <h1>NextJS form using Getform.io</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>
  );
}

Step 5 - Run your NextJS site locally to finalize setup

Run the following command to see your NextJS form in action at localhost:3000/contact/:

$ yarn dev

That's it! Your NextJS site is now running Getform.