Contact Form 7で今日の日付を自動入力する方法
- 2024-04-07
- 2020-03-13
- Keywords:
[ pickup ]
[ Programming ]
[ WordPress ]
WordPressのプラグインContact Form 7のカスタマイズで沼にハマってしまったので情報シェアです。PHP関数を使って簡単にいけると思いきや、意外と苦戦しました。先に結論を言うと、Javascriptのコードを管理画面に直書きする方法が簡単です。
やりたいこと：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/