Carrd のフォーム：送信データをフォームバックエンドに送る

Carrd のフォームには Pro プランが必要です。Pro Standard ではお問い合わせフォームと登録フォームが使え、Pro Plus では任意の URL に送信できるカスタムフォームが加わります。Pro Plus ではカスタムフォームを Ikiform のエンドポイントへの Send to URL に設定すれば、Carrd 自身の成功メッセージも残ります。Pro Standard では HTML のフォームを Embed 要素に貼り付ければ、アップグレードせずに自由なフィールドを使えます。

Carrd ならではの違い

Carrd に送信数の上限はありません。フォームの機能をプランで分けており、各プランは決まった数のサイトに対する年額料金です。2026 年 10 月時点で、Carrd の料金ページとドキュメントでは次のように分かれています。

Carrd のお問い合わせフォームは各メッセージを @mail.carrd.site からメールで届けるので、受信トレイが記録になり、迷惑メールに振り分けられたメッセージは見落としがちです。移行するよくある理由はこれです。1 つのメールボックスではなく、保存されて検索できる一覧、エクスポート、チーム全員への通知がほしいのです。

Mailchimp、Kit などのメールツールに新しい購読者を追加したいだけなら、Pro Standard の Carrd の Signup フォームですでにでき、そちらのほうが適しています。Ikiform にはメールツールとのワンクリック連携はありません。

Pro Plus：Send to URL

Carrd のフォームエディターとスタイルをそのまま使え、コードは不要です。以下のフィールドは写真家の撮影予約の問い合わせ用です。自分のものに置き換えてください。

1. Add Element > Form をクリックし、Type を Custom に、続いて Send to URL に設定します。
2. エンドポイントを URL に貼り付けます。
3. Method を AJAX に、Format を Default に設定します。Carrd は 2xx の応答をすべて成功とみなし、Ikiform は送信を保存すると 201 を返します。
4. フィールドを追加します：Text name、Email email、Select service、Date preferred_date、Text Area details。各フィールドの ID を設定してください。設定しないと Carrd がラベルから生成します。
5. On Success で、表示するメッセージかセクションを選びます。On Failure の文言は一般的なものにしておきます。Carrd は Ikiform のエラーメッセージを表示しません。
6. 公開します。フォームが送信できるのは公開したサイトからだけです。

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Hidden フィールドは常に設定済みの値を送るので、ここではハニーポットとして機能しません。それでも、Ikiform のスパムスコア、レート制限、許可ドメインはすべての送信に適用されます。このフォームでは Ikiform の Spam check をオフのままにしてください。AJAX の送信ではチェックを表示できず、403 challenge_required で失敗します。

Pro Standard：Embed 要素

Pro Standard では Carrd でカスタムフォームを作れませんが、貼り付けることはできます。Add Element > Embed をクリックし、Type を Code に、Style を Inline にして、これを貼り付けます。Carrd のフォームのスタイルは埋め込みコードには届かないので、独自のスタイルを含めています。

<form id="booking" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="name" placeholder="Name" autocomplete="name" required>
  <input name="email" type="email" placeholder="Email" autocomplete="email" required>
  <select name="service" required>
    <option value="" disabled selected>What do you need?</option>
    <option value="portrait">Portrait session</option>
    <option value="event">Event coverage</option>
    <option value="product">Product photos</option>
  </select>
  <input name="preferred_date" type="date" aria-label="Preferred date">
  <textarea name="details" rows="4" placeholder="Anything else?" maxlength="2000"></textarea>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Request a booking</button>
  <p id="booking-note" role="status"></p>
</form>
<style>
  #booking { display: grid; gap: 0.75rem; font: inherit; }
  #booking input, #booking select, #booking textarea { font: inherit; padding: 0.75rem; border: 1px solid #ccc; border-radius: 0.5rem; }
  #booking button { font: inherit; padding: 0.75rem; border: 0; border-radius: 0.5rem; background: #111; color: #fff; }
</style>
<script>
  const booking = document.getElementById("booking");
  booking.addEventListener("submit", async (event) => {
    event.preventDefault();
    const note = document.getElementById("booking-note");
    note.textContent = "Sending";
    try {
      const response = await fetch(booking.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(booking),
      });
      const result = await response.json();
      if (result.ok) {
        booking.replaceChildren("Thanks. I'll reply with availability.");
        return;
      }
      const fields = result.error.fields ?? {};
      note.textContent = fields.preferred_date?.[0] ?? fields.email?.[0] ?? result.error.message;
    } catch {
      note.textContent = "Couldn't send. Try again, or email me directly.";
    }
  });
</script>

• スクリプトは fetch で送信し、フォームをお礼の一文に置き換えるので、ページは変わりません。
• Carrd の Hidden フィールドと違い、非表示の _gotcha 入力欄はここでは本物のハニーポットです。
• スクリプトの読み込みに失敗しても、フォームは通常どおり送信されます。target="_top" で、結果がフレームの中に開くのを防ぎます。
• 埋め込みは Carrd のエディターでは動きません。フォームを見るには公開してください。

どちらの版も同じフィールドを送ります。テストが届いたら、Ikiform でフィールドを定義します。

Carrd の許可ドメイン

your-site.carrd.co（Pro なら your-site.crd.co）と独自ドメインを追加します。carrd.co 単体は追加しないでください。すべての Carrd サイトが送信できるようになってしまいます。Carrd のドキュメントガイドに、すべての設定とその理由があります。

Carrd で動作を確認する

1. フォームの Allowed domains に自分のサイトのドメインを追加し、開発中は localhost も追加します。空のままにすると、どこからの送信も受け付けます。
2. 公開し、公開したサイトでフォームを送信します。
3. Carrd に On Success が表示されるか、埋め込みにお礼の一文が表示されることを確認します。
4. ダッシュボードで Submissions を開きます。送ったすべてのフィールドを含む新しい送信データがあります。
5. name が設定した ID になっていること、preferred_date が 2026-11-14 のような形式であること、想定していない utm_ フィールドが届いていないことを確認します。
6. 通知の各受信者の受信トレイを確認します。それぞれにフィールド入りのメールが届き、フォームに email フィールドがあれば Reply で送信者に返信できます。

ハマりどころ

よくある質問