AI で作った静的サイトにお問い合わせフォームを付けるには？

用意するもの

HTML のファイルになっているサイト（AI で作ったもの・手で書いたもの・ジェネレーターで書き出したもの。作り方は問いません）
Siteon のサイト ID。メールアドレスで登録するとFree プランのサイトが1つでき、ID が付きます（siteon sites create でも作れます）
サーバー・自前の送信先・hidden の入力は要りません

手順

1. script タグを入れる

</body> の直前か、defer を付けて <head> に1行入れます。hanaya は自分のサイト ID に変えます。

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

2. フォームに印を付ける

いまある <form> に data-sitekit-form を付けます。隠した _hp の入力はボット対策で、必須です。

<form data-sitekit-form="contact">
  <label>お名前 <input name="name" required autocomplete="name"></label>
  <label>メール <input type="email" name="email" required autocomplete="email"></label>
  <label>ご用件 <textarea name="message"></textarea></label>

  <!-- ボット対策。人には見えない位置に置く（必須） -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">送信</button>
</form>

<div data-sitekit-success role="status" aria-live="polite" hidden>お問い合わせありがとうございました。</div>
<div data-sitekit-error role="status" aria-live="polite" hidden></div>

3. schema.json で項目を宣言して反映する

forms[].key は data-sitekit-form の値と、fields[].key は入力の name と一致させます。

{
  "forms": [
    { "key": "contact", "label": "お問い合わせ", "fields": [
      { "key": "name", "label": "お名前", "type": "text", "required": true },
      { "key": "email", "label": "メールアドレス", "type": "email", "required": true },
      { "key": "message", "label": "ご用件", "type": "textarea" }
    ] }
  ]
}

siteon schema push --site hanaya        # 検証してから反映
siteon forms test contact --site hanaya # テストの通知を送る

4. 通知とお礼メールをオンにする

管理画面の「設定 → 通知 → 各フォーム」を開き、通知先のメールアドレス、Slack を使うなら Incoming Webhook の URL を入れ、お礼メール（自動返信）をオンにします。お礼メールは、フォームの type: "email" の項目に入ったアドレスに届きます。

5. 公開する

siteon deploy ./dist --site hanaya でフォルダごと公開できます（初回は siteon hosting enable --site hanaya）。いまのホスティングに置いたままでも、フォームは script だけで動きます。

料金

1サイトあたりの料金です。フォーム・通知・自動返信・スパム対策はどのプランにも入っています。

	Free	Lite	Standard	Business
月額（税抜）	0円	500円	1,480円	4,980円
フォームの受付	月 50件	月 500件	月 1,000件	月 5,000件

Free は開発・プレビュー用のドメイン（localhost・*.pages.dev など）と、Siteon のホスティングのサブドメイン（<名前>.siteun.com）で動きます。独自ドメインで受け付けるには、そのサイトを有料プランにします。フォームを置くページのドメインは、サイトの許可ドメインに登録します（入っていないと送信は 403 origin_not_allowed になります。許可ドメインの登録と直し方）
予約もフォームの受付に含めて数えます
有料プランは上限を少し超えてもすぐには止まりません（上限の 80%・100% でメールが届きます）。詳しくはプランと上限

できないこと・近日の機能

同じ name の入力が複数ある項目（チェックボックスの組・select multiple）は最後の値しか送られません。選択肢ごとに別の key にします
script が出すエラーの文言はいまは日本語です
テスト送信も本物のお問い合わせとして保存され、上限に数えられます。終わったら管理画面で消します
スプレッドシートへの記録近日
Siteon のホスティングでの独自ドメイン近日（それまでは https://<サブドメイン>.siteun.com/ で公開するか、いまのホスティングのまま使います。手順は独自ドメイン）