WordPress

【WordPress】お問い合わせフォームに当日日付を初期表示するサンプルコード

【WordPress】お問い合わせフォームに当日日付を初期表示するサンプルコード
WordPressのカスタマイズやプラグインに関する情報です。

お申し込みフォームを作る時、日付フィールドに今日の日付を初期表示するサンプルコードです。お問い合わせフォームプラグインは「Contact Form 7」を使います。

モンキー
モンキー
日付の初期表示はありそうでなかった機能だね
ピンキー
ピンキー
JavaScriptを使えば簡単にできるよ

完成形

日付フィールドに当日日付を初期表示。
フォームを送信した日が「お申込日」になるのだとは思いますが、送信者に控えのメールが届いた時に「お申込日」の記載があった方が親切ですね。

Contact Form 7:お問い合わせフォームに当日日付を初期表示

お問い合わせフォーム「Contact Form 7」の設定

お問い合わせフォームはお馴染み「Contact Form 7」を使います。バージョンは2020年10月時点の最新バージョンです。

動作確認バージョン
  1. 「WordPress」Ver5.5.3
  2. 「Contact Form 7」Ver5.2.2

日付フィールド定義

ID属性に「today-date」を追加します。

<dl class="contact-form col2">
<dt>お申込日</dt>
<dd>[date* your-date id:today-date class:small]</dd>
</dl>

JavaScriptファイルの作成

外部JavaScriptファイルを作成します。このサンプルでは子テーマの中に「js」フォルダを作って「today-date.js」を作成しています。

Contact Form 7:お問い合わせフォームに当日日付を初期表示・JavaScriptファイル作成

JavaScriptサンプルコード

「子テーマフォルダ/js/today-date.js」を作成。

(function() {
  var today = new Date();
  today.setDate(today.getDate());
  var yyyy = today.getFullYear();
  var mm = ('0' + (today.getMonth()+1)).slice(-2);
  var dd = ('0' + today.getDate()).slice(-2);
  document.getElementById('today-date').value = yyyy + '-' + mm + '-' + dd;  
})();

mikeyanroomさんの記事を参考にさせていただきました。

footer.phpでJavaScriptを定義

<script src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/js/today-date.js"></script>

header.phpに定義した場合は表示されなかったので、footer.phpに定義してください。

この記事は、2020.10.4時点の情報です。
ABOUT ME
モンキー
福岡県在住。社内SEとしてkintone(キントーン)でシステムを開発したりWordPressでサイトを制作したりしてます。もともとは20年ほどシステム会社で働いていて趣味でネットショップを構築・運営していました。 ある日突然英会話に興味を持ち国際交流が好きになりました。その影響で留学生に日本語を教えてみたいと思い、日本語教師の資格を取るために週末は日本語教師養成講座420時間コースに通っています!