Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

WordPressのContact Form 7のメールフォームで、jQueryのDatepickerが使えるようになるアドオンプラグイン「Contact Form 7 Datepicker」の使い方をまとめました。

Contact Form 7 Datepickerの特徴と使い所

Contact Form 7 Datepickerにより、メールフォームでカレンダーから年月日と時分を選べるようになります。

希望の来店時間」みたいな使い方ができるので、お店やクリニックのサイトで予約フォームを持っているのあれば、ぜひ追加しておきたいプラグインじゃないかなと思います。

Contact Form 7 Datepickerプラグインのインストール

WordPress管理画面の「プラグイン」>「新規追加」へ進んで、
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

Contact Form 7 Datepickerを検索してインストールします。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

プラグインを有効化したら、Contact Form 7のメールフォームにカレンダーをつけてみましょう。

Contact Form 7 Datepickerの使い方

コンタクトフォームのページで対象のフォームを選んで、
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

フォームのパーツボタンの中に「datetime」「日付」「time」が追加されていると思うので、カレンダーを設置したいところでボタンをクリックします。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

この「datetime」「日付」「time」で設定できる項目を以下で詳しく解説していきます。

datetime

まずは「datetime」。年月日と時分のすべてが1つになったカレンダーです。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

管理画面で設定できる項目が多く、とても自由度が高いです。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

やりたいことによって設定内容も変わってくるので、一旦すべての項目について以下でまとめます。

datetimeの設定項目
nameフォームのname
nameフォームのname
idフォームのid
classフォームのclass
sizeフォームの幅値
maxlength入力文字数の上限
date-format年月日のフォーマット(初期値:mm/dd/yy)
mm/dd/yyでの表示例
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
time-format時分のフォーマット(初期値:HH:mm)
HH:mmでの表示例
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
min-date「日」の下限の指定
「本日起点で何日後から選択できるか」を決めることができます。
0(初期値)なら本日から選択が可能。
1なら本日+1日(翌日)から選択できるようになります。
max-date「日」の上限の指定
「本日起点で何日後まで選択できるか」を決めます。
0(初期値)なら日付が選択できなくなります。
1なら、本日+1日(翌日)まで選択可能という具合です。
8/2起点で、min-date:1 max-date:20を指定した例
つまり8/3〜8/22までが選択範囲になります。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
※なお、min-date max-dateを指定していると、
矢印ボタンによるカレンダーの年月選択はできなくなります。
min-hour「時間」の下限の指定
max-hour「時間」の上限の指定
step-hour選択できる時間の区切りの指定
step-hourを「1」にすると、1時間区切りで選べるようになります。
min-hourは9、max-hourは17、step-hourを1にした例
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
min-minute「分」の下限の指定
max-minute「分」の上限の指定
step-minute選択できる分の区切りの指定
step-minuteを10にすると、10分区切りで選べるようになります。
min-minuteは0、max-minuteは50、step-minuteを10にした例
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
min-second「秒」の下限の指定
max-second「秒」の上限の指定
step-second選択できる秒の区切りの指定
first-dayカレンダーの週始まりを「日曜日」「月曜日」の
どちらにするかを決めます。(初期値は日曜日)
animateカレンダーのアニメーション効果の指定
ただし、選択肢によっては動かなくなる(カレンダーが表示されなくなる)
ので、あまり触る必要はないです。
change-monthチェックを入れると、「月」をプルダウンメニューで選べるようになります
change-yearチェックを入れると、「年」をプルダウンメニューで選べるようになります
change-month、change-yearともにチェックを入れた状態
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
year-range選択できる「年」の範囲
なぜか、タグに直接 year-range:2019-2020 のように書かないと動かない模様。
選べる年を2019〜2020年にした場合
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
monthsチェックを入れると、なぜかカレンダーが表示されなくなる…
(これはまだよくわかっていません)
buttonsチェックを入れても、何も起こらないぽい…
(これもまだよくわかっていません)
inlineチェックを入れると、カレンダーを常時表示にします。
しかし、テーマによるのかもですが、なぜかカレンダーのデザインが崩れる…
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
no-weekendsチェックを入れると、最初から土日が選択できないようになります。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ
Default valueDefault valueに値を書いて、
Use this text as placeholder?にチェックを入れると、
placeholderを表示できるようになります。
Default valueに書いた値をplaceholderにした例
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

日付

続いて「日付」です。
datetimeとの大きな違いは、カレンダーの下の時間選択ができなくなるくらいです。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

datetimeの中の「年月日」に絞った部分なので、管理画面で設定する項目もdatetimeよりは少なくなります。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

また、設定する値も、基本的にdatetimeのものと同じものが入ります。

日付の設定項目
nameフォームのname
idフォームのid
classフォームのclass
sizeフォームの幅値
maxlength入力文字数の上限
date-format年月日のフォーマット(初期値:mm/dd/yy)
min-date「日」の下限の指定
max-date「日」の上限の指定
first-dayカレンダーの週始まりの曜日を指定(初期値は日曜日)
animateカレンダーのアニメーション効果の指定
change-monthチェックを入れると、「月」をプルダウンメニューで選べるようになります
change-yearチェックを入れると、「年」をプルダウンメニューで選べるようになります
year-range選択できる「年」の範囲の指定

※months、buttons、inline、no-weekends、Default value (optional)などは、すべてdatetimeと同じなので省略します。

time

最後に「time」です。
こちらはカレンダーはなくなり、時間と分を選ぶだけのシンプルなフォームになります。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

管理画面では、datetimeの中の「時分」に相当する部分を設定することができます。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

timeの設定項目
nameフォームのname
idフォームのid
classフォームのclass
sizeフォームの幅値
maxlength入力文字数の上限
time-format時分のフォーマット(初期値:HH:mm)
min-hour「時間」の下限の指定
max-hour「時間」の上限の指定
step-hour選択できる時間の区切りの指定
min-minute「分」の下限の指定
max-minute「分」の上限の指定
step-minute選択できる分の区切りの指定
min-second「秒」の下限の指定
max-second「秒」の上限の指定
step-second選択できる秒の区切りの指定

※animate、inline、Default value (optional)なども、すべてdatetimeと同じなので省略します。

Datepickerのカレンダーの色を変更する方法

コンタクトフォームのページへ進むと、「Datepicker Theme」のタブが追加されています。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

これをクリックすると、カレンダーの色を変更することができるので、
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ

ブログのテーマに合わせて変えてみてくださいね。
Contact Form 7でjQueryのDatepickerカレンダーが使える「Contact Form 7 Datepicker」の設定方法まとめ


以上が、Contact Form 7 Datepickerプラグインの使い方でした。

最後まで読んでいただき、ありがとうございました★

関連記事

コメントを残す