AI要約
特定の日に基づいて支払いフィールドを表示することは、多くのWordPressウェブサイトで一般的な要件です。これは、イベント登録、季節の予約、または時間制限のあるサービスを扱っている場合に特に役立ちます。
WPForms計算アドオンを使用すると、顧客が日付/時刻フィールドで特定の日付を選択した場合にのみ、フォームに支払いフィールドを表示できます。
このガイドでは、WordPressサイトで日付入力に基づいて支払いフィールドを表示する方法を説明します。
WordPressで日付に基づいて支払いフィールドを表示する方法
ステップ1: WPFormsプラグインのインストールと有効化
WPFormsは、WordPressで基本的なフォームから高度なフォームまで作成できる、最高のドラッグ＆ドロップフォームビルダープラグインです。
シンプルなコンタクトフォームから、条件付きロジックのようなより高度な機能まで、複数のサイトでうまく機能した信頼できるツールです。
WPFormsのProライセンスには、計算アドオンへのアクセスが含まれており、WordPressフォームで単純な数学演算から複雑な数学演算まで実行できます。
Proライセンスを購入したら、WordPressサイトにWPFormsをインストールして有効化する必要があります。初めての場合は、このガイドを確認してWPFormsのインストール方法を学んでください。
ステップ2：計算アドオンのインストール
WPFormsプラグインをインストールした後、計算アドオンもインストールする必要があります。
アドオンをインストールするには、WordPress管理エリアに移動し、WPForms » Addonsにアクセスします。次に、Calculationsアドオンが見つかるまで下にスクロールするか、検索バーを使用します。見つけたら、Addonのインストールをクリックします。
サイトに計算アドオンをインストールして有効化したら、WordPressフォームの作成に進みます。
ステップ3：支払いフォームの作成
あなたはゼロからフォームを構築したり、フォームテンプレートを使用したり、WPForms AIでフォームを生成したりできます。このチュートリアルでは、ゼロから新しいフォームを作成します。
開始するには、WPForms » Add Newに移動します。次に、Blank Formウィジェットにカーソルを合わせ、Blank Formの作成をクリックします。
フォームビルダーで、必要なフィールドをフォームに追加します。フィールドをドラッグ＆ドロップするか、クリックしてフォームビルダーに追加できます。
このチュートリアルでは、支払いフィールドを追加し、支払いとフィールドの設定を構成済みであることを前提とします。日付入力に基づいて支払いフィールドを非表示/表示するロジックの実装に焦点を当てます。
こちらも読む: WordPressでフォーム履歴を表示する方法
ステップ4：日付入力に基づいて支払いフィールドを表示するためのロジックを有効にする
このセクションでは、日付/時刻フィールドからの入力に基づいてフォームの支払いフィールドを非表示/表示できる2つの実用的な例を示します。
日付入力に基づいて支払いフィールドを表示する
これを行うために、まず日付/時刻フィールドと2つの非表示フィールドをフォームに追加します。複数項目フィールドを支払いフィールドとして使用します。したがって、これもフォームに含めるようにしてください。
次に、日付/時刻フィールドをクリックして、そのフィールドオプションパネルにアクセスします。次に、高度な設定タブを選択します。
ここに表示されたら、日付の形式を確認します。デフォルトでは、これはm/d/Yに設定されています。ここで、mは月、dは日、Yは年を表します。
日付の形式を確認した後、フォームに追加した非表示フィールドのいずれかをクリックして、フィールドのラベルを変更します。私は自分のものをデフォルト日付と名付けましたが、好きな名前を選ぶことができます。
次に、高度な設定タブをクリックし、フィールドのデフォルト値を、条件付きロジックで確認したい日付に設定します。
その後、フォームの2番目の非表示フィールドをクリックし、高度な設定タブを選択します。次に、計算を有効にするオプションをオンにします。
計算式ビルダーで、ユーザーが日付/時刻フィールドで選択した値と、最初の非表示フィールドで指定したデフォルト日付を比較するロジックを記述します。一致する場合は、フィールドの値を1に設定します。それ以外の場合は、計算結果は0になります。このロジックを実装するための式は次のとおりです。
if ( $F12_date == $F14 ):
1
else:
0
endif;
上記の式では、変数$F12_dateは日付/時刻フィールドの日付サブフィールドを参照しています。一方、$F14はデフォルト日付を指定した非表示フィールドを表します。
変数名の数値を、フォームのフィールドに合わせて置き換える必要があります。数式の作成方法については、計算アドオンを使用した数式の作成に関するチュートリアルをご覧ください。
式を追加した後、条件付きロジックを有効にしたい支払いフィールドをクリックします。次に、スマートロジックタブを選択し、条件付きロジックを有効にするオプションをオンにします。
有効になったら、計算が有効になっている非表示フィールドを確認するように条件を設定する必要があります。ロジックは非表示フィールドが1の場合にこのフィールドを表示するように設定しました。これは、日付/時刻フィールドの値と指定したデフォルト日付を比較する式が真の場合、支払いフィールドがフォームに表示されることを意味します。
条件付きロジックを有効にした後、保存ボタンをクリックして変更を保存してください。
サイトのフロントエンドでフォームをプレビューすると、日付/時刻フィールドから日付を選択するまで、支払いフィールドはデフォルトで非表示になります。
選択した日付がデフォルト日付非表示フィールドで指定された日付と一致すると、支払いフィールドが表示されます。これで、ユーザーは支払いオプションを選択して購入を完了できます。
ユーザーの年齢に基づいて支払いフィールドを表示する
この例では、ユーザーが18歳以上の場合にのみ支払いフィールドを表示します。開始するには、2つの非表示フィールド、日付/時刻フィールド、および単一商品フィールドを追加します。
次に、非表示フィールドのいずれかを選択し、ラベルを現在の日付に変更します。
次に、詳細設定タブをクリックし、計算を有効にするオプションをオンにします。
数式ビルダーで、以下の関数を追加してください。
now()
この関数は、非表示フィールドの値を現在の日時に設定します。
次に、2番目の非表示フィールドを選択し、ラベルを年齢計算機に設定します。
次に、詳細設定タブを選択し、計算を有効にするオプションをオンにします。数式ビルダーで、以下の関数を追加してください。
years( $F12, $F14 )
years()関数は、2つの日付間の差をチェックし、その差を年単位で返します。
$F12と$F14は、それぞれ日付/時刻フィールドと現在の日付フィールドの変数名です。フィールドに合わせて数値を置き換えてください。
年齢計算機に数式を追加した後、フォームの支払いフィールドを選択してフィールドオプションパネルを開きます。次に、スマートロジックタブに移動し、条件付きロジックを有効にするオプションをオンにします。
次に、条件付きロジックルールのドロップダウンから年齢計算機フィールドを選択します。
その後、ドロップダウンからより大きい演算子を選択します。
最後に、値に17を入力します。ルールは年齢計算機が17より大きい場合にこのフィールドを表示となります。このロジックは、オンライン支払いを規制し、適切な支払いステータスコンプライアンスを確保するのに役立ちます。
ロジックを追加した後、変更を保存してください。フォームをプレビューすると、支払いフィールドはデフォルトで非表示になり、ユーザーが年齢を指定するまで表示されません。
ユーザーの年齢が18歳以上の場合にのみフィールドが表示されます。
ステップ5：支払いフォームの公開
最後に、支払いフォームをページに追加しましょう。これを行うには、フォームビルダーの右上隅にある埋め込みボタンをクリックします。
フォームを新しいページまたは既存のページに公開するオプションがあります。このガイドでは、新しいページを作成オプションを選択します。
新しいページに名前を付けて、開始をクリックします。
フォームがページに埋め込まれたWordPressのページエディタにリダイレクトされます。ページを公開するには、公開ボタンをクリックします。
このページをフロントエンドで確認すると、フォームの支払いフィールドは、日付フィールドの値が条件付きロジックルールで指定された値と一致するまで非表示になります。フォームをショートコードまたはウィジェットを使用して埋め込むことも可能です。
よくある質問 — 日付入力に基づいて支払いフィールドを条件付きで表示する
これらは、日付入力に基づいて支払いフィールドを表示することに関する、よくある質問への回答です。
日付フィールドが空の場合はどうなりますか？
日付フィールドが空の場合、計算結果は0になり、支払いフィールドは非表示になります。この状況を防ぐために、日付フィールドを必須にすることをお勧めします。
WordPressで日付を表示するにはどうすればよいですか？
WPFormsのCalculationsアドオンを使用している場合、now()関数を使用して日付を表示できます。数式ビルダーに関数を入力すると、フィールドの値は現在の日付と時刻に設定されます。
次に、WordPressで継続的な支払いを受け取る
これで完了です！WordPressで日付入力に基づいて支払いフィールドを表示する2つの実用的な方法を学びました。このチュートリアルで説明したプロセスは、サブスクリプションベースの支払いフォームにも適用できます。
WPFormsでサブスクリプションを販売する方法の詳細については、WordPressで定期的な支払いを受け付ける方法に関するチュートリアルをご覧ください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
