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

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

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

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

目次

  1. 今日の日付けを追加して表示を変更する方法
    1. 日付けを追加する
    2. 日付けを『今日』にする
  2. 日付けをメールで送信する時『年月日』に変更する方法
    1. 日付けを『年月日』にする

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ファイルに追加して読み込むようにします。

      idの記述のままjsファイルにで読み込むと、他のページで画像が読み込まれない!というトラブルが発生しますので、idの記述のまま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』に書いてるので、参考まで。



      関連記事

      サーバー移転の手順 その3:移転後のトラブル


      前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

      記事を読む▷


      アイキャッチ_RSSImport

      WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法


      前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…

      記事を読む▷


      公開日を最終更新日にする!サムネイル

      検索結果に最終更新日を表示させてクリック率をアップする方法!新規投稿時には公開日を表示させる!


      以前は検索結果で1ページ目上位3番目以内に半年以上表示されていた記事が、いきなり圏外となってしまいました。Googleの…

      記事を読む▷


      お名前.com から脱出する!:ドメインの移管方法


      『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

      記事を読む▷


      easy-edit

      共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


      WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

      記事を読む▷


      Message

      メールアドレスが公開されることはありません。

      このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

      PAGE TOP