​
What is Next.js?

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

​
Prerequisites

Before you begin, you’ll need to have a Formbox form. If you don’t have one yet, you can create a new form by following the steps in the Introduction guide. Once you have your form, make a note of the form’s endpoint url in the setup tab of your form page, as you’ll need it later.

​
Creating a new Next project

To get up and running quickly, we will follow the official Next installation guide to create a new Next project. In your terminal, run the following command:

npx create-next-app@latest

On installation, you’ll see the following prompts:

Make sure to select Yes for Tailwind CSS and App Router.

What is your project named? next-with-formbox
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

cd next-with-formbox

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see a new Next application running.

​
Adding your Formbox form to your Next project

Now that we have a new Next project set up, let’s add our Formbox form to it.

For styling purposes, we’ll use Tailwind CSS. You can learn how to add Tailwind CSS to your project by following the Next installation guide.

When running create-next-app, we selected Yes for Tailwind CSS, so it should already be set up in your project. If not, you can add it by following the guide linked above.

Once you have Tailwind CSS set up, let’s add our form.

Open up the page.tsx file within the root of the app directory and replace everything in the file with the following code block:

page.tsx
export default function Home() {
  return (
    <div className="max-w-md mx-auto py-20 bg-white">
      <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
      <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
        <div className="mb-4">
          <label
            htmlFor="name"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="John Doe"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-4">
          <label
            htmlFor="email"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="john@example.com"
            required
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          />
        </div>
        <div className="mb-6">
          <label
            htmlFor="message"
            className="block text-gray-700 text-sm font-bold mb-2"
          >
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            placeholder="How can we help you?"
            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
        >
          Send Message
        </button>
      </form>
    </div>
  );
}

Paste the form endpoint url you copied from Formbox into your form’s action attribute as shown in the code block above.

Save the file and navigate to http://localhost:3000 in your browser. You should see a form that you can fill out and submit.

And that’s it! Now after filling out and submitting the form you should see the default submission success page displayed.

VueNuxt