Question

我在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它没有？有什么方法可以将我的JavaScript函数用于我的表单onsubmit？

Answer 1

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

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

Answer 2

编辑：由于所引用的选项已被弃用（并已删除），因此此答案已过时。有关最新方法，请参阅Simon's answer。

我不确定二十三，但是通过在联系表单7中提交表单来调用函数的正确方法是在Additional Settings部分添加on_submit选项你的表格。

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

这就是它的样子：

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

根据文件：

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

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

由于您对验证感兴趣，您可能还想阅读有关联系表单7 pluggable server-side validation options的信息（尽管我知道您正在尝试进行客户端验证）这种情况）。

Answer 3

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

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

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