AI要約
ドロップダウンメニューを利用した条件付き評価フォームの作成にご興味はありますか？アンケート＆投票アドオンを使用すると、訪問者の意見を収集し、さまざまな側面について投票できるフォームをすでに作成できます。
しかし、今回のドキュメントの目的では、ユーザーが数値に基づいて機能を優先順位付けできるフォームを設計することを目指します。優先順位付けのための数値システムが与えられているため、訪問者が選択した異なる機能に対して、重複する優先順位番号を防ぐことが不可欠です。
このチュートリアルでは、すでに選択されている優先順位番号を削除する短いコードスニペットを使用して評価フォームを作成します。これにより、顧客が表明する優先順位から洞察に満ちた意思決定を行うことができます。
フォームの作成
新しいフォームを作成し、必要なフィールドを統合することから始めましょう。フォームは、名前フィールド、オプションのメールフィールド、および評価対象の機能を提供する5つのドロップダウンフィールドで構成されます。
フォームの設定については、最初のフォームの作成に関するこちらの役立つガイドを参照してください。
ドロップダウンフィールドのオプション設定
次に、ドロップダウンフィールドごとに、評価システムを追加する必要があります。このドキュメントの目的では、評価は1〜10の数値に基づいています。1は最も好まれていないオプション、10は最も好まれているオプションを意味します。
もちろん、数値またはテキストのいずれであっても、ご自身に最適なシステムを使用できます。
ドロップダウンのスタイルの選択
ドロップダウンフィールドの高度な設定タブから、フィールドのスタイルとしてクラシックを選択してください。このスニペットは、このスタイルでのみ機能するため、これは非常に重要です。
条件付き評価ロジックの作成
いよいよスニペットをサイトに追加する時間です。スニペットをサイトに追加する場所と方法について支援が必要な場合は、こちらのチュートリアルをご覧ください。
/**
* WPForms Conditional Rating Form
*
* @link https://wpforms.com/developers/how-to-create-a-conditional-rating-form/
*/
function wpf_dev_conditional_dropdown_options( ) {
?>
<script type="text/javascript">
// only run on dropdown fields inside the form ID 2552
jQuery( 'form#wpforms-form-2552 select' ).on( 'change', function() {
jQuery( 'option' ).prop( 'disabled', false);
jQuery( 'select' ).each(function() {
var val = this.value;
jQuery( 'select' ).not(this).find( 'option' ).filter(function() {
return this.value === val;
}).prop( 'disabled', true);
});
}).change();
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_dropdown_options', 30 );
このコードスニペットは、ID 2552で識別されるフォーム内のドロップダウンフィールドをスキャンします。いずれかのフィールドからオプションが選択されると、その特定のオプションは残りのフィールドで選択できなくなります。
フィールドID 2552をフォームのIDに合わせて更新してください。IDの検索に支援が必要な場合は、これらの特定のIDを見つける方法に関するこちらのチュートリアルを参照してください。
これで、オプションが選択されると、他のフィールドで無効になっていることがわかります。
これで完了です！WPFormsのドロップダウンフィールドを使用して、条件付き評価フォームを正常に作成しました。フォームで提供された回答に基づいて送信ボタンを条件付きで非表示にしたいですか？送信ボタンを条件付きで表示する方法に関するチュートリアルをご覧ください。
参照アクション
よくある質問
Q: オプションをリセットするにはどうすればよいですか？
A: ユーザーがオプションについて考え直した場合、戻って新しい選択を行うだけで、事前に選択されていた値はリセットされます。
Q: 条件付きロジックを使用してドロップダウンを表示および非表示にできますか？
A: もちろんです！WPFormsの条件付きロジックを使用して、選択が行われるまで、すべてのドロップダウンを非表示にすることができます。このロジックを追加する際は、適用する必要のあるロジックを確認およびテストする必要があります。たとえば、機能1が「— 1つ選択 —」ではない限り、機能2は非表示になります。
