在 Contact Form 7 提交时调用 JavaScript 函数答案

【问题标题】：Calling a JavaScript function on Contact Form 7 submission在 Contact Form 7 提交时调用 JavaScript 函数
【发布时间】：2016-10-14 14:22:55
【问题描述】：

我在 Wordpress 中使用 Contact Form 7，以皮肤美容为主题。我要做的是在提交我创建的表单时调用特定的 JavaScript 函数。

在我的 HTML 代码中，我正在创建一个这样的表单：

<form onsubmit="checkvalue()">
...
</form>

在我的 HTML 代码正文的末尾，我正在创建一个 JavaScript 函数，其中包含我想在表单上执行的验证：

<script language="JavaScript" type="text/javascript">
   function checkvalue() {
   ...
   }
</script>

我在另一个主题（二十三）中尝试了代码 - 使用联系表 7 - 奇怪的是那里没有问题。

谁能告诉我为什么它在 23 主题上正确运行，但在 Skin Beauty 中却没有？有什么方法可以将我的 JavaScript 函数与表单的 onsubmit 一起使用？

【问题讨论】：

标签： wordpress contact-form-7

【解决方案1】：

编辑：此答案现已过时，因为所引用的选项已被弃用（并删除）。最新方法见Simon's answer。

我不确定二十三，但在使用联系表 7 提交表单时调用函数的正确方法是在表单的 Additional Settings 部分添加 on_submit 选项。

这将确保您的代码正确连接到 Contact Form 7 的例程，并在正确的时间被调用。

它是这样的：

您可以包含这些附加设置中的一个或两个。

根据文档：

如果您设置on_sent_ok: 后跟一行JavaScript 代码，您可以告诉联系表单邮件发送成功时应该执行的代码。同样，使用on_submit:，您可以告诉无论结果如何，当表单提交时应该执行的代码。

还请注意，您不应创建自己的<form> 标签。当您通过其简码（例如[contact-form-7 id="10"]）包含表单时，Contact Form 7 会为您执行此操作，并且创建您自己的标签会产生意想不到的后果。

由于您对验证感兴趣，您可能还想了解 Contact Form 7 的 pluggable server-side validation options（尽管我知道您在这种情况下尝试进行客户端验证）。

【讨论】：

非常感谢您的回答。当我在寻找解决问题的方法时，我也找到了这两个选项，并尝试了 on_submit。 on_submit 的问题在于，当 ι 按下我的表单按钮时，尽管验证有效，但表单仍然在提交。如果字段中出现错误，我搜索是否有任何方法可以取消提交，但我找不到任何东西。
@NikosK 嗯，你知道吗，我上面链接的服务器端验证选项实际上会对你的情况有所帮助，因为 CF7 在提交表单之前通过 Ajax 进行验证。所以它几乎和客户端验证一样好。那会是一个合适的解决方案吗？除此之外，我不知道有一种内置方法可以阻止表单提交（这可能是通过一些黑客行为）。
@NikosK 或者是我刚刚找到的这个插件 - wordpress.org/plugins/jquery-validation-for-contact-form-7 - 看起来它可以进行客户端验证。我现在无法研究它，但你可以从它的代码中了解它是如何做到的。
非常感谢您的关注。我查看了许多用于验证的插件，但在我的表单中，我使用单选按钮和复选框，但我找不到验证这些的插件。另外因为一些复选框有限制（必须选中两个以上的选项），我也需要在电子邮件表单中使用一些 javascript，以便我可以将它们全部显示出来。所以这个插件并没有真正的帮助。
@NikosK 服务器端验证选项怎么样，因为它是通过 Ajax 完成的？

【解决方案2】：

出于安全原因/联系表格 7 的作者无法控制的代码中的潜在漏洞，现已弃用已批准的答案。更多细节在这里：https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

相反，您需要拦截 DOM 事件 wpcf7submit - 详细信息在这里：https://contactform7.com/dom-events/

在您的具体示例中，找到表单的 ID，即简码中的 ID。让我们假设这个数字是 123（尽管可能不是）。

document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        alert( "The contact form ID is 123." );
        // do something productive
    }
}, false );

按照上面的例子。有两个问题 - 首先我看不到表单值在哪里传递给这个侦听器，我怀疑此时它们可能不再可见。那是因为（第二个问题）这个事件在提交之后被触发并且你需要在提交之前让你的事件运行，所以 onsubmit 事件可能不是合适的触发器。单击“提交”按钮后会提交表单。此处批准的答案：Contact form 7 call submit event in jQuery 在提交整个表单之前在单击按钮的位置拦截 DOM。这是我会采取的方法。

记住你可以像这样将监听器添加到functions.php中：

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        var wpcf7Elm = document.querySelector( '.wpcf7' );

        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            alert( "Fire!" );
        }, false );
    </script>
    <?php
}

【讨论】：

【解决方案3】：

如果你想在提交之前做一些事情，你可以使用 jQuery Submit() 函数。根据 jQuery 文档，“这发生在实际提交之前”。您需要将其附加到表单元素，而不是按钮。

$('.wpcf7-form').submit(function() {
    //your code here
});

【讨论】：

【解决方案4】：

我在 footer.php 文件的末尾添加了 javascript 函数：

<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
  //Your code here
  }, false );
</script>

这仅在您的网站中有一个表单时才有效：

【讨论】：