在Contact Form 7提交中调用JavaScript函数

Question

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

在我的HTML代码中，我正在创建如下形式：

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

在我的HTML代码正文的最后，我创建了一个JavaScript函数，该函数具有我要在表单上进行的验证：

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

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

谁能告诉我为什么它可以正常运行在“二十三个十三”主题上，但是使用Skin Beauty却不能呢？有什么办法可以将JavaScript函数与表单一起使用onsubmit？

Answer 1

出于安全/潜在漏洞的原因，现在已弃用已批准的答案。ContactForm 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事件可能不是合适的触发器。单击“提交”按钮后，将提交表单。此处批准的答案是：jQuery中的联系表单7呼叫提交事件在提交整个表单之前在单击按钮的那一点截获了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
}

Answer 2

如果您希望在提交之前执行某些操作，可以使用 jQuery Submit() 函数。根据 jQuery 文档，“这发生在实际提交之前”。您需要将其附加到表单元素，而不是按钮。

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

Answer 3

编辑：这个答案现在已经过时了，因为提到的选项已被弃用（并删除）。最新方法请参阅西蒙的回答。

我不确定“二十十三”，但在使用“联系表单 7”提交表单时调用函数的正确方法是在表单的“其他设置”on_submit部分中添加该选项。

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

它看起来是这样的：

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

根据文档：

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

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

由于您对验证感兴趣，您可能还想阅读有关 Contact Form 7 的可插入服务器端验证选项的信息（尽管我知道您在本例中尝试进行客户端验证）。