日付ピッカー付きのWordPressフォームを作成したいですか？
訪問者がフォーム上で日付と時間を選択するために使用できるWordPressの日付範囲ピッカーを追加するのはとても簡単です。
そこでこの記事では、WordPressに日付/時刻ピッカー・フォーム・フィールドを簡単に追加する方法と、カスタマイズする場合のヒントをご紹介します。
この記事で
日付ピッカー付きWordPressフォームの作り方
WPFormsを使えば、特定の日付、時間、またはその両方を選択させるフィールドを追加するのはとても簡単です。
ここでは、日付/時間ピッカー付きのWordPressフォームを作るためのステップバイステップのチュートリアルを紹介します：
WordPress の日付ピッカーをフォームに追加する方法を文書で説明したい場合は、以下の手順を参照してください：
ステップ1: WordPressのフォームを作成する
まず最初にWPFormsプラグインをインストールして有効化します。無料版ではDate/Time Pickerフィールドが利用できないので、有料版のプラグインが必要です。詳しくは、WordPressにプラグインをインストールする方法のステップバイステップガイドをご覧ください。
WPFormsプラグインを購入しインストールしたら、WPForms " Add Newで新しいフォームを作成します。
セットアップ画面で、フォームに名前を付け、使用するフォームテンプレートを選択します。WPFormsには2,000以上のWordPressフォームテンプレートが用意されています。
この例ではSimple Contact Formテンプレートを使います。
では、このフォームをカスタマイズして、日付ピッカー・フィールドを追加してみよう。
ステップ 2: WordPress のフォームに日付ピッカーを追加する
WPFormsのシンプルなドラッグアンドドロップエディタを使用して、選択したフォームテンプレートにフィールドを追加することができます。
それでは、日付／時刻フィールドをフォームの好きな場所にドラッグしてみましょう。
一度フォームに配置したら、上下にドラッグして別の場所に配置したり、もう一度フィールドをクリックして設定を開き、カスタマイズすることができます。
Date / Timeフォームフィールドをクリックすると、以下のオプションが表示されます：
- ラベル：サイト訪問者がフォーム上で目にするフィールドのタイトルです。
- フォーマット：このフィールドに日付と時刻の両方を含めるか、日付のみ、または時刻のみを含めるかを選択します。
- 説明フィールドの説明を追加します。ユーザーに説明や詳細を追加するのに適した場所です。
- 必須：このトグルボタンを有効にすると、このフィールドが入力されるまでユーザーはフォームを送信できません。
下にスクロールして詳細オプションをクリックすると、日付/時刻ピッカー・フィールドをさらにカスタマイズすることができます。
ステップ3：高度なWPForms日付ピッカーのカスタマイズ
デフォルトでは、WPFormsの日付ピッカー・フィールドはカレンダー表示形式に設定されています。
日付/時刻フィールドのフォーマットはWPFormsで簡単に変更できます。これを行うには、まずField Optionsの Advancedタブをクリックします。次に、以下のオプションをカスタマイズできます：
- タイプ： 日付ピッカー（デフォルトのカレンダー表示）または日付ドロップダウン（月、日付、年のドロップダウンフィールドを追加）のいずれかを選択できます。
- フォーマット： ここでは、異なる日付形式（m/d/yまたはd/m/y）を選択できます。
- 曜日を制限する：このオプションをオンに切り替えると、ユーザーが選択できる曜日を選択できます。
- 過去の日付を無効にする： このオプションを使用すると、ユーザーが過去の日付を選択できないようにすることができます。
次に、WPFormsの日付/時刻 フィールドのTimeセクションのカスタマイズオプションを見ていきます。
ステップ4：高度なWPForms時間フィールドのカスタマイズ
日付ピッカーの設定と同様に、日付/時刻フィールドの時間セクションのオプションもカスタマイズできます。
デフォルトでは、30分間隔の12時間時計に設定されています：
以前と同様に、フィールドオプションの下にあるアドバンスタブに行くことで、時間フィールドの設定を変更することができます。これらの設定はこんな感じです：
- 間隔： WPFormsでは時間フィールドの間隔を15分、30分、1時間から選択できます。
- フォーマット 12時間表示か24時間表示かを選択できます。
- 制限時間： ユーザーが選択できる時間の範囲を定義します。
どのフォーマットを選択するにしても、日付/時刻ピッカー・フィールドはフォームに正確なデータを入力するための素晴らしい方法です。Date/Time Pickerフィールドでは、日付は常に検証され、正しいフォーマットで表示されます。
日付/時間ピッカー・フォームに入力させるのは一度だけにしたいですか?ユーザーの入力を制限する方法については、WordPress のフォーム入力数を制限する方法のチュートリアルをご覧ください。
設定のカスタマイズが終わったら、保存をクリックします。
ステップ 5: 日付選択フォームの設定
フォームの確認とは、フォームへの入力が完了すると表示されるメッセージです。確認メッセージはフォームが処理されたことを知らせ、次にどのようなステップを踏む必要があるかを伝えるチャンスです。
WPFormsには3つの確認タイプがあります：
- メッセージこれはWPFormsのデフォルトの確認タイプです。サイト訪問者がフォームを送信すると、フォームが処理中であることを知らせるシンプルなメッセージが表示されます。
- ページを表示：この確認タイプは、日時指定フォームへの入力に感謝し、次に何をすべきかを伝えるために、あなたのウェブサイトの特定のウェブページに顧客を誘導します。この方法については、お客様をサンキューページにリダイレクトするチュートリアルをご覧ください。
- URLに移動（リダイレクト）： このオプションは、別のウェブサイトにある関連情報を含む特定のページに人々を送りたい場合に使用します。
それでは、WPFormsで簡単なフォーム確認を設定する方法を見てみましょう。
まず、フォームエディターの「設定」にある「確認」タブをクリックします。
その後、確認メッセージをお好みに合わせてカスタマイズし、「保存」をクリックします。
その他の確認タイプについては、フォーム確認の設定に関するドキュメントを参照してください。
では、フォーム通知を設定してみましょう。
ステップ 6: フォーム通知の設定
フォームに入力された日時をすぐにメールで送信したいですか?フォーム通知を設定しましょう。
通知は、自分自身、従業員、フォームに記入した人に自動的にEメールを送る素晴らしい方法です。
この機能を無効にしない限り、誰かがあなたのサイトでフォームを送信すると、その通知が届きます。
スマートタグを使えば、フォームの通知で日付と時刻だけを受け取ることもできます。
これを行うには、次のスマートタグを使用して通知メールにタイムスタンプを追加するだけです - {date format="m/d/Y"}.
よくできました！これであなたのウェブサイトに日時指定フォームを追加する準備ができました。
ステップ 7: WordPressの日付選択フォームをサイトに追加する
WPFormsはブログ記事、ページ、フッター、サイドバーなど様々な場所にフォームを追加することができます。
最も一般的なオプションである、投稿やページにフォームを埋め込む方法を見てみましょう。
フォームビルダーの右上にある埋め込みボタンをクリックします。
次に、「新しいページを作成」をクリックします。
ページに名前を付け、「Let's Go」を選択します。
これでWordPressのブロックエディタにフォームが埋め込まれた新しいページが表示されます。公開を押すと、新しい WordPress 日付選択フォームが公開されます。
おめでとうございます！日付ピッカー付きフォームが公開されました。
これで完了です！これであなたのウェブサイトに日付ピッカー付きWordPressフォームを追加する方法がわかりました。
次に、ビジネスフォームのテンプレートを使ってみよう
フォームの作成プロセスをスピードアップしたい方に、役立つ ビジネスフォームのテンプレートをいくつかご紹介します。
WordPressのパスワードリセットフォームのカスタマイズに関するガイドもご覧ください。
何を待っているのですか？今すぐ最強のWordPressフォームプラグインを使い始めましょう。
しかし、一度選択した時間を利用できなくするにはどうすればいいのでしょうか？ 私はフォームの日付ピッカーを作成し、複数の人が同じ日時を選択できるようにしました。
こんにちは、サブリナ、
私たちは、すでに選択された日付を追跡し、選択されていない日付を表示する日付インベントリ機能を持っていません。将来の機能拡張のために、この機能要求を検討するよう、あなたの投票を追加しました。
でも、提案してくれてありがとう！ 🙂。
このオプションが必要なんだ！
日付オプションを使うのに49ドル必要だということは、どこにも書いていない。みんなの時間を無駄にしてくれてありがとう
デレク - 混乱させて申し訳ないが、最初のステップにはっきりと書いてある。参考までにスクリーンショットを掲載します。
その他ご質問等ございましたら、お気軽にお知らせください。ありがとうございました。
将来の日付が選択されないようにすることは可能ですか？
例 1.クリスマス「12月5日」の日付は不可
例2 選んだ日付は今日の日付より最低2日先でなければならない？
ありがとう
マーク - もちろん、最初の1つについては、このコード・スニペットを使用し、必要に応じてカスタマイズすることができます。
セドンドについては、このコードスニペットを使うことができる。単純に、+1)を、ピッカーを制限したい日数分（あなたの場合は、+2)に変更してください。
お役に立てれば幸いです。ありがとう🙂。
到着日と出発日のフィールドを追加しました。問題は、ユーザーが将来の到着日を選択することができますが、出発日は到着日よりも前になります。出発日を到着日より後の日付に制限するために使用できる条件ロジックはありますか？
ありがとう
トニー
Tonyさん、WPFormsでこれを実現することは可能です。PHPのスニペットを使って、同じフォーム内で2つの日付を比較し、出発日が到着日以上であることを確認することができます。このスニペットは、2つ目の日付が1つ目の日付以下であるかどうかをチェックし、そうであればエラーメッセージを表示します。この機能はどのWPFormsライセンスでも実装可能です。
このチュートリアルの詳細と、あなたのサイトに入力する必要があるカスタムPHPコードを確認してください。
ご参考までに、このようなカスタムコードを追加する最も一般的な方法をご紹介します。
お役に立てれば幸いです。ありがとう🙂。