コンタクトフォーム編集画面の「メッセージ」タブにて、Contact Form 7 がさまざまな状況に表示するのに使うメッセージを編集できるのはご存じかと思います。このメッセージ内では平文のテキストのみ使用可能です。HTML のタグや実体参照は使えません。
メッセージの中での HTML の使用を認めるのはセキュリティ上好ましくないので、Contact Form 7 4.4 以降ではメッセージを表示する際に強制的に HTML を取り除きます。「メッセージ」タブに HTML が使われていないことを確認しましょう。
もし、特定の状況に特定の HTML コンテンツを表示する目的のためにメッセージでの HTML 使用を必要としているのなら、もっといい方法があります。
フォーム送信後、Contact Form 7 は form
要素に、その時点のフォームの状態を示した class
属性値を追加します。取り得る状態は:
- invalid — 1個以上の検証エラーが発生している
- spam — 送信がスパム行為の疑いがある
- sent — フォーム送信は正しく行われ、メールの送信にも成功した
- failed — フォーム送信は正しく行われたが、メールの送信に失敗した
これらのクラスと CSS スタイルシートを組み合わせて使うことで、特定の状況でのみ表示される HTML コンテンツのブロックをフォーム内に配置することができるようになります。
例として、visible-only-if-invalid というクラスがついた div
要素をフォームに配置して、これをデフォルトでは非表示に、検証エラーが発生している状況でのみ表示する方法を考えてみましょう。
<div class="visible-only-if-invalid">
<font color="#f00">検証<marquee>エラー</marquee>がありますよ!</font>
</div>
次のような CSS のスタイルルールで実現できます:
.wpcf7 form div.visible-only-if-invalid {
display: none;
}
.wpcf7 form.invalid div.visible-only-if-invalid {
display: block;
}
同様の方法で、その他の状況に基づいた要素表示の制御も可能になります。