Pick a time for your demo. You'll get a calendar invite right away.
``` - `noindex` で検索結果に出ないようにします。Google からそこに来る人はいないはずで、アナリティクスでサンクスページが入口になっていれば、どこかがそこにリンクしている兆候です。 - 再読み込みしても安全です。Ikiform が `303` を返したので、ブラウザーはこのページを GET で読み込んでおり、再読み込みしても何も再送信されません。 - このページでコンバージョンを数えるなら、セッションごとに 1 回だけ数えてください。再読み込みやブックマークでも読み込まれます。本当の件数は Ikiform のダッシュボードにあります。 ## 別のサイトへリダイレクトする 自分のページを飛ばして、`cal.example.com` や日程調整サービスのドメインなど、別ドメインの予約ツールへ直接送りたいとします。`_redirect` を使うなら、そのドメインを **Allowed domains** に入れる必要がありますが、このリストにはもう 1 つの役割があります。どのサイトがフォームに送信できるかを決めることです。日程調整サービスのドメインを追加すると、そのドメインのページからもフォームに送信できるようになります。 代わりにフォームの設定で **Redirect after submit** を使ってください。設定できるのは自分のワークスペースだけなので任意の URL を受け付け、**Allowed domains** には自分のサイトだけを残せます。 > Ikiform は指定された URL にそのままリダイレクトします。送信 ID やフィールドの値は付け足さないので、リダイレクトから予約ページに値を事前入力することはできません。予約ページでメールアドレスを改めて尋ねるか、自分のサンクスページから予約ページにリンクしてください。 ## フォームごとに別のページ ダッシュボードの設定はフォームごとに 1 つの URL です。1 つのフォームを、別々のサンクスページが必要な複数のページに置く場合は、設定を空にして各ページに専用の `_redirect` を持たせます。ドイツ語のページなら訪問者をドイツ語のサンクスページに送ります。 `de/demo.html`: ```html ``` ### リダイレクトに値を付ける `_redirect` のクエリ文字列は保持されるので、訪問者の選択をサンクスページに渡せます。値は submit リスナーで設定します。これはブラウザーの検証のあと、フォームがエンコードされる前に実行されます。 `demo.js`: ```js const form = document.querySelector("form"); const redirect = form.elements.namedItem("_redirect"); form.addEventListener("submit", () => { const size = form.elements.namedItem("team_size").value; const next = new URL("https://example.com/demo/next-step"); next.searchParams.set("size", size); redirect.value = next.href; }); ``` 訪問者は `/demo/next-step?size=11-50` に移動し、ページはそのチーム規模に合った予約リンクを表示できます。個人を特定しない値に限ってください。クエリ文字列はブラウザーの履歴、サーバーのログ、アナリティクスに残ります。 ## fetch で送信したあとのリダイレクト `fetch` の呼び出しが受け取るのはリダイレクトではなく JSON なので、Ikiform のリダイレクトのルールは適用されません。応答が `ok` なら自分で移動してください。 `スクリプトからリダイレクト`: ```js const response = await fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form), }); const result = await response.json(); if (result.ok) location.assign("/demo/next-step"); ``` 戻るボタンでフォームに戻れるようにするなら、`location.replace` ではなく `location.assign` を使います。エラーや読み込み中の状態を含む完全なハンドラーは[リロードなしのガイド](https://ikiform.com/ja/guides/html-form-submission/without-page-reload.md)にあります。 ## 動作を確認する 1. フォームの **Allowed domains** に自分のサイトのドメインを追加し、開発中は `localhost` も追加します。空のままにすると、どこからの送信も受け付けます。 2. 公開中のページからフォームを送信します。アドレスバーに自分のサンクスページが表示され、Network パネルでは送信に `303` が返っています。 3. サンクスページで再読み込みします。ブラウザーは再送信を確認せず、ダッシュボードの送信データも 1 件のままです。 4. `_redirect` を許可されていないドメインのアドレスに変えて送信します。エラーなしで、代わりに Ikiform がホストするサンクスページに移動します。 5. ダッシュボードで **Submissions** を開きます。送ったすべてのフィールドを含む新しい送信データがあります。 ## ハマりどころ | 問題 | 原因と対処 | | --- | --- | | ドメインは許可されているのに `_redirect` が無視される | フォームの設定で **Redirect after submit** が設定されていて、常にそちらが優先されます。ページごとのリダイレクトを使うには設定を消してください | | 本番では動くが `localhost` では動かない | `_redirect` はポートなしの `https:` でなければならないので、`http://localhost:3000/thanks` は通りません。プレビューデプロイでテストするか、ローカルではホストされたページで良しとしてください | | ホストされたサンクスページにサイトへ戻るリンクがない | 戻るリンクが出るのは、フォームの許可ドメインにある `https:` のページから送信されたときだけです。ドメインを追加するか、自分のページへリダイレクトしてください | | ブラウザーが自分のページではなく Ikiform のサンクスページに移動する | `_redirect` は、ドメインが **Allowed domains** にあり、`https:` の URL でないと無視されます。ドメインを追加するか、代わりにフォーム設定で **Redirect after submit** を設定してください。 | | サンクスページが検索結果に表示される | ページに `` を追加し、ナビゲーションからリンクしないでください | 通る URL と通らない URL の例を含む正確なルールは [HTML フォーム](https://ikiform.com/ja/docs/html.md#redirect-rules)にあります。応答が `302` や `200` ではなく `303` である理由は[概要](https://ikiform.com/ja/guides/html-form-submission.md#response)で説明しています。 ## よくある質問 ### HTML フォームの送信後に別のページへリダイレクトするには？ フォームを受け取るサーバーが、そのページへの 303 リダイレクトを返します。Ikiform では、フォームの設定で Redirect after submit を設定するか、フォームの許可ドメインにある https の URL を持つ hidden の _redirect 入力欄を追加します。 ### _redirect が無視されるのはなぜですか？ フォームの Redirect after submit が設定されていて常にそちらが優先されているか、URL がルールを満たしていないかのどちらかです。https で、許可ドメインかそのサブドメイン上にあり、ポート、ユーザー名、パスワードを含まない必要があります。許可ドメインのないフォームは _redirect を無視します。 ### フォーム送信後に別のウェブサイトへリダイレクトできますか？ はい。フォームの Redirect after submit の設定に URL を入れてください。任意の http か https の URL を受け付けます。代わりに _redirect を使うと、そのサイトを許可ドメインに追加することになり、そのサイトからもフォームに送信できるようになります。 ### サンクスページに訪問者の送信内容を表示できますか？ Ikiform のリダイレクトではできません。URL をそのまま使うからです。submit リスナーで個人を特定しない値を _redirect の URL に付けるか、fetch で送信したあとに自分のスクリプトでメッセージを表示してください。 ## その他のガイド - [HTML フォームの送信](https://ikiform.com/ja/guides/html-form-submission.md): フォームが送信されたときにブラウザーが行うこと。どのフィールドを送り、どうエンコードし、サーバーは何を返すべきか、そして Ikiform がどう応答するかを解説します。 - [ページを再読み込みせずに](https://ikiform.com/ja/guides/html-form-submission/without-page-reload.md): fetch と FormData でフォームを送り、訪問者をページにとどめる。フィールドのエラー、読み込み状態、リトライ、スクリプト失敗時のフォールバック付き。 - [action 属性](https://ikiform.com/ja/guides/html-form-submission/action-attribute.md): フォームの action 属性の役割、相対値や空の値の解決のされ方、formaction で 1 つのフォームを 2 か所に送る方法、静的ホストが 405 を返す理由を解説します。 - [フォームのバリデーション](https://ikiform.com/ja/guides/html-form-submission/validation.md): required、type、pattern、min でフォームを検証し、:user-invalid でエラーをスタイリングし、同じルールをフィールド定義でサーバー側にも適用します。