【日時ピッカー拡張アドオン】Snow Monkey Forms × Flatpickr

WordPressで予約フォームや相談フォームを作成しているとき、「Snow Monkey Formsの日時選択を、もう少し分かりやすく使いやすくできないかな」と思ったことはありませんか？

Snow Monkey Formsには、日付や時刻を選択するための入力項目が標準で用意されています。しかし、実際に使ってみると、入力欄の右端にある小さなカレンダーアイコンから操作する形になっており、少し分かりにくさがあります。

特に、入力欄を横幅いっぱいに配置した場合、カレンダーアイコンが画面の端に寄って目立たなくなります。利用者からすると、入力欄を見ただけではカレンダーから選択できることに気づきにくく、どこを押せばよいのか迷ってしまうこともあります。

また、標準の日時選択だけでは、定休日を選択できないようにしたり、「明後日以降のみ受付」「10時から18時まで」「30分ごとの候補から選択」といった、予約フォームでよく使う条件を管理画面から細かく設定することはできません。

よくあるカスタマイズ方法では、Flatpickrなどの日時選択ライブラリを導入し、受付時間や定休日をコード内へ直接書き込みます。しかし、コードへ直接設定する方法では、営業時間や定休日が変わるたびにコードを修正しなければならず、Webの知識がないクライアントや運用担当者では対応できなくなってしまいます。

そこで、「入力欄のどこをクリックしてもカレンダーや時間候補を表示でき、受付時間・定休日・予約可能日・時間間隔をWordPressの管理画面から変更できる」Snow Monkey Forms用の便利なスニペットを用意しました！

使用例↓

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

＼お申込みはこちら／

お申込みする！

コードスニペットをオンにします。

Snow Monkey Forms側の設定

日時ピッカーを表示したい場所には、Snow Monkey Formsの「テキスト（一行テキスト）」ブロックを使用します。

右側設定パネルにある「class」へ、用途に応じて次のクラス名を設定してください。

日付または日時を選択する場合：

js-datepicker

↓設定済み項目ブロックです。コピーしてSnow Monkey Formsの編集画面へペーストしてください。

<!-- wp:snow-monkey-forms/item -->
<div class="wp-block-snow-monkey-forms-item smf-item"><div class="smf-item__col smf-item__col--label"><div class="smf-item__label"><span class="smf-item__label__text">日にち（日時）を選択してください。</span></div></div><div class="smf-item__col smf-item__col--controls"><div class="smf-item__controls"><!-- wp:snow-monkey-forms/control-text {"name":"date","controlClass":"js-datepicker"} /--></div></div></div>
<!-- /wp:snow-monkey-forms/item -->

開始・終了時間を選択する場合：

開始時間を選択する場合：

js-time-start

終了時間を選択する場合：

js-time-end

↓設定済み項目ブロックです。コピーしてSnow Monkey Formsの編集画面へペーストしてください。

<!-- wp:snow-monkey-forms/item {"className":"__selectWrapper"} -->
<div class="wp-block-snow-monkey-forms-item smf-item __selectWrapper"><div class="smf-item__col smf-item__col--label"><div class="smf-item__label"><span class="smf-item__label__text">希望する時間を選択してください。</span></div></div><div class="smf-item__col smf-item__col--controls"><div class="smf-item__controls"><!-- wp:group {"style":{"css":"margin-bottom: .5em;"},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group has-custom-css"><!-- wp:paragraph -->
<p>・第１希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-1","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-1","controlClass":"js-time-end"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"css":"margin-bottom: .5em;"},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group has-custom-css"><!-- wp:paragraph -->
<p>・第２希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-2","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-2","controlClass":"js-time-end"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>・第３希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-3","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-3","controlClass":"js-time-end"} /--></div>
<!-- /wp:group --></div></div></div>
<!-- /wp:snow-monkey-forms/item -->

日にち・開始・終了時間を選択する場合：

（活用例）

↓設定済み項目ブロックです。コピーしてSnow Monkey Formsの編集画面へペーストしてください。

<!-- wp:snow-monkey-forms/item {"className":"__selectWrapper"} -->
<div class="wp-block-snow-monkey-forms-item smf-item __selectWrapper"><div class="smf-item__col smf-item__col--label"><div class="smf-item__label"><span class="smf-item__label__text">希望する相談日時</span></div></div><div class="smf-item__col smf-item__col--controls"><div class="smf-item__controls"><!-- wp:group {"style":{"css":"margin-bottom: .5em;"},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group has-custom-css"><!-- wp:paragraph -->
<p>・第１希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"date-hope1","controlClass":"js-datepicker"} /-->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-1","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-1","controlClass":"js-time-end"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"css":"margin-bottom: .5em;"},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group has-custom-css"><!-- wp:paragraph -->
<p>・第２希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"date-hope2","controlClass":"js-datepicker"} /-->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-2","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-2","controlClass":"js-time-end"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>・第３希望：</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"date-hope3","controlClass":"js-datepicker"} /-->

<!-- wp:snow-monkey-forms/control-text {"name":"time-start-3","controlClass":"js-time-start"} /-->

<!-- wp:paragraph -->
<p>～</p>
<!-- /wp:paragraph -->

<!-- wp:snow-monkey-forms/control-text {"name":"time-end-3","controlClass":"js-time-end"} /--></div>
<!-- /wp:group --></div></div></div>
<!-- /wp:snow-monkey-forms/item -->

開始時間と終了時間を連動させる場合は、2つの入力欄を同じグループブロック内へ配置してください。

主な機能と特徴

管理画面から受付条件を変更

「設定」＞「日時ピッカー設定」から、日時ピッカーの受付条件を変更できます。

コードを書き換えなくても、次の項目を設定可能です。

日付のみ・日時選択の切り替え
何日後から選択可能にするか
選択できない曜日
受付開始時刻
受付終了時刻
時間候補の間隔

営業時間や定休日が変わった場合も、管理画面から変更できます。

設定した時間候補だけを表示

時間は自由入力ではなく、管理画面の設定から生成した候補一覧から選択します。

たとえば、受付時間を10:00〜18:00、時間間隔を30分に設定すると、次のような候補が表示されます。

10:00
10:30
11:00
11:30
……
17:30
18:00

30分間隔に設定しているにもかかわらず、10:17などの中途半端な時刻が入力されることはありません。

時間間隔は、5分・10分・15分・20分・30分・60分から選択できます。

開始時間と終了時間を自動で連動

開始時間と終了時間の入力欄を同じグループブロック内へ配置すると、選択できる時間が自動で連動します。

たとえば開始時間に13:30を選択すると、終了時間には13:30以降の候補だけが表示されます。

終了時間を先に選択した場合も、開始時間には終了時間以前の候補だけが表示されるため、時間の前後関係を間違えにくくなります。

定休日や直前予約を選択不可にできる

管理画面から、選択できない曜日を設定できます。

店舗の定休日や対応できない曜日を設定すると、カレンダー上でその曜日を選択できなくなります。

また、「2日後以降」などの最小オフセット日数も設定できるため、当日予約や直前予約を受け付けないフォームにも使用できます。

スマートフォンでも同じ候補を表示

スマートフォンでは、端末標準のカレンダーや時計画面が表示されることがあります。

端末標準の入力画面では、設定した時間間隔を無視して自由な時刻を選択できる場合がありますが、このスニペットではスマートフォンでも独自のカレンダーと時間候補一覧を表示します。

PCとスマートフォンで、選択できる日時に差が出にくい設計です。

スマートフォンでも同じ候補を表示

トップページ以外でも使用可能

トップページだけでなく、お問い合わせページや予約ページなどの下層ページでも使用できます。

/contact/
/reservation/
/entry/

日時ピッカーが適用されるのは、指定したCSSクラスを設定した入力欄だけです。

こんな方におすすめ

予約フォームや相談フォームで、日時の入力形式を統一したい方
クライアント自身で、受付時間や定休日を変更できるようにしたい方
30分刻みなど、決められた時間候補だけを選択させたい方
開始時間と終了時間の入力間違いを防ぎたい方
予約システムを導入するほどではないものの、入力しやすい日時選択フォームを作りたい方
Snow Monkey Formsの入力欄にCSSクラスを追加するだけで使用でき、受付条件の変更もWordPress管理画面から完結します。

予約フォームや相談フォームの使いやすさを高めたい場合に、ぜひ活用してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【日時ピッカー拡張アドオン】Snow Monkey Forms × Flatpickr

コードスニペットを導入する

Snow Monkey Forms側の設定

右側設定パネルにある「class」へ、用途に応じて次のクラス名を設定してください。

主な機能と特徴

管理画面から受付条件を変更

設定した時間候補だけを表示

開始時間と終了時間を自動で連動

定休日や直前予約を選択不可にできる

スマートフォンでも同じ候補を表示

トップページ以外でも使用可能

こんな方におすすめ

関連記事