Contact Form 7でカスタムフィールドの値をフォームに表示させる方法！

みなさん、こんにちは。
MEGIDO(メギド)です。

ワードプレス案件でかなり頻繁に利用するプラグインは
お問い合わせフォーム系のプラグイだと思います。

その中でも使用率が高いと思うのが、
「Contact Form 7」でしょう。

日本製、高機能、無料という三拍子揃ったプラグインなので
「お問い合わせ」や「見積相談」の機能を追加する時は、
このプラグインを使うという方も多いと思います。

そんな「Contact Form 7」には、更にこのプラグインを
強化してくれるアドオン系プラグインが豊富にあります。

今回はそんなアドオンの中の１つである
「Contact Form 7 Dynamic Text Extension」で
「Advanced Custom Fields」などで作成した
カスタムフィールドの値をテキストフォームに表示させる方法をご紹介します。

Contact Form 7 Dynamic Text Extensionとは？

「Contact Form 7 Dynamic Text Extension」は「Contact Form 7」の
テキストフォーム、隠しフォームに情報を付与、出力するプラグインです。

情報の取得先は、今回ご紹介するカスタムフィールドのデータだけでなく
GET値、POST値、現在のURL、投稿情報などを取得することが可能です。

※取得できるデータを全て知りたい場合は、公式ホームページをご確認ください。
Contact Form 7 Dynamic Text Extension

使い方もとてもシンプルでこのプラグインをインストールすると
「Contact Form 7」のフォーム作成で新たに使用可能になるコードが追加されます。

そのコードをうまく使うことでカスタムフィールドのデータなどを
「Contact Form 7」のテキストフォームに表示させることが可能になるのです。

具体的にテキストフォームにカスタフィールドの
データを表示させたい場面ってどんな時という思う方もいるかもしれません。

例えばですがお問い合わせフォームでたくさんの職種や商品などがある場合に
ユーザーにそれらを入力させないように予め入力欄に表示させる時になどに
カスタムフィールドのデータを表示させたくなります。

セレクトボックスでユーザーに選択させる方法もありますが、
自動でデータが入力されている方がユーザービリティが上がるので
個人的にはこちらの方がユーザーに優しいでしょう。

カスタムフィールドに入力された値をテキストフォームに表示させる

ここからはカスタムフィールドの値をテキストフォームに表示する方法をお伝えします。
表示させる為のコードは下記になります。

覚えることはたったこれだけです。

「Contact Form 7 Dynamic Text Extension」を
インストールすることで追加されているコードが
「dynamictext」と「CF7_get_custom_field key」です。

「dynamictext」はフォームにデータを表示させたい場合に使うコードです。
フォームにデータを表示させたくない場合は「dynamichidden」を使用しましょう。

「CF7_get_custom_field key」はカスタムフィールドのデータを取得する為のコードです。
keyの後に表示させたいカスタムフィールド名を入力することで表示が可能です。

この部分を変更することでGET値などの他の値を表示できるようになります。

参考程度ですが、GET値の表示方法は

※fooは任意の値でURLのパラメータを「http://mysite.com?foo=bar」のようにしてください。

※そのほかのデータの取得方法は公式ホームページをご確認ください。
Contact Form 7 Dynamic Text Extension

まとめ

今回は「Contact Form 7」のアドオンプラグインである
「Contact Form 7 Dynamic Text Extension」で
「Advanced Custom Fields」などで作成した
カスタムフィールドの値をテキストフォームに表示させる方法をご紹介しました。

アドオン系プラグインも調べると
痒い所に手が届くかなり便利なプラグインがあると分かりました。

今後もそのような便利なアドオン系プラグインを探していきたいと思います。

それでは今回はここまで。
最後までお読みいただきありがとうございました。