wordpress - 在提交联系表单 7 时调用 JavaScript 函数

Question

我在 Wordpress 中使用 Contact Form 7，主题为 Skin Beauty。我想要做的是在提交我创建的表单时调用特定的 JavaScript 函数。

在我的 HTML 代码中，我创建了一个如下所示的表单:

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

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

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

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

谁能告诉我为什么它在“二十十三”主题上运行正确，但在“皮肤美容”上却不能？有什么方法可以将 JavaScript 函数与表单的 onsubmit 结合使用？

Answer 1

出于安全原因/联系表格 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
}