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

Calling a JavaScript function on Contact Form 7 submission

提问by Nikos K

I'm using Contact Form 7 in Wordpress, with Skin Beauty as the theme. What I want to do is to call a specific JavaScript function when the form I created is submited.

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

In my HTML code I am creating a form like this:

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

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

And at the end of the body of my HTML code, I am creating a JavaScript function with the validation I want to do on the form:

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

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

I tried the code in another theme (Twenty Thirteen) - with Contact Form 7 - and the weird thing is that there was no problem there.

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

Can anybody tell me why it runs correctly on the Twenty Thirteen theme, but with Skin Beauty it doesn't? Is there any way I can use my JavaScript function with my form's onsubmit?

谁能告诉我为什么它可以在 23 个主题上正确运行，但在 Skin Beauty 中却不能？有什么办法可以将我的 JavaScript 函数与表单的onsubmit.

回答by Simon Brown

The approved answer has now been deprecated for reasons of security / potential vulnerabilities in code the author of Contact Form 7 has no control over. More details here: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

由于安全/潜在漏洞的原因，已批准的答案现已被弃用，联系表 7 的作者无法控制。更多详情：https: //contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

Instead you need to intercept the DOM Event wpcf7submit - details for which are here: https://contactform7.com/dom-events/

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

In your specific example, find the id of your form which is the ID in the shortcode. Let's imagine that number is 123 (although it probably isn't).

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

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

as per the example above. There are two issues - firstly I can'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 because (second issue) this event gets fired AFTER submission and you need to have your events run BEFORE submission, so the onsubmit event probably isn't the appropriate trigger. Submission of the form happens after the "submit" button is clicked. The approved answer here: Contact form 7 call submit event in jQueryintercepts the DOM at the point where the button is clicked, prior to the whole form being submitted. This is the approach I would take.

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

Remember you can add the listener into functions.php like this:

请记住，您可以像这样将侦听器添加到 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
}

回答by Ben

If you are looking to do something before submit, you can use the jQuery Submit() function. Per jQuery documentation, "This happens prior to the actual submission". You need to attach it to the form element, not the button.

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

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

回答by Christian

I added the javascript function at the end of the footer.phpfile:

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

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

This will work only if you have a single form within your website:

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

回答by Tim Malone

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

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

---

---

I'm not sure about Twenty Thirteen, but the correct way to call a function on the submission of the form with Contact Form 7 is by adding the on_submitoption in the Additional Settingssection of your form.

我不确定 23 岁，但在使用联系表 7 提交表单时调用函数的正确方法是在表单on_submit的“附加设置”部分添加选项。

This will ensure your code is appropriately hooked in to Contact Form 7's routines and will be called at the right time.

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

Here's what it looks like:

这是它的样子：

You can include either one, or both, of these additional settings.

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

As per the documentation:

根据文档：

If you set on_sent_ok:followed by a one-line JavaScript code, you can tell the contact form the code that should be performed when the mail is sent successfully. Likewise, with on_submit:, you can tell the code that should be performed when the form submitted regardless of the outcome.

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

Please also note you shouldn't be creating your own <form>tag. Contact Form 7 does this for you when you include the form via its shortcode (eg. [contact-form-7 id="10"]) and creating your own tag will have unintended consequences.

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

Since you're interested in validation, you may also like to read up about Contact Form 7's pluggable server-side validation options(although I know you're trying to do client-side validation in this case).

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