How do I add a contact form to a static site built with AI?

What you need

• The site as HTML files (built with AI, by hand, or exported from a generator). How it was made doesn't matter
• A Siteon site ID. Sign up with your email address and a Free site is created for you (or run siteon sites create)
• No server, no form endpoint of your own, and no hidden fields

Steps

1. Add the script tag

Put one line before </body>, or in <head> with defer. Replace hanaya with your site ID.

<script src="https://cdn.siteon.dev/sitekit.js" data-site="hanaya" defer></script>

2. Mark the form

Add data-sitekit-form to the <form> you already have. Keep the hidden _hp input: it is the bot trap, and it is required.

<form data-sitekit-form="contact">
  <label>Name <input name="name" required autocomplete="name"></label>
  <label>Email <input type="email" name="email" required autocomplete="email"></label>
  <label>Message <textarea name="message"></textarea></label>

  <!-- Bot protection. Place it where people can't see it (required) -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">Send</button>
</form>

<div data-sitekit-success role="status" aria-live="polite" hidden>Thank you for your inquiry.</div>
<div data-sitekit-error role="status" aria-live="polite" hidden></div>

3. Declare the fields in schema.json and apply it

forms[].key must match the data-sitekit-form value, and each fields[].key must match an input's name.

{
  "forms": [
    { "key": "contact", "label": "Contact", "fields": [
      { "key": "name", "label": "Name", "type": "text", "required": true },
      { "key": "email", "label": "Email address", "type": "email", "required": true },
      { "key": "message", "label": "Message", "type": "textarea" }
    ] }
  ]
}

siteon schema push --site hanaya        # validate and apply
siteon forms test contact --site hanaya # send a test notification

4. Turn on notifications and the thank-you email

In the dashboard, open "Settings → Notifications → each form". Add the email addresses to notify, a Slack Incoming Webhook URL if you use Slack, and switch on the thank-you email (auto-reply). The thank-you email goes to the address in the form's type: "email" field.

5. Publish

Publish the folder with siteon deploy ./dist --site hanaya (first time: siteon hosting enable --site hanaya). You can also keep your current hosting: the form works with the script tag alone.

What it costs

Prices are per site. The form, notifications, auto-replies and spam protection are included on every plan.

• The Free plan works on development and preview domains (localhost, *.pages.dev and similar) and on its Siteon hosting subdomain (<name>.siteun.com). Move the site to a paid plan to take inquiries on your own domain. Register the domain of the page with the form in the site's allowed origins (otherwise submissions get 403 origin_not_allowed; see Registering allowed origins and fixing it)
• Bookings count as form submissions
• Going slightly over a paid limit doesn't stop submissions immediately: you get email alerts at 80% and 100%. See Plans and limits

Limits and what's coming

• A field with several inputs sharing one name (checkbox groups, select multiple) only sends the last value. Use one key per choice
• The error messages the script shows are currently in Japanese. Put your own wording in the success element
• Test submissions are saved as real inquiries and count toward the limit. Delete them in the dashboard afterwards
• Logging inquiries to a spreadsheet Soon
• Publishing on your own domain with Siteon hosting Soon (until then, the site is served on https://<subdomain>.siteun.com/, or you keep your current hosting; steps are in Custom domains)

Related docs

• Forms: every option, redirects after submission, GTM events
• Writing schema.json: field types and constraints
• The script tag: what the one line does
• Hand off to an AI agent: instructions to paste into Claude Code or Cursor