Simple enough for everyone. Powerful enough for developers.

Add my InvoyForm form to this project. InvoyForm is the backend: it checks and stores the answers, so do not write an API route, a server action, a database table or a fetch call for this form.

Read this first, it has every attribute and event of the script: https://form.invoy.in/docs/developer/html-post.md

Here is the form's HTML from InvoyForm (Share, HTML form):

PASTE THE HTML FORM HERE

Do this:
1. Rebuild the form as a component in this project's framework and design system: its inputs, labels, buttons and spacing. Keep the form's action, method="POST" and every field's name exactly as they are. A group of checkboxes keeps the [] at the end of its name.
2. Put data-ivf on the <form>, and load https://form.invoy.in/v1/embed.js once on the page with defer. In Next.js use next/script; in other frameworks add the script tag to the page or layout. The script also finds forms that render later.
3. Let the form submit natively: no onSubmit handler, no preventDefault, no state that holds the values. The script sends the form, turns the button off while it sends, shows each message and a thank-you.
4. Under each field add an element with data-ivf-error="FIELD_NAME" for its message. Add one element with data-ivf-form-error for messages about the whole form, and one hidden element with data-ivf-success for the thank-you. Style them with the project's styles.
5. Style the states with [data-ivf-state="submitting"], [data-ivf-state="error"], [data-ivf-state="success"] on the form and [aria-invalid="true"] on a field.
6. If something must happen after a send, like closing a dialog or tracking a conversion, listen for the ivf:success and ivf:error events on the form.
7. Keep a file field as <input type="file" name="...">. The script uploads the files.
8. When you are done, tell me to add this site's domain to the form's allowed websites in InvoyForm (Settings) and save. localhost works without it.