Houn

2022.06.22 WordPress

Contact Form7の日付に選択範囲の制限をかける方法(iOSでの挙動も解説)

WordPressにお問い合わせフォームを設置するときの定番プラグインContact Form7にて、「日付」に範囲の制限をかける方法です。

Contact Form7の「日付」タグ

たとえば翌日以降〜60日以内のみ入力可、などと上限 / 下限を設定。

新しくプラグインなどを追加することなく、Contact Form7に備わっている機能にて実装できます。

日付タグ挿入画面からは固定の年月日でしか設定不可

まず、日付タグを挿入するときの画面で「範囲」という項目があります。

範囲選択項目

ただ、ここからの操作だと「2022年6月22日」といった具合に、固定の年月日でしか設定ができません。

2022年6月22日〜6月29日と範囲を設定した例
2022年6月22日〜6月29日と範囲を設定した例

リアルタイムで動的に変わってくれないと少々使い勝手が悪いですね。

挿入後のタグに対して日付制限の指定を書く

そのためタグ挿入画面では「範囲」に何も設定せず、まず「タグを挿入」します。

するとこのような状態になりますよね。

通常のタグ挿入後の状態

このタグに対して日付制限の記述を加えます。

例として当日以降のみ入力可、前日は選択ができないように設定します。それが以下の記述です。

date タグの名前 min:today

[ date タグの名前 min:today ]

min:today
ミニマム(下限):今日(ユーザーがフォーム入力する日)

という意味です。

これで実際にユーザーがフォームを入力する日での”今日”と、動的に制限をかけることができます。

実際のフォーム画面

上記の例で設定したフォームの、実際の日付入力の状態はこちらです。

実際の日付入力フォーム

フォーム入力日(青枠の2022.6/23)以前は、グレーアウトしてクリックが無効になります。

範囲設定のバリエーション

翌日以降、○日以降と設定

当日だけでなく翌日〜○日(たとえば1週間後)以降などと設定も可能です。

翌日以降の場合は、以下の書き方になります。

min:today+1days

あさってなら2days、以降○days〜と、任意の数値を入力します。

上限値を入力

「○日まで入力可」と上限値を定めることができます。

max:today+○days

minではなく、今度はmax(上限)ですね。あとの書き方は同様です。

iOSでは範囲外の日付も選択できてしまい、エラーメッセージが表示される

先ほど、入力可能範囲外の日付はグレーアウトしてクリック不可と書きましたが、

日付入力フォーム

じつはiOSでは選択ができてしまいます。

iOSでの日付入力フォーム
iOS端末での日付入力画面

ただ、範囲外の日付を選択するとエラーを出してくれますので、これで送信することはできません。

選択された日付は早すぎます

エラーメッセージの編集

この場合のエラーメッセージは「メッセージ」タブから編集できます。

メッセージタブ

少し下にスクロールすると

  • 日付が最小制約日より小さい
  • 日付が最大制約日より大きい

という項目がありますので、そちらを書き換えることで可能です。

エラーメッセージ編集欄

以上です。

WordPressおすすめサービス

WordPressブログに関するトラブル解決の専門家「ブログサポーターがみたか」さんが提供されているサービス

がオススメです。

WordPressのトラブル対応やカスタマイズにお強く、これまでのべ1,000件以上の解決実績をもとに

  • 使い方が分からない
  • カスタマイズしたい
  • ブログ運用の仕方、WordPressの使い方が間違っていないか不安
  • ハッキングに遭ってしまった‥

などさまざまな要望・問題に、丁寧迅速に対応してくださいます。

Share on SNSシェア

お問い合わせ