ご注意!

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

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

閉じる

日付ピッカーで条件付きロジックを使用する方法

ユーザーの年齢に基づいてフォームフィールドを表示または非表示にしたいですか? WPFormsの「日付ピッカー」フィールドとカスタム条件付きロジックを組み合わせることで、ユーザーの入力に適応する動的なフォームを作成できます。

このガイドでは、ユーザーが21歳以上であることを示した場合にのみドロップダウンフィールドを表示する方法を説明します。これは、年齢制限のあるコンテンツ、イベント登録、または同様のシナリオに最適です。

フォームの設定

まず、これらのフィールドを持つフォームを作成します:

  • 氏名フィールド
  • メールフィールド
  • 日付フィールド(生年月日用)
  • ドロップダウンフィールド(最初は非表示になります)

フォームの作成にヘルプが必要な場合は、最初のフォームの作成ガイドをご覧ください。

CSSクラスの追加

フォームが最初に読み込まれたときにドロップダウンフィールドを非表示にしたいので、それにCSSクラス名を追加する必要があります。

これを行うには、フォームエディターでドロップダウンフィールドを選択し、高度な設定をクリックします。次に、CSSクラスまでスクロールダウンしてage-restrictionと入力します。変更を保存するには、必ずフォームの保存をクリックしてください。

ドロップダウンフィールドのCSSクラスにage-restrictionという名前を追加する

日付フィールドに条件付きロジックを使用する

次に、コードスニペットをサイトに追加します。このコードは、フォームが読み込まれたときに最初にドロップダウンフィールドを非表示にします。次に、生年月日フィールドが変更されるたびに、ユーザーが21歳以上かどうかを計算し、それに応じてドロップダウンフィールドを表示または非表示にします。

コード内のこれらの値を更新することを忘れないでください:

  • フォームID(例では2575)は、独自のフォームIDに置き換えてください
  • 日付ピッカーフィールドID(例では22)は、フィールドIDに置き換えてください

これで、日付ピッカーフィールドで条件付きロジックを使用するために必要なすべてが揃いました。次に、日付ピッカーポップアップの位置を変更したいですか? 日付ピッカーポップアップの位置を変更する方法のチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end