首页 文章

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

提问于
浏览 187
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

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
    }
    
  • 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(虽然我知道你在这种情况下尝试进行客户端验证) .

  • 0

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

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

相关问题