HTML フォーム

プレーンな HTML フォームだけで連携は完了です。スクリプトも iframe も埋め込みも不要です。action にフォームのエンドポイントを設定し、マークアップと CSS はそのまま使います。カスタム HTML を貼り付けられるサイトビルダーでも使えます。サイトビルダーを参照してください。

基本のフォーム

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

• method は post にする必要があります。ブラウザーは application/x-www-form-urlencoded を送り、enctype を設定した場合は multipart/form-data を送ります。どちらでも動きます。
• name を持つコントロールはすべてフィールドになります。名前のないコントロールや無効化されたコントロールは、ブラウザーから送信されません。
• 値は UTF-8 のテキストとして保存され、NFC に正規化され、CRLF の改行は LF に変換され、制御文字は削除されます。
• required や type="email" などのブラウザーでのバリデーションは入力する人の助けにはなりますが、セキュリティチェックではありません。サーバーで Ikiform にルールを適用させるには、フィールドを定義してください。

送信後

ブラウザーからの送信が成功すると、303 リダイレクトで応答します。Ikiform は次の順番でリダイレクト先を選びます:

1. ダッシュボードのフォームの Redirect after submit（送信後のリダイレクト）設定。ワークスペースのメンバーしか設定できないため、http: でも https: でも任意の URL を使えます。
2. 送信に含まれる _redirect（または _next）フィールド。下記のルールを満たす場合に限ります。
3. それ以外の場合は、/f/<formId>/thanks にある Ikiform のホストされたサンクスページ。フォームに許可ドメインがあり、そのいずれかの https: ページから送信された場合、サンクスページにはそのページへ戻るリンクが表示されます。

_redirect のルール

_redirect の値は訪問者のブラウザーから送られるため、Ikiform がそれに従うのは、ユーザー名、パスワード、独自ポートのない https: の URL で、フォームの許可ドメインまたはそのサブドメイン上にある場合だけです。許可ドメインのないフォームは _redirect を完全に無視します。許可ドメインが example.com の場合:

従わなかった _redirect は、ホストされたサンクスページへのリダイレクトになります。エラーになることはありません。JSON のリクエストはリダイレクトを無視し、送信 ID 付きの 201 を受け取ります。

送信が拒否された場合

必須フィールドがないなどの理由で送信が拒否されると、ブラウザーにはエラーの HTTP ステータスでホストされたエラーページが表示されます。問題点をフィールドのラベルごとに一覧にし、フォームへ戻るリンクを表示します。すべてのコードはエラーを参照してください。

フィールド名と配列

同じ名前が繰り返される場合や、名前が [] で終わる場合は配列になります。チェックボックスのグループや <select multiple> には [] を使うと、1 つだけ選ばれた場合でも配列として保存されます。

<fieldset>
  <legend>Topics</legend>
  <label><input type="checkbox" name="topics[]" value="billing" /> Billing</label>
  <label><input type="checkbox" name="topics[]" value="api" /> API</label>
</fieldset>

<select name="plan">
  <option value="starter">Starter</option>
  <option value="team">Team</option>
</select>

<label><input type="checkbox" name="newsletter" /> Send me product news</label>

両方のトピックとニュースレターのボックスにチェックを入れると、次のように保存されます:

{
  "topics": ["billing", "api"],
  "plan": "team",
  "newsletter": "on"
}

• address[city] のような角かっこを含む名前は、そのまま保存されます。ネストしたオブジェクトには変換されません。ネストした値が必要な場合は JSON を送信してください。
• チェックされていないチェックボックスは送信されません。checkbox のフィールドを定義すると、送られなかったボックスは false、チェックされたボックスは true として保存されます。
• 1 件の送信には最大 100 個のフィールド、128 文字までの名前、16 KB までの値を含められます。制限を参照してください。

予約済みフィールド

_ で始まる名前は Ikiform への指示です。回答として保存されることはありません。

_ で始まるその他のフィールドも除外されるので、_source のような名前を、保存せずに使う独自の非表示マーカーとして使えます。

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <input type="hidden" name="_subject" value="New demo request" />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a demo</button>
</form>

ハニーポット

ハニーポットのデフォルト名は _gotcha です。フォームの設定の Honeypot field（ハニーポットフィールド）でフォームごとに変更でき、どの名前を選んでも予約済みとして扱われ、保存されることはありません。ほとんどのボットには hidden 属性だけで十分です。スパムがすり抜ける場合は、hidden が付いた入力欄を飛ばすボットもいるため、代わりに入力欄を画面外に隠してください:

<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden">
  <label>
    Leave this empty
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" />
  </label>
</div>

キーボードのユーザーやパスワードマネージャーが入力しないよう、tabindex="-1" と autocomplete="off" は残してください。

人間確認を追加する

スパムチェックが Ikiform に設定されたフォームでは、HTML を変更する必要はありません。ブラウザーがトークンなしで送信すると、Ikiform は ikiform.com 上の短い「人間であることを確認しています」ページで応答します。このページが Cloudflare Turnstile を実行し、元のフィールドをトークン付きで再送信します。訪問者は以前と同じサンクスページにたどり着きます。全体の流れはスパム対策を参照してください。

独自の Turnstile キーを使う場合

フォームで Your own Turnstile keys（独自の Turnstile キー）を使う場合は、ウィジェットを自分で描画します。ウィジェットが送信に cf-turnstile-response フィールドを追加します。有効なトークンのない送信は 403 captcha_failed で拒否されます。

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button>Send</button>
</form>