### [マルチページフォームで自動的に次のページに移動する](https://wpforms.com/developers/how-to-move-to-the-next-page-automatically/) **公開日:** 2022年6月29日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、フォームフィールドの回答に基づいて、マルチページフォームの次のページに自動的に移動する方法を紹介します。 **コンテンツ:** ユーザーが選択を行うと、マルチページフォームが自動的に進むようにしたいですか？簡単なコードスニペットを使用すると、ユーザーが回答を選択したときに自動的に次のページに移動することで、よりスムーズなフォームエクスペリエンスを作成できます。この機能強化により、クリック数が減り、フォームがより直感的に完了できるようになります。 このガイドでは、ユーザーの選択に基づいてマルチページフォームを自動的に進める方法を説明します。 ## フォーム構造の作成 まず、フォームフィールドとページ区切りを含むマルチページフォームが必要です。 このチュートリアルの目的のために、スワッグシートフォームを作成します。3つの**画像選択**を使用した**複数選択**フィールドがあります。各選択には**ページ区切り**が含まれます。 マルチページフォームの作成にヘルプが必要な場合は、[マルチページフォームの作成](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/)に関するガイドを確認してください。 ## 自動アドバンスCSSの追加 **いずれか**の選択に基づいてフォームが自動的に次のページに進むようにしたいので、このフォームの**次へ**ボタンを非表示にするCSSを追加します。これを実現するには、このCSSをサイトにコピーしてください。 ``` form#wpforms-form-1000 button.wpforms-page-button { visibility: hidden; } ``` `1000`をフォームのIDに置き換えることを忘れないでください。フォームIDの見つけ方にヘルプが必要な場合は、[フォームIDとフィールドIDの見つけ方](https://wpforms.com/docs/how-to-use-the-forms-locator-in-wpforms/)に関するガイドを確認してください。 ## 自動アドバンスJavaScriptの追加 次に、このコードスニペットを追加して、自動ページアドバンスを有効にします。コードスニペットの追加にヘルプが必要な場合は、[コードスニペットの追加](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)に関するチュートリアルを確認してください。 **注意:** このコードは、`.wpforms-image-choices`クラスを使用して**画像選択**を対象としています。 フィールドが**アイコン選択**を使用している場合は、`.wpforms-image-choices`を`.wpforms-icon-choices`に置き換えて**12行目**のセレクターを更新すると、スクリプトが正しく機能します。 スクリプトは、フォームIDを使用して特定のフォームを対象とし（IDを`1000`に置き換えてください）、画像選択入力のクリックをリッスンし、選択が行われたときに**次へ**ボタンのクリックを自動的にトリガーすることで機能します。 ## カスタマイズオプション jQueryセレクターを調整して特定の質問を対象にする、アドバンスする条件を追加する、または回答に基づいて異なるページにリダイレクトするなど、この機能を変更できます。 「**はい**」が選択された場合にのみ進む例を次に示します。 ``` function wpf_dev_conditional_next_page() { ?> **カテゴリー:** 拡張 **タグ:** Javascript, jQuery, JS, PHP ---