Contact Form 7 5.6で注意するマークアップ

WordPressで構築したWebサイトで人気のメールフォームプラグイン「Contact Form 7」。
とあるサイトでも Contact Form 7 でフォームを作成して利用していたのですが、5.5.6 から 5.6 にバージョンアップした時に予想外の出来事が起きました。

そのフォームではJavaScriptによって、チェックボックスやラジオボタン、あるいはプルダウンメニューの選択内容（値）により、次の項目の選択肢が変化するようにしていました。
ところが、Contact Form 7を5.6にバージョンアップしたとたんに効かなくなってしまったのです。
しばらく原因がさっぱり分からなかったのですが、プラグインサイトのリリースをきちんと読んで納得しました。

Contact Form 7 5.6 ベータ | Contact Form 7 [日本語]

バージョン5.6から、フォームコントロールのマークアップが変更されているようです。
以前のバージョンではフォームコントロールのラッパー要素（wpcf7-form-control-wrapクラス）にクラス名として付加されていたものが無くなり、代わりにdata-name属性に同名で追加されるようになったようです。

つまり、旧バージョンで

HTML

<span class="wpcf7-form-control-wrap your-name">
    <input class="wpcf7-form-control wpcf7-text" type="text" name="your-name" />
</span>

であったものが、

HTML

<span class="wpcf7-form-control-wrap" data-name="your-name">
    <input class="wpcf7-form-control wpcf7-text" type="text" name="your-name" />
</span>

に変更されたわけです。

なので、JavaScript(jQuery)のコードのセレクタも変更しないといけないのです。
なお、JavaScriptの記述の場合は、角括弧に入れて、

JavaScript

[data-name="your-name"]

といった記述になります。

以上、ご覧くださり、ありがとうございます。お役に立てれば幸いです。

WordPress – Contact Form 7を5.6にバージョンアップにした時に注意するマークアップ

コメント