Contactform7 でinputタグにautofocusを追加する

Contact form 7 で、出力されたinputタグに autofocus を追加する方法です。

現時点(2017年11月)では、Contact form 7には、autofocus属性を指定する方法はないようです。

正攻法では、なかなかいい方法がありません。そこで、class名にautoforcusを指定すると、autoforcus属性が追加されるようにします。

まずは、function.phpに以下を追記します。

add_filter( 'wpcf7_form_elements', 'my_wpcf7_form_elements' );
function my_wpcf7_form_elements( $content ) {
 $str_pos = strpos( $content, 'autofocus"' ) + strlen('autofocus"');
 $content = substr_replace( $content, ' autofocus ', $str_pos, 0 );
 return $content;
}

このコードでやっていることは、class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required autofocus" などと表示される部分の 「autofocus"」を見つけて、その後ろに「 autofocus 」を挿入しています。かなり強引ですが。。。

使い方ですが、たとえば、

[text* your-name class:autofocus]

のようにつかいます。

もし、他にclassを指定しているのなら、autofocusが最後になるようにしてください。

例:[text* your-name class:hogehoge class:autofocus]

 

0
  • このエントリーをはてなブックマークに追加