WordPressのcontact form7のエラーメッセージが二重に表示される。

Question

WordPress（オリジナルテーマ）にcontact form7でフォームを作りました。
送受信等の機能は問題ないのですが、エラーメッセージが二重に表示されてしまいます。上の４行のエラーメッセージは無くしたいです。

####オリジナルテーマのフォーム部分のHTML記述

<section class="nyukai_form">
<h2>入会の申し込み</h2>
<?php echo do_shortcode( '[contact-form-7 id="●●●" title="入会申し込みフォーム"]' ); ?>
</section>
```#**↓**エラーメッセージが出たときのソース（HTML)

<section class="nyukai_form"> <h2>入会の申し込み</h2> <div> <div role="form" class="wpcf7" id="wpcf7-■■-■■" lang="ja" dir="ltr"> <div class="screen-reader-response" role="alert">入力内容に問題があります。内容をご確認の上、再度お試しください。 <ul> <li>必須項目に入力してください。</li> <li>必須項目に入力してください。</li> <li>必須項目に入力してください。</li> </ul> </div> <form action="/#wpcf7-■■-■■" method="post" class="wpcf7-form invalid" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="■" /> <input type="hidden" name="_wpcf7_version" value="5.1.5" /> <input type="hidden" name="_wpcf7_locale" value="ja" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-■■-■■" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="g-recaptcha-response" value="" /> </div> <dl class="contact7"> <dt>お名前<span class="must">必須</span></dt> <dd> <span class="wpcf7-form-control-wrap ■■■■"> <input type="text" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例：■■■■■■■■" /> <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span> </span> </dd> <dt>■■■■<span class="must">必須</span></dt> <dd> <span class="wpcf7-form-control-wrap ■■■■"> <input type="text" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例：■■■■■■■■" /> </dd> <dt>メールアドレス<span class="must">必須</span></dt> <dd> <span class="wpcf7-form-control-wrap ■■■■"> <input type="email" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例：■■■■■■■■" /> <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span> </span> </dd> <dt>電話番号<span class="optional">任意</span></dt> <dd> <span class="wpcf7-form-control-wrap ■■■■"> <input type="tel" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="例：000-0000-0000" /> </span> </dd> <dt>ご質問等<span class="optional">任意</span></dt> <dd> <span class="wpcf7-form-control-wrap ■■■■"> <textarea name="■■■■" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="ご質問等がございましたらご入力ください。"></textarea> </span> </dd> </dl> <p> <span class="wpcf7-form-control-wrap ■■■■"> <span class="wpcf7-form-control wpcf7-acceptance"> <span class="wpcf7-list-item"> <label> <input type="checkbox" name="■■■■" value="1" aria-invalid="false" /> <span class="wpcf7-list-item-label">個人情報の取扱いについて、同意の上送信します。</span> </label> </span> </span> </span> </p> <p class="btn_contact7"> <input type="submit" value="上記の内容で申込をする" class="wpcf7-form-control wpcf7-submit" /> </p> <div class="wpcf7-response-output wpcf7-validation-errors" role="alert"> 入力内容に問題があります。内容をご確認の上、再度お試しください。 </div> </form> </div> </div> </section> ```

オリジナルテーマのfanctions.phpは何も記入していません。
直らずに困っています。。

##解決しました！
ご回答を参考に、CSSファイルに

/* エラーメッセージの上部を消去 */
div.screen-reader-response{
  display: none;
}

を追記したら綺麗に消えてくれました！

Answer 1

回答になるかどうかわかりませんが、長くなるのでここに書かせてもらいます。
とりあえずこの記事が参考になるのではないでしょうか。

【WordPress】ContactForm7の備忘録
https://www.smilevision.co.jp/blog/wp-contactform7_error/

記事のとおり以下のcssを追加してみてはどうでしょうか。
（同じ状況を再現できないので検証はできていませんが……）

/* エラーメッセージの上部を消去 */
div.screen-reader-response{
  display: none;
}

打ち出されているコードをよく確認すれば、たぶん……、標準テーマでも以下のコードは打ち出されていると思います。それをプラグインのCSSで消しているようです。そのCSSがオリジナルテーマでは効いていないのだと思います。

<div class="screen-reader-response" role="alert">入力内容に問題があります。内容をご確認の上、再度お試しください。
    <ul>
        <li>必須項目に入力してください。</li>
        <li>必須項目に入力してください。</li>
        <li>必須項目に入力してください。</li>
    </ul>
</div>

参考まで。

Comments

[Octor]

8-0_nyan5さんのご回答どおり、CSSに
/* エラーメッセージの上部を消去 */
div.screen-reader-response{
display: none;
}
を追加しただけで解決することができました！大変助かりました...！
備忘録のリンクなども、詳しく本当にありがとうございました！

Answer 2

WordPress の標準テーマ(Twenty Nineteen や Twenty Seventeen )の場合は、どのような表示になるのでしょうか？

標準テーマで問題が発生しない場合は、作成されているオリジナルテーマでの問題と考えられますので、テンプレートファイルのソースコードやfunctions.php の内容が分からないと原因の特定は困難です。
関連するソースコードを質問に追記していただかないとソースコードが見えない状況では原因特定は困難とおもいます。

標準テーマでも発生する場合は、Contect Form 7 の設定か他のプラグインの影響が考えられます。お使いのプラグインの情報や設定情報等の提供をお願いします。

Comments

[Octor]

CHERRYさん
回答ありがとうございます！標準テーマ（Twenty Seventeenで試しました）だと、問題なく動作したので
オリジナルテーマのコードがおかしいようです。。
テンプレートファイルのソースコードを質問に追記します。

[CHERRY]

テンプレート側の php のソースコードで、関数の呼び出しなどが重複しているのではないかと思っているので、ソースコードの記載をお願いしたのですが、Web ブラウザで表示される内容ではなく、php のソースコードを記載いただけないでしょうか？

[Octor]

度々見ていただきありがとうございます！
先ほど、8-0_nyan5さんの回答で解決することができました。
CHERRYさんのご指摘も大変助かりました！