首页 文章

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

提问于
浏览 次
4

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

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

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

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

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

我尝试了另一个主题（二十三）中的代码 - 使用Contact Form 7 - 而奇怪的是那里没有问题 .

任何人都能告诉我为什么它在Twenty Thirteen主题上正确运行，但是使用Skin Beauty它没有't? Is there any way I can use my JavaScript function with my form' s onsubmit ？

wordpress contact-form-7

3 回答

  • 4

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

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

    在您的特定示例中，查找表单的ID，该ID是短代码中的ID . 让我们假设这个数字是123（虽然它可能不是） .

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

    按照上面的例子 . 有两个问题 - 首先我可以't see where the form values get passed to this listener and I suspect they may no longer be visible by this point. That's因为（第二期）此事件在提交后被触发，您需要在提交之前运行您的事件，因此onsubmit事件可能不是合适的触发器 . 单击"submit"按钮后，将提交表单 . 这里批准的答案：Contact form 7 call submit event in jQuery在提交整个表单之前截取点击按钮的DOM . 这是我要采取的方法 .

    请记住，您可以将listener添加到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
}
    回复于
  • 0

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

    $('.wpcf7-form').submit(function() {
    //your code here
});
    回复于
  • 1

    EDIT: This answer is now out-of-date as the options referred to have been deprecated (and removed). See Simon's answer for the latest method.

    我不确定Twenty Thirteen，但是使用Contact Form 7提交表单时调用函数的正确方法是在表单的Additional Settings部分添加 on_submit 选项 .

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

    这是它的样子：

    enter image description here

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

    根据文件：

    如果设置on_sent_ok：后跟单行JavaScript代码，则可以告知联系人表单成功发送邮件时应执行的代码 . 同样，使用on_submit：，您可以告诉代码在表单提交时应该执行，而不管结果如何 .

    请注意你 shouldn't be creating your own <form> tag . 当您通过其短代码（例如 [contact-form-7 id="10"] ）包含表单时，联系表单7会为您执行此操作，并且创建您自己的标记将产生意想不到的后果 .

    自从你're interested in validation, you may also like to read up about Contact Form 7' s pluggable server-side validation options（虽然我知道你在这种情况下尝试进行客户端验证） .

    回复于

相关问题