Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

How to Create a WordPress Form With a Date Picker

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

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

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

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

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

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

最初のステップはWPFormsをインストールすることです。WPFormsはWordPressのお問い合わせフォームプラグインで、日付選択フィールドを含むWordPressサイト上のすべてのフォームを簡単に作成することができます。

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

注:このガイドでは、WPFormsのプレミアムバージョンを使用する必要があります。とはいえ、WPFormsのクーポンを利用すれば、通常価格の50%オフで購入することができます。

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

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

Clicking Add New in WPForms inside the WordPress admin panel

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

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

Naming a new form in WPForms

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

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

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

Clicking the Use Template button in WPForms

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

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

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

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

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

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

Dragging and dropping the Date Time field to the form builder in WPForms

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

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

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

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

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

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

Configuring the General settings of a form in WPForms

プロからのアドバイス: もしあなたが宿泊サイトを運営していて、ユーザーに特定の日付を入力してもらいたい場合は、ホテル予約フォームテンプレートを使用することができます。このテンプレートには到着日と出発日の2つの日付入力フィールドがあります。

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

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

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

The default Date Time picker calendar in WPForms

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

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

The default time dropdown picker in WPForms

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

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

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

Choosing the Date Dropdown type in WPForms

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

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

An example of WPForms' date dropdown menu

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

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

Configuring the date picker's advanced settings in WPForms

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

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

The Limit Days and Disable Past Dates settings for the Date Time field in WPForms

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

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

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

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

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

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

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

Configuring the advanced settings of the time picker field in WPForms

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

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

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

The Embed popup in WPForms

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

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

Choosing an existing page to add a WPForms form to

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

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

Creating a new page to insert the WPForms form into

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

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

Clicking the add block button in the block editor to insert the WPForms block

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

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

Searching for the WPForms block in the block editor

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

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

Select a WPForms form to insert in the block editor

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

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

The WPForms block settings sidebar in the block editor

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

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

An example of a contact form with a date picker made with WPForms

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

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

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

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

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

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

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

Adding the WPForms block in a widget-ready area

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

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

The WPForms widget settings sidebar

それだけだ!

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

An example of a WPForms form widget with a date picker field

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

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

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

Clicking the use a shortcode link in the WPForms embed popup

ショートコードの使い方については、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      Reach out to WPForms’ support for the current methods of limiting the days of the week :)

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。