「Contact Form 7」には、日付というフォームタグがありますが、カレンダーで年月日を指定できるだけで、時間までの指定はできません。
「Contact Form 7 Datepicker」というプラグインがあったのですが、2020年4月以降使えなくなっているとのことで、プラグインを使わずに日時選択できるフィールドを追加してみたいと思います。
独自のフォームタグを追加する
Contact Form 7では独自のフォームタグを追加することが可能です。
フォームタグというのは以下のようなもの。
[textarea your-message]
[submit “Send”]
フォームのテンプレート編集画面で表示されていますよね。ボタンを押すと名前や値を設定できると思いますが、そのボタンで簡単に挿入できるようになっているのが標準サポートされているフォームタグです。
独自のフォームタグはfunctions.phpにて作成します。
add_action( ‘wpcf7_init’, ‘wpcf7_add_form_tag_request_date’ );
function wpcf7_add_form_tag_request_date() {
wpcf7_add_form_tag(
array( ‘datetime’, ‘f-datetime*’),
’wpcf7_time_form_tag_handler’,
array( ‘name-attr’ => true )
);
}
function wpcf7_time_form_tag_handler($tag) {
$name = $tag->name;
return ‘<input type=”datetime-local” name=”‘ . $name . ‘”>’;
}
ここでしているのは、フォームタグのタイプ登録とコールバック関数の定義です。
まずフォームタグのタイプ登録は以下でしています。
wpcf7_add_form_tag(
array( ‘datetime’, ‘datetime*’),
’wpcf7_time_form_tag_handler’,
array( ‘name-attr’ => true )
);
}
独自のフォームタグの登録をするには、wpcf7_add_form_tag関数を使います。
「タイプ」「コールバック関数」「特徴」の3つの引数を受け取っていて、タイプとコールバック関数は必須値になります。
今回はタイプにdatetimeを指定していますが、他にtextやtextareaなどのタイプを指定することが可能です。
引数で取っているコールバック関数を定義している部分は以下です。
$name = $tag->name;
return ‘<input type=”datetime-local” name=”‘ . $name . ‘”>’;
}
これで、フォームのテンプレート編集画面で[datetime datetime]を使用できます。
メール設定のところでもちゃんと使えるようになっており、Webページでは次のように指定できると思います。
Leave a Comment