# Add Netlify forms to NextJs 14 ## 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: ```plaintext project-root/ └── public/ └── __forms.html ja ``` the code look like this: ```xml ``` ## Component forms.tsx #### Explanation 1. **Form Setup**: The form uses the `name` attribute set to `"feedback"` which matches the hidden input's value for `form-name`. This helps Netlify identify and process the form submission. 2. **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. ```javascript

Ich bin interessiert an einer E-Commerce-Lösung.

setSelectedPackage(e.target.value)} /> Basis-Paket

setSelectedPackage(e.target.value)} /> Standard-Paket

setSelectedPackage(e.target.value)} /> Premium-Paket

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" /> Ich akzeptiere die Datenschutzrichtlinien und stimme zu, dass meine Daten zur Bearbeitung meiner Anfrage verwendet werden.

{status === "ok" && (

Ihre Nachricht wurde erfolgreich gesendet!

)} {status === "error" && (

Leider ist etwas Schief gelaufen: {error}

)}

``` ### Netlify Settings In the Form Settings from Netlify you have to enable the auto scan for the Netlify form. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721681938802/8f0b8431-178d-4494-9b79-b5294fa414dd.png align="center") After you send the form data you receive the data in the Netlify site dashboard: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721681933299/e989c6e7-b642-438d-98e1-0ac731d3a942.png align="center")