Contact Form 7で今日の日付を自動入力する方法

Programming
WordPress
Contact Form 7の日付フォーム

WordPressのプラグインContact Form 7のカスタマイズで沼にハマってしまったので情報シェアです。PHP関数を使って簡単にいけると思いきや、意外と苦戦しました。先に結論を言うと、Javascriptのコードを管理画面に直書きする方法が簡単です。

やりたいこと:Contact Form 7の日付選択フォームで今日の日付をデフォルト表示する。

画像のような感じですね。ページを開いた時点の日付が、初期値として自動入力されるように実装してあります。

Contact Form 7の日付フォーム

PHPの関数date()を使えば出来そうなのですが、出来そうで出来ず、困りました。そこで、Javascriptを使って簡単に実装する方法をご紹介しようと思います。

この情報にどれだけの需要があるのか分かりませんが、読者がいてくれることを信じて筆を取りたいと思います。。さて早速見ていきましょう!

..とは言っても簡単な話です。まずは、次のコードをContact Form 7の管理画面の一番下に貼り付けてください。

<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(“sample”).value = yyyy + ‘-‘ + mm + ‘-‘ + dd;
</script>

ここでは、次の3つの作業を実行しています。
  1. 今日の日付を取得
  2. yyyy/mm/ddという書き方に変換
  3. 日付情報をidに紐付ける
  (“sample”というidを使用していますがidの名前は任意です。)

次に、この情報をプラグインの[date]タグに投入します。Contact Form 7の管理画面に記載するコード全体を見てみましょう。

   [date sample-name id:sample]
   [text your-name  placeholder”お名前”]
   [email your-email  placeholder”メールアドレス”]
   [textarea your-message ]
   [submit id:formbtn “送信”]
<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(“sample”).value = yyyy + ‘-‘ + mm + ‘-‘ + dd;
</script>

(すみません、必要最小限のコードのみです。スタイリングはお好みでどうぞ!)

“sample-name”は任意の”名前”です。

ポイントは、[date sample-name id:sample]の部分。[date]タグの中に”id:sample”が追加されていますね。

[date]タグに日付情報が紐付けられたidを使うことによって、ページを開いた時点の日付がフォームに自動入力されます。

同じ機能をPHP関数で実装しようとしてかなり苦戦しました。Contact Form 7の管理画面ではPHPのコードを直接書けませんが、PHP関数を実行させることは可能です。functions.phpの中で関数を定義してショートコード を作成すればOKですね。ところが、PHPで取得した日付情報をプラグイン独特の[date]タグに落とし込む実装がうまくいきませんでした。。(ご存知の方は教えてください!)

結局のところ、Javascriptを使う上記の方法が簡単&確実です。

この情報が何かのお役に立てれば幸いです。もっと良い方法があるよ!など、コメントやご質問がある方はお気軽にご連絡ください。<(_ _)>

<参考サイト>

https://create-fecundity.com/programming/javascript-add-default-date/

https://qiita.com/acht_web/items/cb5edabb5f835fc0c27f