ご注意!

この記事にはJavaScriptコードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

条件付きロジック使用時のページ区切りを除外する

条件付きロジックが満たされていない場合に、フォームの改ページをスキップしますか?改ページで条件付きロジックを使用すると、条件が満たされていない場合でも次のページが表示され、ユーザーは空白のページに直面することになります。簡単なJavaScriptスニペットを使用すると、これらの不要なページを簡単にスキップできます。

このチュートリアルでは、簡単なJavaScriptスニペットを使用して空白のページをスキップする方法を説明します。


フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。ここでは、複数の改ページがある見積もりフォームを作成しました。

最初のページでは、ユーザーに関する基本的な情報を収集しています。また、無料の対面見積もりをスケジュールしたいかどうかを尋ねるために、選択式フィールドを追加しました。

はいを選択した場合、2番目のページを表示して個人情報を尋ねます。ただし、いいえを選択した場合は、2番目のページを完全にスキップして、フォームの最後のページに直接ジャンプさせたいと考えています。

WPFormsでの複数ページフォームの作成方法については、チュートリアルをご確認ください。

フォームの作成

条件付きロジックの設定

この例では、最初のページで無料の対面見積もりを希望すると選択した場合にのみ、2番目のページの日付/時刻フィールドと住所フィールドを表示したいと考えています。これにより、興味のない訪問者の時間を節約できるため、希望しない場合はこのページを完全にスキップできます。

2番目のページにある2つのフィールドには、すべて同じロジックが設定されます。ロジックを設定するには、各フィールドを選択し、スマートロジックをクリックします。次に、スイッチを切り替えて条件付きロジックを有効にするにします。

スマートロジックタブをクリック

ドロップダウンから、フィールドの基になった質問を選択します。このチュートリアルでは、質問は無料の対面見積もりをスケジュールしたいですか?という選択式 フィールドでした。

条件付きロジックルールの設定

条件は、選択式フィールドの回答が「はい」の場合はフィールドを表示し、「いいえ」の場合はフィールドを非表示にするというものです。

WPFormsの条件付きロジックの詳細については、こちらのドキュメントをご覧ください

2番目のページにある各フィールドには同じロジックが適用されるため、各フィールドでこの手順を繰り返します。または、レイアウトフィールドを使用して類似のフィールドをグループ化し、レイアウトフィールドの条件付きロジックを有効にすることもできます。

スニペットの追加

次に、以下のスニペットをサイトに追加する必要があります。スニペットをサイトに追加する方法や場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください

このスニペットは、フォームの各ページをループして、空のページがないか確認します。空のページがある場合、スクリプトはそのページを完全にスキップして次に進みます。これにより、フォーム全体のユーザーエクスペリエンスが向上します。

よくある質問

以下に、複数ページフォームでの条件付きロジックの使用に関するよくある質問への回答をいくつか示します。

質問:このスニペットは、Elementorポップアップのようなモーダルウィンドウでも機能しますか?

A: 現時点ではできません。

これで完了です!フォームで条件付きロジックにより非表示になっているページをスキップする方法を学習しました。

フォームフィールドに基づいて、フォームの送信ボタンを条件付きで表示または非表示にしますか?送信ボタンを条件付きで表示する方法のチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end