Add a form to your Next.js

Next.js is a powerful framework for building server-rendered React applications with seamless routing and server-side rendering capabilities.

This guide will demonstrate the quick process of adding a contact form to your Next.js project and connecting it to Formzillion for submission handling.

Step 1 — Create new form endpoint on Formzillion

Sign in to your Formzillion account and create a new form with name Next.js Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your Next.js form.

Step 2 — Create a new NextJS project

To initiate the project setup, let's follow the instructions provided in the Next.js Getting Started documentation. Open your terminal and execute the following command to create a new site:

On installation, you'll see the following prompts:

After the successful installation, a terminal message will appear containing instructions on how to access and run your site locally. Navigate to the newly created directory for your website:

Run the development server

You can now access the site in your browser by visiting https://localhost:3000. Below observe the sample site displayed on the screen:

Great job! You have successfully created a new Next.js site. Now, let's proceed to learn how to add a contact form into your project.

Step 4 — Create a Contact Form

To incorporate a contact form into your Next.js site, you can either add it to the existing app/pages.tsx file or create a new page called app/contact/page.tsx. Then, simply insert the given code block into the chosen file:

To successfully submit your form to Formzillion, ensure that you include the 'FORM_ID' in the provided form code. This 'FORM_ID' should correspond to the ID assigned to your specific Formzillion form.

And there you have it! Once you fill out and submit the form, you will be able to view the default submission thank you page.

Congratulations! Your Next.js site now has the contact form powered by Formzillion!