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

WordPress
この記事は約2分で読めます。
スポンサーリンク

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 が6月17日にリリースされます。5.6 では大規模な変更があるので、本番…

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

つまり、旧バージョンで

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

であったものが、

<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)のコードのセレクタも変更しないといけないのです。

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

コメント

タイトルとURLをコピーしました