# Carrd

> Pro Plus では Carrd のカスタムフォームを Send to URL で Ikiform に向け、Pro Standard では HTML フォームを Embed 要素に貼り付けます。

Carrd のお問い合わせフォームや登録フォームは、送信データを Carrd 独自の送信先に送ります。Pro Plus のカスタムフォームは任意の URL に送信でき、Ikiform にはそれで十分です。Pro Standard では独自の HTML を埋め込めます。

| Carrd のプラン | Ikiform との接続方法 |
| --- | --- |
| Pro Plus 以上 | **Form** 要素のタイプを **Custom** > **Send to URL** に。コードは不要です。 |
| Pro Standard | 独自の HTML フォームを入れた **Embed** 要素 |
| Pro Lite と無料プラン | どちらも使えません。これらのプランには埋め込みもカスタムフォームもありません。 |

## Send to URL を使うカスタムフォーム

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

**Add Element** > **Form** をクリックし、**Type** を **Custom** にしてから **Send to URL** を選びます。

### ステップ 2: URL、メソッド、形式を設定する

`URL`:

```text
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx
```

| 設定 | 値 | 原因 |
| --- | --- | --- |
| **Method** | AJAX | 訪問者はページにとどまります。Carrd は `2xx` をすべて成功として扱い、Ikiform は送信データを保存すると `201` で応答します。 |
| **Format** | Default | 標準のフォーム送信を送ります。JSON でも動きます。 |
| **Headers** | なし | ブラウザーからの送信では、Ikiform にヘッダーは必要ありません。 |

AJAX ではなく **POST** を選ぶと、ブラウザーは Carrd のサイトを離れて Ikiform のサンクスページか **Redirect after submit**（送信後のリダイレクト）の URL に移動し、Carrd の On Success の設定は適用されません。**XML** は選ばないでください。Ikiform は `415 unsupported_media_type` で拒否します。

### ステップ 3: フィールドの ID を設定する

各フィールドの **Submitted ID**、それが空の場合は **ID** が、Ikiform でのフィールド名になります。Carrd はラベルから ID を生成するので、`email`、`name`、`message` のように自分で設定してください。**Format** を JSON にすると、`fields.firstname` のような Submitted ID はネストしたオブジェクトとして送られ、Ikiform はそのまま保存します。

- **File** フィールドは追加しないでください。Ikiform はまだファイルを受け付けず、`422 files_not_supported` で送信を拒否します。
- **Collect UTM parameters** は `utm_source`、`utm_medium`、`utm_campaign`、`utm_term`、`utm_content` を追加します。Ikiform で[フィールド](https://ikiform.com/ja/docs/fields.md)を定義している場合は、これらも追加してください。追加しないと、Unknown field エラーで送信が失敗します。
- **Hidden** フィールドには常にあらかじめ設定した値が入るので、ハニーポットとしては使えません。スパムスコアはすべての送信で引き続き動きます。

### ステップ 4: On Success と On Failure を選ぶ

リクエストのあとに Carrd が表示する内容を選びます。On Failure は `422 validation_failed` や `429 rate_limited` など、Ikiform のすべてのエラーが対象です。Carrd は Ikiform のメッセージを表示しないので、失敗時のテキストは一般的な内容にしておいてください。

> フォームのスパムチェックはオフのままにします。AJAX の送信では Ikiform の確認ページを表示できないため、チェックがオンのフォームは `403 challenge_required` を返し、Carrd は毎回 On Failure を表示します。

## Pro Standard での Embed 要素

**Add Element** > **Embed** をクリックし、**Type** を **Code**、**Style** を **Inline** にして、フォームを貼り付けます。埋め込みはビルダーでは描画されないので、確認するには公開してください。

`Embed`:

```html
<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="email" type="email" placeholder="Email" autocomplete="email" required>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Join the waitlist</button>
</form>
```

これは通常のフォームとして送信されるので、オンにすれば[人間確認](https://ikiform.com/ja/docs/spam.md#human-check)も動きます。`<style>` ブロックでスタイルを付けるか、より完全な[サイトビルダー用の埋め込み](https://ikiform.com/ja/docs/guides/site-builders.md#embed)から始めてください。

## 許可ドメイン

どちらの方法でも、ブラウザーは Carrd のページから送信するので、許可ドメインは通常どおり動きます。

| フォームが動く場所 | 許可ドメインに追加するもの |
| --- | --- |
| 無料またはデフォルトの URL | `your-site.carrd.co` |
| Pro のブランドなし URL | `your-site.crd.co` |
| 独自ドメイン | `example.com`（`www.example.com` も含まれます） |

- `carrd.co` や `crd.co` だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

## テストのチェックリスト

1. サイトを公開します。フォームと埋め込みは公開されたサイトでしか動きません。
2. フォームを送信し、Carrd が On Success のメッセージを表示するか、埋め込みの場合はサンクスページに移動することを確認します。
3. Ikiform で送信データを開き、フィールド名が自動生成されたものではなく、設定した ID になっていることを確認します。
4. フォームにフィールドが定義された状態で無効なメールアドレスを送信し、Carrd が On Failure を表示することを確認します。

## トラブルシューティング

| 症状 | 原因 | 対処 |
| --- | --- | --- |
| 送信のたびに Carrd が On Failure を表示する | Ikiform が送信を拒否した: XML なら `415`、Unknown field やファイルなら `422`、チェックがオンなら `403 challenge_required`、**Reject** なら `403 origin_not_allowed` | Default の形式を使い、フィールドの ID を合わせ、File フィールドを削除し、チェックをオフにし、ドメインを追加します。 |
| Ikiform のフィールド名が、設定した ID ではなくラベルのようになっている | **Submitted ID** と **ID** が空のままだった | ID を設定して、もう一度公開します。 |
| 送信データが `origin_mismatch` でスパムフィルターの下に届く | 送信したページが、フォームの許可ドメインに含まれていない | 上の表のホストを追加します。**Reject** を選んでいる場合、同じ送信には代わりに `403 origin_not_allowed` が返ります。 |
| ビルダーで埋め込みが空白になっている | Carrd はビルダーで埋め込みのコードを実行しない | 公開して、本番のサイトで確認します。 |

## 関連ページ

- [サイトビルダー](https://ikiform.com/ja/docs/guides/site-builders.md): どのビルダーでも使える埋め込み。
- [HTML フォーム](https://ikiform.com/ja/docs/html.md): リダイレクト、予約済みフィールド、ハニーポット。
- [エラー](https://ikiform.com/ja/docs/errors.md): すべてのエラーコードと、その原因と対処。
- [許可ドメイン](https://ikiform.com/ja/docs/spam.md#allowed-domains): オリジンの照合方法と、一致しない場合の動作。