Build it with your AI agent

Your coding agent can put an InvoyForm form in your site for you, in your own design and your own framework. InvoyForm is the backend: it checks the answers, stores them and sends them on. Your agent only writes the form.

1. Copy your form’s HTML

Publish the form, open Share, and copy the HTML form. It has the address the answers go to and the name of every field.

2. Give your agent this prompt

Copy it, and paste your form’s HTML where it says so.

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 publish. localhost works without it.

What you get

• The form in your own components and styles, not a frame.
• Every check InvoyForm does, with each message under its field.
• Files, a loading state and a thank-you, with no code of your own.
• Each response in your dashboard, your email and your integrations, like any other response.

Before it goes live

• Allow your website. Add it in the form’s Settings and publish, or posts from it are refused. See allowed websites.
• Keep it in step. When you add or rename a field in the builder, copy the HTML again and ask your agent to update the form.
• Send it once. Fill in the form on your site and check the response arrives.

Show the whole form instead

If you want the form exactly as you built it in InvoyForm, with its theme and its logic, ask your agent for the embed instead:

Add my InvoyForm form to this page with the embed: a <div data-ivf-form="FORM_SLUG"></div> where the form should be, and https://form.invoy.in/v1/embed.js loaded once with defer. Do not write a backend for it. Then tell me to add this site's domain to the form's allowed websites in InvoyForm and publish.

See Embed on your site for what it does.