AI要約
複数ページフォームで、ユーザーが選択肢を選んだときに自動的に次のページに進むようにしませんか？簡単なコードスニペットを使用すると、ユーザーが回答を選択したときに自動的に次のページに進むようにすることで、よりスムーズなフォーム体験を作成できます。この機能強化により、クリック数が減り、フォームの入力がより直感的になります。
このガイドでは、ユーザーの選択に基づいて複数ページフォームを自動的に進める方法を説明します。
フォーム構造の作成
まず、フォームフィールドとページ区切りを含む複数ページフォームが必要です。
このチュートリアルの目的で、スワッグシートフォームを作成します。3つの画像選択肢を使用した選択式フィールドがあります。各選択肢にはページ区切りが含まれます。
複数ページフォームの作成にヘルプが必要な場合は、複数ページフォームの作成に関するガイドをご確認ください。
自動進捗CSSの追加
すべての選択に基づいてフォームが自動的に次のページに進むようにしたいので、このフォームの次へボタンを非表示にするCSSを追加します。これを実現するには、このCSSをサイトにコピーしてください。
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
1000をフォームのIDに置き換えることを忘れないでください。フォームIDの見つけ方がわからない場合は、フォームおよびフィールドIDの見つけ方に関するガイドをご覧ください。
自動進捗JavaScriptの追加
次に、このコードスニペットを追加して自動ページ進捗を有効にします。コードスニペットの追加にヘルプが必要な場合は、コードスニペットの追加に関するチュートリアルをご確認ください。
注意：このコードは、.wpforms-image-choicesクラスを使用した画像選択肢を対象としています。
フィールドがアイコン選択肢を使用している場合は、12行目のセレクターを.wpforms-image-choicesから.wpforms-icon-choicesに置き換えてスクリプトが正しく機能するように更新してください。
このスクリプトは、フォームID（1000をIDに置き換えてください）を使用して特定のフォームを対象とし、画像選択肢の入力フィールドでのクリックを監視し、選択が行われたときに次へボタンのクリックを自動的にトリガーすることで機能します。
カスタマイズオプション
この機能を変更して特定の質問を対象にしたり、進捗させる条件を追加したり、回答に基づいて異なるページにリダイレクトしたりすることができます。
「はい」が選択された場合にのみ進捗する例を次に示します。
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);
これで完了です！フォームフィールドの回答に基づいて、自動的に次のページに進むことができるようになりました。次に、ユーザーの回答に基づいてページ全体をスキップする方法を学びたいですか？詳細については、条件付きロジックを使用する際にページ区切りをスキップするに関するチュートリアルをご覧ください。