Add Netlify forms to NextJs 14
Updated
•3 min readI
I am fullstack Developer from Hannover
1. add __forms.html to public folder
Create a new HTML file. You can name it something descriptive like __forms.html. The structure should look like this:
project-root/
└── public/
└── __forms.html ja
the code look like this:
<html>
<head></head>
<body>
<form name="feedback" data-netlify="true" hidden>
<input type="hidden" name="form-name" value="feedback" />
<input name="name" type="text" />
<input name="email" type="email" />
<input name="ecommerce" type="checkbox" />
<input name="option" type="radio" />
<textarea name="message"></textarea>
<input name="privacy" type="checkbox" />
</form>
</body>
</html>
Component forms.tsx
Explanation
Form Setup: The form uses the
nameattribute set to"feedback"which matches the hidden input's value forform-name. This helps Netlify identify and process the form submission.Input Fields: The form includes fields for
name,email, a checkbox for e-commerce interest, radio buttons for package selection, and a textarea for a message. Each input is styled using Tailwind CSS classes for a clean and responsive layout.
<form
name="feedback"
onSubmit={handleFormSubmit}
className="text-black flex flex-col gap-3 align-center"
>
<input type="hidden" name="form-name" value="feedback" />
<input
name="name"
type="text"
placeholder="Name"
required
className="input input-bordered w-full rounded-lg border-gray-200 p-3 text-sm"
/>
<input
name="email"
type="email"
required
placeholder="Email"
className="input input-bordered w-full rounded-lg border-gray-200 p-3 text-sm"
/>
<div className="flex items-center">
<input
type="checkbox"
id="ecommerce"
name="ecommerce"
className="rounded border-gray-300 text-second-600 shadow-sm focus:border-second-600 focus:ring focus:ring-second-600 focus:ring-opacity-50"
/>
<label htmlFor="ecommerce" className="ml-2 text-sm">
Ich bin interessiert an einer E-Commerce-Lösung.
</label>
</div>
<div className="grid grid-cols-1 gap-4 text-center sm:grid-cols-3">
<div>
<label
htmlFor="basis-paket"
className={`block w-full cursor-pointer rounded-lg border p-3 text-gray-600 ${
selectedPackage === "basis-Paket" ? "border-second-600" : ""
}`}
>
<input
className="sr-only"
type="radio"
name="option"
value="basis-Paket"
id="basis-paket"
onChange={(e) => setSelectedPackage(e.target.value)}
/>
<span className="text-sm">Basis-Paket</span>
</label>
</div>
<div>
<label
htmlFor="standard-paket"
className={`block w-full cursor-pointer rounded-lg border p-3 text-gray-600 ${
selectedPackage === "standard-Paket" ? "border-second-600" : ""
}`}
>
<input
className="sr-only"
type="radio"
name="option"
value="standard-Paket"
id="standard-paket"
onChange={(e) => setSelectedPackage(e.target.value)}
/>
<span className="text-sm">Standard-Paket</span>
</label>
</div>
<div>
<label
htmlFor="premium-paket"
className={`block w-full cursor-pointer rounded-lg border p-3 text-gray-600 ${
selectedPackage === "premium-Paket" ? "border-second-600" : ""
}`}
>
<input
className="sr-only"
id="premium-paket"
type="radio"
name="option"
value="premium-Paket"
onChange={(e) => setSelectedPackage(e.target.value)}
/>
<span className="text-sm">Premium-Paket</span>
</label>
</div>
</div>
<textarea
name="message"
placeholder="Nachricht"
rows={8}
className="w-full rounded-lg border-gray-200 p-3 text-sm"
></textarea>
<div className="flex items-center">
<input
type="checkbox"
name="privacy"
onChange={() => setPrivacyIsChecked(!privacyIsChecked)}
className="rounded border-gray-300 text-second-600 shadow-sm focus:border-second-600 focus:ring focus:ring-second-600 focus:ring-opacity-50"
/>
<label htmlFor="privacy" className="ml-2 text-sm">
Ich akzeptiere die Datenschutzrichtlinien und stimme zu, dass meine Daten
zur Bearbeitung meiner Anfrage verwendet werden.
</label>
</div>
<button
className="buttonForm inline-block w-full rounded-lg bg-second-600 hover:bg-second-800 px-5 py-3 font-medium text-white sm:w-auto"
type="submit"
disabled={status === "pending" || !privacyIsChecked}
>
Nachricht senden
</button>
{status === "ok" && (
<div className="flex items-center alert alert-success">
<SuccessIcon />
Ihre Nachricht wurde erfolgreich gesendet!
</div>
)}
{status === "error" && (
<div className="flex items-center alert alert-error">
<ErrorIcon />
Leider ist etwas Schief gelaufen: {error}
</div>
)}
</form>
Netlify Settings
In the Form Settings from Netlify you have to enable the auto scan for the Netlify form.
After you send the form data you receive the data in the Netlify site dashboard:
