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

Siteon の script を1行読み込み、いまある form に data-sitekit-form 属性を付けて、項目を schema.json で宣言するだけです。送信は保存され、お店にはメールと Slack で通知が届き、お客様には自動でお礼メールが返ります（サーバー・JavaScript・別のフォームサービスの契約は要りません）。作っている間はFree プランで動き、本番ドメインでは1サイト月500円からです。

URL: https://siteon.dev/ja/guides/add-contact-form-to-static-site
更新日: 2026-10-26

## 用意するもの

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

## 手順

### 1. script タグを入れる

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

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

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

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

```html
<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` と一致させます。

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

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

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

[管理画面](https://app.siteon.dev)の「設定 → 通知 → 各フォーム」を開き、通知先のメールアドレス、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` になります。[許可ドメインの登録と直し方](https://siteon.dev/ja/docs/domains#allowed-origins)）
- 予約もフォームの受付に含めて数えます
- 有料プランは上限を少し超えてもすぐには止まりません（上限の 80%・100% でメールが届きます）。詳しくは [プランと上限](https://siteon.dev/ja/docs/plans)

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

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

## 関連するドキュメント

- [フォーム](https://siteon.dev/ja/docs/forms): すべての設定・送信後の移動・GTM のイベント
- [schema.json の書き方](https://siteon.dev/ja/docs/schema): 項目の型と制約
- [script タグ](https://siteon.dev/ja/docs/script): 1行で動くもの
- [AI エージェントに渡す](https://siteon.dev/ja/docs/agents): Claude Code や Cursor に貼る指示文

---

Siteon は、AI で作ったサイトのためのインフラです。AI や手で作った静的サイト（HTML）に、ホスティング・お客さん（お店の人）が直せる CMS・お問い合わせフォーム・アクセス解析・AI エージェントからの操作（CLI・MCP）を足し、そのまま納品できる状態にします。