# クイックスタート

> どんな HTML フォームでも送信先を Ikiform にするだけで、2 分で最初の送信データを受け取れます。

Ikiform はあらゆるフォームのバックエンドです。マークアップ、フレームワーク、スタイルはそのまま使えます。フォームの送信先を Ikiform のエンドポイントにすると、Ikiform が送信ごとにバリデーションし、スパムを除外し、ワークスペースに保存し、メールで通知し、署名付き Webhook であなたのシステムに届けます。

このドキュメントのコードサンプルでは、サンプルのフォーム ID `frm_xxxxxxxxxxxxxxxx` を使っています。ダッシュボードのフォーム概要に表示される、自分のフォームの ID に置き換えてください。

## 送信方法を選ぶ

どのフォームにも公開エンドポイント `https://ikiform.com/f/<formId>` が 1 つあります。HTTP POST を送れるものなら何でも使えます。

| 送信元 | 使うもの | ガイド |
| --- | --- | --- |
| プレーンな HTML ページやサイトビルダー | `<form action>` | [HTML フォーム](https://ikiform.com/ja/docs/html.md) |
| React, Next.js, Vue, Svelte, Astro | `fetch` または SDK の `submit` | [ガイド](https://ikiform.com/ja/docs/guides/nextjs.md) |
| バックエンド、スクリプト、連携サービス | シークレットキーを付けた HTTPS 経由の JSON | [サーバーから送信する](https://ikiform.com/ja/docs/guides/server.md) |
| shadcn/ui のプロジェクト | レジストリのコンポーネント | [shadcn/ui コンポーネント](https://ikiform.com/ja/docs/shadcn.md) |

## クイックスタート

### ステップ 1: フォームを作成する

[ダッシュボード](https://ikiform.com/dashboard)にログインし、ワークスペースを作成してフォームを追加します。フォームの概要に、エンドポイントの URL と、HTML、JavaScript、React 用のスニペットが表示されます。

### ステップ 2: フォームの送信先をエンドポイントにする

フォームの `action` にエンドポイントを、`method` に `post` を設定します。`name` を持つ入力欄はすべて、送信データのフィールドになります。

`contact.html`:

```html
<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message"></textarea>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>
```

非表示の `_gotcha` 入力欄はハニーポットです。人には見えず、ここに入力したボットはスパムとして保存されます。[スパム対策](https://ikiform.com/ja/docs/spam.md#honeypot)を参照してください。

### ステップ 3: 送信する

ページを開いてフォームを送信します。ブラウザーは Ikiform のサンクスページか、リダイレクトを設定していれば自分のページに移動します。ターミナルから JSON を POST することもできます:

`ターミナル`:

```bash
curl https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx \
  -H "Content-Type: application/json" \
  -d '{"name":"Ada","email":"ada@example.com","message":"Hello"}'
```

JSON のリクエストには、ステータス `201` の JSON が返ります:

`201 Created`:

```json
{ "ok": true, "id": "sub_01k7v2c9t3e8m5q4x6z0a1b2c3" }
```

### ステップ 4: 届いたことを確認する

送信データはすぐにダッシュボードに表示されます。そこから [Webhook](https://ikiform.com/ja/docs/webhooks.md) を追加して 1 件ずつアプリに送ったり、[REST API](https://ikiform.com/ja/docs/api.md) で読み取ったりできます。

## 試してみる

このページのインタラクティブなリクエストビルダーは、フィールドの行から送信データを組み立て、対応する curl、fetch、SDK のコードを表示します。サンプルのフォーム ID ではコードを表示するだけですが、自分のフォーム ID を入れると `https://ikiform.com/f/<formId>` に実際の POST を 1 件送り、ステータスと JSON のレスポンスを表示できます。組み立てられるリクエストは次のようになります:

```bash
curl https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx \
  -H "Content-Type: application/json" \
  -d '{"name":"Ada","email":"ada@example.com","message":"Hello"}'
```

## 次のステップ

- [仕組み](https://ikiform.com/ja/docs/how-it-works.md)では、送信が通過するすべてのチェックを順に説明しています。
- [フィールドを定義](https://ikiform.com/ja/docs/fields.md)すると、Ikiform が不正なデータをわかりやすいフィールドエラーで拒否します。
- [人間確認をオンにして](https://ikiform.com/ja/docs/spam.md#human-check)、フォームを自分のドメインに限定します。
- バックエンドで [Webhook の署名を検証](https://ikiform.com/ja/docs/webhooks.md#verify)します。