【问题标题】:hide validation errors or success message box on contact form 7在联系表单 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 吗?
  • 如果隐藏验证错误,用户怎么知道他们失败了?

标签: php css wordpress validation contact-form-7


【解决方案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');
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-09-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-10-26
          • 2021-04-25
          • 1970-01-01
          相关资源
          最近更新 更多