Reactive Forms with Netlify.

Introduction

Building a website with a contact page and accompanying form is quite common. However, posting forms to Netlify with Next.js can be a little tricky. Let's cover some of the issues I ran into and how I solved them.

I will likely gloss over some of the finer points of React Hook Form, validation etc. but will create future posts to cover these topics in more detail.

Follow along with the repository here

Setup NextJS

    npx create-next-app@latest --typescript --use-npm

Install Packages

We need to install the following packages

    npm install @hookform/devtools @hookform/error-message @hookform/resolvers react-hook-form react-select yup sass

We also need to install the following dev dependencies as we are using TypeScript:

    npm install --sav-dev @types/yup

Let's breakdown these packages:

• @hookform/devtools - Used to display dev tools along side your form. Useful for debugging
• @hookform/error-message - Allows us to easily show error messages
• @hookform/resolvers - Gives us the ability to use common form validation libraries (e.g. Yup)
• react-hook-form - The main React Hook Form package itself.
• react-select - Makes select boxes easy to work with.
• yup - Used for form validation
• sass - Using SASS for styling the form

The Form Component

I have set up a component called the-form. It's broken up into the following parts:

Select Options

These are the select options we want to make available in the form:

components/the-form/the-form.tsx

    const options:StringValueSelect[] = [
    { value: 'red', label: 'Red' },
    { value: 'green', label: 'Green' },
    { value: 'blue', label: 'Blue' },
    { value: 'yellow', label: 'Yellow' },
    { value: 'orange', label: 'Orange' },
];

React Hook Form Setup

This block configures React Hook Form, how it should validate and the default form values.

components/the-form/the-form.tsx

    const { control, register, reset, handleSubmit, formState: { errors } } = useForm<TheForm>({
    mode: 'all',
    reValidateMode: 'onChange',
    resolver: yupResolver(theFormValidator),
    criteriaMode: "firstError",
    shouldFocusError: true,
    shouldUnregister: true,
    defaultValues: {
        favorite_colour_select: null,
    }
});

Submit Function

This function handles submitting the form. Due to the way Netlify handles form requests, we need to set up the form structure first, encode the form data, and then submit it. I am using Fetch here, but Axios also works.

NOTE: It is recommended you build on this example if you plan on using it. Consider features like a loading state while the form is submitted, better user feedback when complete, and perhaps navigating to a thankyou/success page upon completion.

components/the-form/the-form.tsx

    function onSubmit(form:TheForm)
{
    const formDetails = {
        "form-name": form.form_name,
        "bot-field": form.bot_field,
        "first-name": form.first_name,
        "last-name": form.last_name,
        "email": form.email,
        "favorite-colour": form.favorite_colour_select?.value ?? '',
    }

    const data = new URLSearchParams(formDetails).toString();

    fetch("/", {
        method: "POST",
        body: data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
        .then(() => {
            reset();
            alert("FORM SUBMITTED!")
        })
        .catch((error) => {
            alert("ERROR SUBMITTING FORM! CHECK CONSOLE");
            console.error(error)
        });
    console.log(form);
}

The Component

A few things to note here. We are setting data-netlify and data-netlify-honeypot attributes to tell Netlify that we want to use this form for submissions. The honeypot field also greatly reduces the amount of spam you're likely to get.

More information on integrating forms in Netlify can be found here

NOTE: The form_name and bot_field inputs are required to make this work with Next.js.

components/the-form/the-form.tsx

    <form name="contact" onSubmit={handleSubmit(onSubmit)} data-netlify={true} data-netlify-honeypot={"bot_field"} className={styles.form}>

    <input type="hidden" value="contact" {...register("form_name")} />

    <div className={styles.formGroupHidden}>
        <label htmlFor="bot_field" >Are you a bot?</label>
        <input {...register("bot_field")} />
    </div>

    <div className={styles.formGroup}>
        <label htmlFor="first_name" >First Name</label>
        <input {...register("first_name")}/>
        <span className={styles.formError}><ErrorMessage name={"first_name"} errors={errors} /></span>
    </div>

    <div className={styles.formGroup}>
        <label htmlFor="last_name" >Last Name</label>
        <input {...register("last_name")}/>
        <span className={styles.formError}><ErrorMessage name={"last_name"} errors={errors} /></span>
    </div>

    <div className={styles.formGroup}>
        <label htmlFor="email" >Email</label>
        <input type="email" {...register("email")}/>
        <span className={styles.formError}><ErrorMessage name={"email"} errors={errors} /></span>
    </div>

    <div className={styles.formGroup}>
        <label htmlFor="favorite_colour_select" >Favorite Colour</label>
        <Controller name={'favorite_colour_select'}
            control={control}
            render={({field: {value, onChange}}) => <Select
                id={"favorite_colour_select"}
                instanceId={"favorite_colour_select"}
                placeholder={"Pick your favorite colour..."}
                isClearable={true}
                options={options}
                value={value}
                onChange={onChange}
            />}
        />
        <span className={styles.formError}><ErrorMessage name={"favorite_colour_select"} errors={errors} /></span>
    </div>

    <div className={styles.formControls}>
        <input type={"submit"} value={"Submit"}/>
    </div>
</form>

Validation

We are also doing some validation on this form using Yup. Here's what the schema looks like:

validation/the-form.ts

    import * as Yup from "yup";

export const theFormValidator = Yup.object().shape({

    first_name: Yup.string()
        .required("First name is required"),

    last_name: Yup.string()
        .required("Last name is required."),

    email: Yup.string()
        .nullable(true)
        .email('Invalid email.')
        .transform((v, o) => o === '' ? null : v)
        .required("Email is required."),

    favorite_colour_select: Yup.object().shape({
        label: Yup.string(),
        value: Yup.string(),
    })
        .nullable(true)
        .required("Favorite colour is required."),
});

Types

I have also typed the form component and created a separate type for the select box.

types/the-form.ts

    import {StringValueSelect} from "./select";

export type TheForm = {
    form_name: string;
    bot_field: string;
    first_name: string;
    last_name: string;
    email: string;
    favorite_colour: string;
    favorite_colour_select: StringValueSelect | null;
}

types/select.ts

    export type NumberValueSelect = {
    value: number,
    label: string,
};

export type StringValueSelect = {
    value: string,
    label: string,
}

NextJS Config

I have also configured the Locale on the site

next.config.js

    /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
}

module.exports = nextConfig

Conclusion

Hopefully you have gained some value from this information. Feedback is welcome; if you have something to add, a better way to do it, or something I missed, you can reach me on the contact page or create an issue on the GitHub repository.