複数ページのフォームで、ユーザーが選択したときに自動的にページが進むようにしたいですか?簡単なコードスニペットで、ユーザーが回答を選択すると自動的に次のページに移動し、よりスムーズなフォームエクスペリエンスを実現できます。この機能強化により、クリック数が減り、フォームをより直感的に入力できるようになります。
このガイドでは、ユーザーの選択に基づいて複数ページのフォームを自動的に進める方法を紹介します。
フォーム構造の作成
まず、フォームフィールドと改ページを持つ複数ページのフォームが必要です。
このチュートリアルでは、スワッグシートのフォームを作成し、イメージチョイスを使用した3つの複数選択フィールドを作成します。各選択肢には改ページが含まれます。
複数ページのフォームを作成する際にヘルプが必要な場合は、複数ページのフォーム作成に関するガイドをご覧ください。
自動アドバンスCSSの追加
フォームが選択されると自動的に次のページに移動するようにしたいので、このフォームの「次へ」ボタンを非表示にするCSSを追加します。これを実現するには、このCSSをあなたのサイトにコピーしてください。
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
交換を忘れずに 1000 をフォームのIDに置き換えてください。フォームIDを見つけるのにお困りでしたら、以下のガイドをご覧ください。 フォームとフィールドIDの見つけ方.
自動アドバンスJavaScriptの追加
次に、このコード・スニペットを追加して、自動ページ送りを有効にしてください。コード・スニペットの追加にヘルプが必要な場合は、コード・スニペットの追加に関するチュートリアルをご覧ください。
スクリプトは、フォームIDを使って特定のフォームをターゲットにして動作します。 1000 イメージ・チョイス入力のクリックをリッスンし、トリガーする。 次のページ ボタンが自動的にクリックされる。
カスタマイズ・オプション
jQueryセレクタを調整することで、特定の質問をターゲットにするようにこの機能を変更することができます。
以下は、「はい」を選択した場合にのみ進む例である：
function wpf_dev_conditional_next_page() {
?>
<script type="text/javascript">
jQuery(function() {
jQuery( "ul#wpforms-1000-field_25 li input" ).click(function() {
if (jQuery(this).val() === "Yes")
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
else
location.assign( "https://myexamplesite.com/home" );
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 30);
Elementorポップアップとの併用
フォームが Elementor ポップアップの中にある場合は、代わりにこの修正版を使用してください：
function wpf_dev_automatic_next_page_elementor_popup() {
?>
<script type="text/javascript">
jQuery( document ).on( 'elementor/popup/show', function( event, popup ) {
jQuery( "form#wpforms-form-3241 ul.wpforms-image-choices input" ).click(function() {
jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_next_page_elementor_popup', 30);
これで完了です！これで、フォームフィールドの回答に基づいて自動的に次のページに移動できるようになりました。次に、ユーザーの回答に基づいてページ全体をスキップする方法を学びたいですか?詳しくは、条件付きロジックを使用して改ページをスキップするチュートリアルをご覧ください。