WordPressで日付ピッカー付きフォームを作る方法（簡単な方法）

日付ピッカー付きのWordPressフォームを作成したいですか？

日付ピッカー・フィールドは WordPress フォームで日付関連の情報を取得する便利な方法です。例えば、ユーザーの誕生日を知りたい場合や、フォームから簡単にサービスの予約をしてもらいたい場合などです。

この投稿では、日付ピッカー付きのWordPressフォームを簡単に作成する方法を紹介します。

なぜWordPressで日付選択機能付きのフォームを作るのか？

WordPress フォームの日付ピッカーは、ユーザーに日付を入力させたい場合に便利です。よくある例としては

• ユーザーに生年月日の入力を求める登録フォーム。
• 注文の配送日時を選択するための注文書。
• レンタル項目のピックアップまたはドロップオフ日を選択するためのレンタル項目フォーム。
• お問い合わせフォームにより、ユーザーが製品やサービスに関する連絡を希望するタイミングを知らせることができます。
• 従業員が休暇の開始日と終了日を入力できるようにするための休暇申請フォーム。
• 宿泊施設やサービスサイトの予約フォーム。

日付入力フィールドは、ユーザーが手作業で日付を入力するのに比べ、はるかに簡単な方法です。日付の書式がすべて一貫しているため、エラーを減らし、ユーザーエクスペリエンスを向上させます。

それでは、日付ピッカー付きのWordPressフォームを簡単に作成する方法を見ていきましょう。この投稿のナビゲーションには、以下のクイックリンクをご利用ください：

ステップ1: WPFormsプラグインのインストールとテンプレートの選択

最初のステップはWPFormsをインストールすることです。これは市場で最高のWordPressお問い合わせフォームプラグインであり、日付ピッカーフィールドを持つフォームを含む、あなたのサイトにWordPressフォームのすべての種類を作成するのは超簡単です。

詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

詳しくはWPFormsのレビューをご覧ください。

有効化したら、WordPressダッシュボードからWPForms ” 新規追加ページに移動します。

テンプレートの選択」ページが表示されます。

テンプレートを選ぶ前に、WordPressのフォームに名前を付けておくと、後で簡単にフォームを識別することができます。

下にスクロールしていくと、すでに日付範囲フィールドが含まれているテンプレートがたくさんあります。

ここでは例として、シンプルお問い合わせフォームテンプレートを使い、そこに日付ピッカーフィールドを追加します。しかし、あなたに一番合ったテンプレートを自由に選んでください。

選択したら、「テンプレートを使用する」ボタンをクリックしてください。

ステップ 2: WordPressフォームに日付ピッカー・フィールドを追加する

WPForms フォームビルダーに到着します。左のカラムにフィールドオプションがあり、画面の右側にフォームプレビューがあることに気づくでしょう。

初期設定では、シンプルお問い合わせフォームテンプレートには名前、メール、コメントフィールドのみが追加されています。

デモンストレーションのために、WordPressフォームに日付フィールドを追加する方法を紹介します。しかし、もしあなたのテンプレートにすでに日付フィールドがある場合は、このステップの編集部分まで読み飛ばしてかまいません。

左カラムの「Fancy Fields」セクションまでスクロールダウンし、「Date / Time」フィールドを見つけます。

そのフィールドをフォームの好きな場所にドラッグ＆ドロップするだけです。このチュートリアルでは、メールフィールドのすぐ下に配置しています。

そうしたら、「Date/Time」フィールドをクリックして編集します。画面の左側に’フィールドオプション’タブが開きます。

ここから、フィールドのラベルを変更することができます。初期設定は「Date / Time」です。ここではフィールドに’Preferred Time for Phone Call’を使います。

Formatドロップダウンメニューを使用して、フィールドの日付フォーマットを変更することもできます。オプションは「日付と時刻」、「日付」、または「時刻のみ」です。これは、ユーザーの誕生日を収集するために、時間フィールドを使用せずに日付だけを使用したい場合に便利です。

それ以外には、ユーザーがフィールドに入力する必要があるものについて、より多くのコンテキストを与えるために説明テキストを記入することができます。

最後に、このフィールドを必須フィールドにしたい場合は、「必須」ボックスをチェックします。これはユーザーがフォームを送信する前に日時を選択しなければならないことを意味します。

設定が完了したら、上部にある「保存」ボタンをクリックしてフォームの設定を保存します。

ステップ3：日付時間ピッカーの詳細オプションの設定

初期設定では、WordPressフォームの日付範囲選択フィールドはカレンダーとなり、その横にドロップダウンメニューが表示されます。

現在の日付が選択されるが、ユーザーはそれを変更して別の日付を選択することができる。日付の書式は月/日/年です。

一方、時間のドロップダウンは、30分間隔の12時間時計が初期設定です。

ユーザーは自分に最適な時間帯を選ぶことができる。

場合によっては、日付ピッカーの設定を変更したいこともあるでしょう。例えば、あなたの国が初期設定ではなく、日/月/年や24時間制の日付と時刻のフォーマットに従っているかもしれません。

これを行うには、左側パネルの上部にある「詳細」タブに切り替える必要がある。

ここでは、日付ピッカー・フィールドのサイズを調整することができます。次に、日付セクションで、日付範囲をカレンダーから日付ドロップダウンメニューに変更することができます。

日付カレンダーピッカーを日付ドロップダウンメニューに切り替えるのは、フォームのスペースが限られていて、カレンダーがかなり小さく見える場合に良いアイデアです。

日付のドロップダウンメニューはこんな感じです：

その下で、日付の書式を月/日/年（2024/1/31）から日/月/年（2024/1/31）または月日、年（2024年1月31日）に変更できる。

カレンダーの日付ピッカーを選択した場合、「日付」フィールドにプレースホルダーテキストを挿入することもできます。ユーザーが混乱しないように、あなたが使用しているフォーマットを知らせるために、あなたの日付フォーマットをこのフィールドに記入することができます。

さらに、「日数制限」スイッチを有効化して、選択可能な日付範囲を調整することができます。これは、平日のみサービスを実行する場合に便利です。

過去の日付が選択されないように、過去の日付を無効化することもできます。

次に、「時間」セクションに移動して、時間ピッカーを変更しよう。

ここでは、間隔を30分ではなく15分や1時間に変更することができます。また、どのような時間フォーマットを使っているかを示すプレースホルダー・テキストをここに入力するのもよい。

タイムピッカーの初期設定は12時間表示ですが、お好みで24時間表示に切り替えることもできます。

また、「営業時間の制限」設定をオンにして、サービスの開始時間と終了時間を指定してください。これにより、ユーザーは営業時間外に予約を入れることができなくなります。

その他に、日付範囲フィールドのCSSクラス名を入力することができます。これは高度なオプション設定ですが、後でコードを使ってフォームのスタイルを上書きするために使うことができます。

最後になりますが、必要に応じてフォームフィールドのラベルやサブラベルを非表示にすることができます。

新規フォームが完成したら、画面右上の「保存」ボタンをクリックして保存します。

ステップ 4: WordPress フォームをサイトに埋め込む

これで WordPress サイトに日付ピッカー付きのフォームを追加する準備ができました。フォームビルダーの上部にある「埋め込み」ボタンをクリックするだけです。

ポップアップが表示され、フォームを追加する既存のページを選択するか、フォーム用の新規ページをゼロから作成するかを尋ねます。どちらの設定もブロックエディターを使うので、手順はよく似ています。

既存または新規ページへのWPFormsブロックの追加

既存のページにフォームを挿入するには、「既存のページを選択」ボタンをクリックします。その後、WordPressブログやサイトにすでにあるページを1つ選択し、「Let’s Go!

新規ページにフォームを追加したい場合は、「新規ページを作成」ボタンをクリックするだけです。

次に、新しいページに名前を付けて、「Let’s Go!

どちらの方法でも、WPFormsブロックを追加する方法の説明が表示されるブロックエディターに移動します。

まず、「+」ブロック追加ボタンをクリックする。

次に、ブロックタイプの検索バーに「WPForms」と入力する。

ブロックをページ上の最適な場所にドラッグ＆ドロップするだけです。

あとはすべてドロップダウンメニューをクリックするだけです。

次に、先ほど作成したフォームを選択します。

ブロック設定のサイドバーでは、フォームフィールド、ラベル、ボタンのスタイルをカスタマイズして、WordPressテーマに合わせて見栄えを良くすることができます。

各要素のサイズ、枠線の半径、色を変更することができます。

更新’または’公開’ボタンをクリックし、サイト上でフォームを公開することができます。

WordPressサイトではこのように表示されるはずです：

ページではなく投稿にフォームウィジェットを挿入したい場合は、新規投稿を作成するか、ブロックエディターで既存の投稿を開きます。

その後、この方法のようにページにWPFormsブロックを追加するために同じ手順に従ってください。

WPFormsブロックをウィジェット対応エリアに追加する

クラシックなWordPress テーマを使用している場合、フォームをウィジェット対応のヘッダー、フッター、またはサイドバーエリアに表示したいと思うかもしれません。フォームがかなり短く、あまりスペースを取らないのであれば、これは良いアイデアかもしれません。

注： ブロックテーマを使用している場合、この方法はあなたのサイトには使えません。

これを行うには、WordPress管理エリアから外観 “ ウィジェットに 移動します。次に、ご希望のウィジェット対応エリアに移動し、その中にある白い「+」追加ブロックボタンをクリックします。その後、WPFormsブロックを検索することができます。

2つのオプションが設定されている場合は、どちらも同じことをするので、どちらを選んでもよい。

先ほどの方法と同様に、先ほど作成したフォームを選択するだけです。ブロック設定のサイドバーでは、WordPressのテーマに合うようにデザインを設定することができます。

編集が完了したら、「更新」ボタンをクリックします。

それだけだ！

WordPressのブログ投稿の一番下にあるフォームはこんな感じです：

WordPressのフォームをショートコードで埋め込む

WPFormsブロックやウィジェットが機能しない場合は、ショートコードを使用してWordPressフォームを追加することもできます。

ページに埋め込む」ポップアップで、「ショートコードを使用する」リンクをクリックします。ページ、投稿、ウィジェット対応エリアにコピー＆ペーストできるショートコードが表示されます。

ショートコードの使い方については、WordPressでショートコードを追加する方法の投稿をご覧ください。

WordPressフォームを最適化する究極のヒント

フォームに日付ピッカー・フィールドを追加する方法はお分かりいただけたと思います：

• フォーム送信者に確認メールを送信 する – こうすることで、ユーザーはエントリーを正常に受け取ったという通知を受け取ることができ、選択した日時を忘れることもありません。
• WPFormsは Stripe、PayPal、Square、Authorize.netなどの一般的な決済ゲートウェイをサポートしています。1回限りまたは定期的な支払いを収集することができ、追加のトランザクション手数料はありません。
• 長いフォームを会話形式にする – イベントやユーザー登録フォームで多くの情報を入力する必要がある場合、会話形式にすることでフォームの入力率を上げることができます。
• お問い合わせフォームのスパム防止– WPFormsのビルトインスパム防止機能とreCAPTCHAチェックボックスを有効化して、スパムフォームのエントリーをフィルターすることができます。
• 多言語フォームの作成– 多言語で表示されるフォームで、多様な利用者を獲得し、サイトのアクセシビリティを高めましょう。
• お問い合わせフォームデザインのベストプラクティス– このガイドでは、通常の訪問者をリードやカスタマに変換するための最適なWordPressフォームのデザインについて説明します。
• WPFormsの共同設立者であるJared Atchisonが、条件ロジックの使用からリッチメディアコンテンツの追加まで、 フォームを より魅力的なものにする方法を指南します。

この投稿が、日付ピッカー付きの WordPress フォームを作成する方法のお役に立てれば幸いです。WordPress で複数ページのフォームを作成する方法の投稿やWordPress アンケートプラグインの究極のリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.