【Contact Form 7】 エラー/送信成功メッセージを非表示にする方法

【Contact Form 7】 エラー/送信成功メッセージを非表示にする方法

こんにちは、ゆうや(@yuyaphotograph)です!

この記事では、

  • Contact Form 7でフォーム直前に表示されるエラーメッセージを非表示にしたい
  • Contact Form 7でフォーム下に表示される送信成功メッセージを非表示にしたい
  • Contact Form 7でフォーム下に表示されるエラーメッセージを非表示にしたい

という方のお悩みを解決します!

Contact Form 7のメッセージ非表示コード集

フォーム直前のエラーメッセージを非表示

wcf7上部エラーメッセージ

メッセージ例

フォーム直前のエラーメッセージを非表示
div.screen-reader-response{
  display: none;
}

フォーム下の送信成功メッセージを非表示

wcf7 送信成功メッセージ

メッセージ例

フォーム下の送信成功メッセージを非表示
div.wpcf7-mail-sent-ok {
  display: none!important;
}

フォーム下のエラーメッセージを非表示

wcf7エラーメッセージ

メッセージ例

フォーム下のエラーメッセージを非表示
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
  display: none !important;
}

まとめ

以上、Contact Form 7のエラー/送信成功メッセージを非表示にする方法を紹介しました。

コーポレートサイト制作の案件だと、上記で紹介したメッセージは見栄え上、削除要求をいただくことが多いのでまとめてみました。

少しでも役に立てれば幸いです。

 

「他にもContact Form 7関連の情報を知りたい!」

という方は以下の記事も目を通してみてください〜

ContactForm7 選択肢ごとに返信メール内容を条件分岐させる方法【Conditional Fields】Contact Form 7 選択肢ごとに返信メール内容を条件分岐させる方法【Conditional Fields】 Contact Form 7で文字数制限する方法と文字数カウントを表示する方法Contact Form 7で文字数制限する方法と文字数カウントを表示する方法 【Contact Form 7】チェックボックスをカスタマイズする方法【Contact Form 7】チェックボックスのデザインをカスタマイズする方法 【Contact Form 7】 自動返信メールのメッセージ本文のテンプレはこれだ!【Contact Form 7】 自動返信メールのメッセージ本文のテンプレはこれだ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です