contactform7の「.wpcf7-display-none」とかが付与されない

なんでかはわからないんですがワードプレスでお問い合わせフォームなどを作るときにとっても便利なプラグイン、contactform7のメッセージ欄である「.wpcf7-response-output」要素がずっと表示されちゃう現象がいつからか発生していました。PHPのバージョンとかかな、と思いますしたぶん誰かれ構わず発生することじゃないと思いますが、一応どんな現象なのかを書いておきますね。

.wpcf7-display-noneとかが付与されない

contactform7では成功しました、とか送信に失敗しました、とかのメッセージ表示要素に「.wpcf7-response-output」というクラスが振られています。

そしてこの要素にはさらに追加で、まだメッセージ表示してない時なら「.wpcf7-display-none」が、正常に送信できた時は「wpcf7-mail-sent-ok」が、そしてエラーが発生したときは送信エラーで「wpcf7-mail-sent-ng」が未入力エラーで「wpcf7-validation-errors」が付与されます。

今回なぜかこの「.wpcf7-display-none」「wpcf7-mail-sent-ok」「wpcf7-mail-sent-ng」「wpcf7-validation-errors」の4つが付与されなくなってしまったために、本来なら「.wpcf7-display-none」で非表示になっているはずのメッセージ要素が常に表示されるようになっていました。

とりあえず一時対策

調べてみても英語の記事で何件か報告があるばかりで、それも1年以上前の記事。という事でたぶんなにかしら環境依存の不具合なんだと思います。やっぱりPHPのバージョンとか、それかレンタルサーバーの環境なのか、ちょっとわかりませんがとりあえず見栄えがよくないので一時的な対策を。

これってなにも表示するメッセージがないのに枠線が表示されちゃってるのが問題なだけ。

てことでもう枠線をなくしちゃえば表示上は自然になります。「.wpcf7-response-output」のborderをnoneすればいいだけ、ってコト。あと一応背景も透明にもしちゃいましょう。こんな感じ。

.wpcf7-response-output{
border:none;
background:transparent;
}

これでOK。

エラーの時色を赤に、成功の時色を緑に、みたいな出し分けはできなくなっちゃいますがとりあえずは枠線を消せばユーザーから見ればそこまで不自然ではないので、とりあえずの対処としてはこれでOK!だと思います。

原因を知ってる方はぜひ

今回はワードプレスの人気プラグインcontactform7でエラーメッセージなどを表示する要素がずっと表示されっぱなしになっちゃう現象について紹介しました。

PHPのバージョンなのかレンタルサーバー依存なのかわかりませんがとりあえず中身のない枠線だけが表示されちゃうのが不格好なだけなので、枠線だけnoneしてあげればしのげはします。

…とはいっても何が原因なのかわかっていないので、「いや、おれっち（あたし）もうそんなのとっくの昔に解決済み！」という方はよければ下部メッセージ欄よりコメントください。お待ちしております。

Message 書き込む