『Contact Form 7』で今日の日付けを表示させ、メールで送信する時『年月日』に変更する方法

• 2024/06/30
• HowTo, トラブル
• ContactForm7, WordPress

WordPressで『問い合わせページ』を作る時になくてはならい存在のプラグイン『Contact Form 7』。

今回は久々に『Contact Form 7』を作成して日付をつけたのですが、そのままでは『今日（本日）』の日付は表示されてくれません。

ということで今回は、『Contact Form 7』で作成したページ内で「今日の日付けを表示」させ「メールで送信する時『年月日』に変更する方法」です。

今日の日付けを追加して表示を変更する方法

まずお問合せページ等の『Contact Form 7』で作ったページに日付けをいれます。

1 日付けを追加する

『コンタクトフォームの編集』のページにて

<label>日付：[date date]</label>

こんな感じに入れます。最小限の設定なので、必須項目の追加等の設定は適宜してくださいね。

何もせず、実際に表示させるとこんな感じになります。

日付：
日付：

Δ

これだとちょっと味気ないというか、やっぱ『今日の日付』で表示されていた方が、ユーザビリティ的にもよいですよね。

ってことで、

2 日付けを『今日』にする

上記同様『コンタクトフォームの編集』のページにて、
先ほどの記述に以下のように『id（任意の文字列）を追加』します。

<label>日付：[date todays-date id:todays-date]</label>

このままでは何も変わらず『今日（本日）』にはならないので、以下のJavaScriptの記述を “とりあえず” 投稿内に追加します。

<script type="text/javascript">
   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("todays-date").value = yyyy + "-" + mm + "-" + dd;
</script>

これで表示される日付は『今日（本日）』になり、
実際の表示は以下のようになります。

日付：
日付：

Δ

お問い合わせフォームでは、『今日（本日）』の日付以外にすることはほぼないと思いますので、この方がいいですよね。

ちなみに先程『“とりあえず” 投稿内に追加』と書いたのは理由がありまして、
上記はその投稿内に『一つしか使わない』というのが前提だったため、idを指定し、JavaScriptの記述を投稿内にしました。

ですが、同一投稿内に複数追加したい場合は、idではなくclassを指定し、JavaScriptの記述も以下のように変更し、さらには投稿内ではなく、jsファイルに追加して読み込むようにしないと動作してくれません。

document.addEventListener('DOMContentLoaded', 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);
  //idで一つだけ設定する時はこの記述だけでOK
  //document.getElementById("todays-date").value = yyyy + "-" + mm + "-" + dd;

  //classで複数表示させる場合は、以下の記述を使う
  var elements = document.getElementsByClassName("todays-date");
  for (var i = 0; i < elements.length; i++) {
    elements[i].value = yyyy + "-" + mm + "-" + dd;
  }
});

なぜ上記のようにしないといけないかと言うと『getElementsByClassName』はidのように単一の要素ではなく複数の要素を探しループして、それぞれの要素に値を設定する必要があるからです。そのためDOMが全て読み込まれてからScriptが実行されるようにしないと動作してくれないんですね。

ですのでこの場合は投稿内ではなく、jsファイルに追加して読み込むようにします。

$(document).ready(function() {
  //"todays-date"がある時だけ作動するようにする記述：これがなかったら全ページで"todays-date"を探して「それがない=null」となって、他の画像が読み込まないというトラブルに繋がるのでこれは必ず必要！
  const todaysDateElement = document.getElementById("todays-date");
  if (todaysDateElement) {
    const today = new Date();
    today.setDate(today.getDate());
    const yyyy = today.getFullYear();
    const mm = ("0" + (today.getMonth() + 1)).slice(-2);
    const dd = ("0" + today.getDate()).slice(-2);
    todaysDateElement.value = yyyy + "-" + mm + "-" + dd;
  }
});

上記の原因は、”todays-date”のidがないページがあった場合、そのページで”todays-date”を探して「それがない=null」となって探し続けてループし、他の画像が読み込まない！ということに繋がります。ですので、idを使って別ファイルで読み込む場合は、上記の修正した記述を使ってくださいね。

日付けをメールで送信する時、年月日に変更する方法

上記のままでメールが送信されるようにしても、日付は『年月日』にはなってくれません。ですので、

1 日付けを『年月日』にする

『コンタクトフォームの編集』
『コンタクトフォームの編集』のメールタブの編集画面にて、

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
日付： [todays-date] 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

このようになにもせず設定して送信すると、

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
日付： 2024-07-07
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

こんな感じに届きます。
やはりメール等では『年月日』が入ってた方が読みやすいですし、ユーザビリティを考えたら親切ですよね。

ってことで今度は

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
日付： [_format_todays-date "Y年 n月 j日(D)"]
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

と記述します。
こうすることで、届いたメールには

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
日付： 2024年 7月 7日(日)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

このように表示されるようになります。
この方が読みやすいですよね！

これは特別なことをしているわけではなく『Contact Form 7』にあるショートコードをちょっといじっただけです。詳細はContact Form 7の日付項目ページにて。

ちなみに以前、日付をJavaScriptで表示する方法に関する記事も『日付を自動更新で表示させる！ 簡単コピペ その2』に書いてるので、参考まで。