Contact Form 7の 「input」タグに属性を追加する方法

Contact Form 7には、生成されるタグにclassやidを付与できます。
ただしこれは展開されると、<span class="◯◯"><input ..... ></span>など、spanタグで括られてしまいます。classなどはそれでもいいのですが、onClickとか付与したい場合どうしたらいい？

という質問があったので手持ち環境で試してみました。
以前、[resolved] Include Custom Shortcodes in Form? (WordPress Forum)にて、Contact Form 7の要素に対して何か処理する関数を作れることはわかっていたので、やってみました。

具体的に説明するため、

• チェックボックスに「onClick="hogehoge(this,'t')"」 を付与する

方法を例に出して説明します。
つまり

•  <input type="checkbox" ....> → <input onClick="hogehoge(this,'t')" type="checkbox" ...> 

にするこいうことです。

仕組み

Contact Form 7が用意している数多くのフックの一つ「wpcf7_form_elements」を使います。これは、問い合わせフォームのタグが展開されたデータを取り扱うということです。

たとえば、チェックボックスに「aaa」「bbb」「ccc」の３つを加えた場合、「wpcf7_form_elements」のフックをつかうと下記のようなデータを扱うことになります（※下記を吐き出すコードは、末尾の参照１）。



これをみると、<input type="checkbox" を置換してやればいいということが分かります。PHPでの置換でもっとも単純なのは、str_replaceですのでこれを使います。

置換設定

functions.phpに

add_filter('wpcf7_form_elements', 'add_checkbox_attributes');

function add_checkbox_attributes ($form){

  $form = str_replace('<input type="checkbox"', '<input  onClick="hogehoge(this,'. "'t'". ')" type="checkbox"', $form);

  return $form;

}

を加えます。

※ "や'を利用しているので、それぞれ’なら、"でくくる、"なら'で括ってエスケープします。

あとはソースをみると

のように、onClickが付与されているのが確認できるかと思います。

参照１. wpcf7_form_elementsのデータを確認する

functions.phpに

add_filter('wpcf7_form_elements', 'add_checkbox_attributes');

function add_checkbox_attributes ($form){

  $form = nl2br(htmlspecialchars($form));

  return $form;

}

を加えます。

2015年3月24日 kimipooh