在联系表单 7 上隐藏验证错误或成功消息框

Posted 2023-03-06

【中文标题】在联系表单 7 上隐藏验证错误或成功消息框

【英文标题】：hide validation errors or success message box on contact form 7

【发布时间】：2019-09-17 21:19:28

【问题描述】：

我正在使用插件联系表单 7 版本 5.1.1，我如何从底部表单隐藏显示验证错误或成功消息框...

我已经搜索了很多放置此代码的文章

div.wpcf7-response-output 
    display: none !important;

我将该代码放在 ./themes/myproject/style.css 中，但不起作用

那么如何从那里隐藏验证错误或成功消息框

【问题讨论】：

您确定 style.css 文件已加载吗？您确定“发生验证错误”是一个带有wpcf7-response-output 类的 div 吗？

如果隐藏验证错误，用户怎么知道他们失败了？

【参考方案1】：

div.wpcf7-response-output, div.wpcf7-validation-errors  display: none !important; 
span.wpcf7-not-valid-tip  display: none; 
   

【讨论】：

感谢您的回答。但我该把代码放在哪里？我已经将它粘贴到“./themes/myproject/style.css”但仍然无法正常工作

在你的主题的css文件中，或者可以使用这个插件wordpress.org/plugins/custom-css-and-javascript

【参考方案2】：

.wpcf7-response-output  display: none !important; 

将以上代码放在style.css中

如果上面的代码不起作用，那么您可以从联系表 7 中更改 validation.css。

div.wpcf7-response-output, div.wpcf7-validation-errors  display: none !important;  
span.wpcf7-not-valid-tip  display: none; 

【参考方案3】：

隐藏成功消息的解决方案。

首先，登录管理面板并从左侧面板中选择联系表格 7 菜单。

接下来，编辑您要更改的表单并转到它的底部。您将获得名为“附加设置”的框。在“附加设置”框中，添加以下代码行。

on_sent_ok: "$('.wpcf7-mail-sent-ok').ajaxComplete(function()$(this).delay(2000).fadeOut('slow'););"

【参考方案4】：

如果您希望在页面加载时最初隐藏该字段，但希望它显示存在验证错误的位置，这里有一个细微的变化。

.wpcf7 form.init .wpcf7-response-output 
    display: none

来源，联系表格 7 支持：https://wordpress.org/support/topic/contact-form-7-5-2-validation-message-always-visible/

在我的例子中，样式为这个（空）字段提供了背景颜色和边框，使它看起来像一个空的、未标记的输入字段。它看起来像是用户应该填写的内容，但无法填写。而且它看起来很糟糕。 添加上述 CSS 会隐藏该字段，除非：

存在验证错误 表单已成功发送（此字段也用于显示成功消息。

【参考方案5】：

我知道聚会迟到了。但你也可以只添加到你的主题/子主题的functions.php：

add_filter('wpcf7_form_response_output', '__return_empty_string');