Carrd サイトにウェイトリストを追加する方法

Carrd Pro Plus では、AJAX メソッドで Ikiform のエンドポイントに送る Custom フォームを追加し、UTM の収集をオンにして、それらのフィールドを Ikiform で定義します。Pro Standard では、代わりに小さな HTML フォームを Embed 要素に貼り付けます。通常の方法で送信し、ハニーポットを残し、同じページのサンクスセクションに戻します。

Carrd は 1 ページの紹介をいちばん早く公開できる方法なので、ウェイトリストの置き場所にぴったりです。使えるフォームは、何を作るかよりも Carrd のプランで決まるので、まずはそこから始めましょう。

Carrd ならではの違い

• プランでフォームが決まります。 Pro Plus には任意の URL に送れる Custom フォームがあります。Pro Standard には Carrd 独自の送信先に送るお問い合わせフォームと登録フォーム、そして Embed 要素があります。Pro Lite にはフォームも埋め込みもありません。
• Send to URL ではハニーポットを隠せません。 Carrd の Hidden フィールドは常に事前に設定した値を持つので、ボットを捕まえられません。スパムスコアはすべての送信で引き続き実行されます。
• AJAX の送信では人間確認を実行できません。 Carrd は 2xx を成功、それ以外を失敗として読み、Ikiform の確認ページを表示できません。この経路ではスパムチェックをオフのままにしてください。
• 1 ページなので、お礼を伝える場所も 1 つです。 自分で作らない限り、リダイレクト先の 2 ページ目はありません。その役目は Carrd の On Success メッセージか、同じページのセクションが担います。

メールツールにアドレスが入れば十分なら、Carrd 組み込みの登録フォームで足りるかもしれません。Ikiform が役立つのは、すべての登録の保存されたコピー、スパムの除外、登録ごとのメール通知、どこにでも送れる署名付き Webhook がほしいときです。

Pro Plus: Custom フォーム

1. Add Element › Form をクリックします。Type を Custom にし、次に Send to URL にします。
2. URL を https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx に、Method を AJAX に、Format を Default にします。XML は選ばないでください。Ikiform は 415 で拒否します。
3. Email フィールドを 1 つ追加し、Submitted ID を email にします。Carrd はラベルから ID を生成するので、空のままだと email_address などが送られます。
4. Collect UTM parameters にチェックを入れます。リンクに含まれていれば、Carrd は utm_source、utm_medium、utm_campaign、utm_term、utm_content を追加します。
5. On Success を You're on the list. We'll email you at launch. のようなメッセージに、On Failure を一般的な 1 行にします。Export variables と Return endpoint responses をオンにしない限り、Carrd はそこに自分で書いたテキストを表示します。

次に、Ikiform の Fields タブで、UTM フィールドも含めたフィールド定義を追加します:

{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    { "id": "email", "type": "email", "label": "Email", "required": true },
    { "id": "utm_source", "type": "text", "label": "UTM source", "validation": { "max_length": 100 } },
    { "id": "utm_medium", "type": "text", "label": "UTM medium", "validation": { "max_length": 100 } },
    { "id": "utm_campaign", "type": "text", "label": "UTM campaign", "validation": { "max_length": 100 } },
    { "id": "utm_term", "type": "text", "label": "UTM term", "validation": { "max_length": 100 } },
    { "id": "utm_content", "type": "text", "label": "UTM content", "validation": { "max_length": 100 } }
  ]
}

• 5 つの UTM フィールドがないと、タグ付きのリンクから来た登録は Unknown field エラーで拒否され、Carrd は On Failure を表示します。リンクにあるときだけ送られるので、ここでは任意にしておきます。
• File フィールドは追加しないでください。Ikiform はファイルを 422 files_not_supported で拒否します。
• Carrd の Events の設定では、分析の呼び出しなど、成功時に独自のスクリプトを実行できます。メッセージとは別の設定です。

Pro Standard: 埋め込みフォーム

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

<form class="iki-waitlist" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="email" type="email" placeholder="you@company.com" aria-label="Email" autocomplete="email" required>
  <input type="hidden" name="_redirect" value="https://example.com/#joined">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Join the waitlist</button>
</form>

<style>
  .iki-waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; margin: 0 auto; }
  .iki-waitlist input[type="email"] { flex: 1 1 220px; font: inherit; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: 8px; }
  .iki-waitlist button { font: inherit; padding: 12px 18px; border: 0; border-radius: 8px; background: #111; color: #fff; cursor: pointer; }
</style>

• joined という名前の Section Break を追加し、その後ろにお礼の一文を置きます。Carrd はリンクの # の後にセクション名があるとそのセクションを開くので、_redirect で訪問者をそこに案内できます。
• https://example.com を自分の Carrd のアドレスに置き換えます。_redirect はフォームの Allowed domains（許可ドメイン）にある https: の URL でしか機能しないので、そこにもドメインを追加してください。
• target="_top" を付けると、Carrd が埋め込みを包むフレームから抜けて送信されるので、リダイレクト先がウィンドウ全体に読み込まれます。
• これは通常の送信なので、オンにすれば人間確認も機能します。HTML の変更は不要です。

許可ドメイン

carrd.co や crd.co だけを追加してはいけません。すべての Carrd サイトが一致してしまいます。お問い合わせフォーム版は Carrd のドキュメントガイドに、重複登録についてはメインガイドに説明があります。

動作を確認する

1. サイトを公開します。フォームと埋め込みは公開されたページでしか動きません。
2. フォームの Allowed domains に、自分のサイトのドメインと、開発中は localhost を追加します。空にしておくと、どこからの送信も受け付けます。
3. Pro Plus では ?utm_source=test を付けてページを開き、登録します。Carrd が On Success を表示し、Ikiform の送信データでは utm_source が test になっています。
4. Pro Standard では埋め込みから登録します。ページの #joined セクションに移動します。
5. 通知の受信者それぞれの受信箱を確認します。各自にフィールドを載せたメールが届き、フォームに email フィールドがあれば Reply は送信者宛てになります。
6. 何も届かない場合は、ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信データと同じ成功の応答が返ります。

ハマりどころ

よくある質問