联系表格 7 onclick 事件答案

【问题标题】：Contact form 7 onclick event联系表格 7 onclick 事件
【发布时间】：2016-10-30 15:14:26
【问题描述】：

我是完整的 JS 新手，所以如果有人可以帮助解决这个问题，那就太好了。

我的网站上有多个联系表单，我需要在每个提交按钮上包含自定义 JS 事件跟踪代码。

如果它是一个简单的字段，我会添加以下代码：

onClick="ga('send', 'event', { eventCategory: 'Form', eventAction: 'Call', eventLabel: 'Send', eventValue: 100});"

但我不知道如何使用 [提交“发送”] 按钮。在CF7中使用on_sent_ok函数的教程很少，但我完全迷失了......

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery wordpress contact-form-7

【解决方案1】：

如何避免所有这些东西并直接替换

[submit "SEND MESSAGE"]

与

<input type="submit" value="SEND MESSAGE" class="wpcf7-form-control wpcf7-submit" onClick="ga('send', 'event', 'form', 'submit', 'success');" />

【讨论】：

这是个好主意，但 onclick 事件不起作用。如果它起作用（出于其他原因）CF7 不会发送 - 提交表单，以便发送邮件

【解决方案2】：

将此添加到您的主题 functions.php 文件中（如果不存在则创建它）。

/**
 * Add the code that will run when on_sent_ok is triggered;
 */
function my_plugin_wpcf7_properties( $properties, $instance /* unused */ ){
    $properties[ 'additional_settings' ] .= "\n" . "ga('send', 'event', { eventCategory: 'Form', eventAction: 'Call', eventLabel: 'Send', eventValue: 100});";
    return $properties;
}
add_filter( 'wpcf7_contact_form_properties', 'my_plugin_wpcf7_properties' , 10, 2 );

如果你想要根据表单ID不同的JS代码，你可以使用第二个参数：

/**
 * Add the code that will run when on_sent_ok is triggered;
 */
function my_plugin_wpcf7_properties( $properties, $instance ){
    if ( 1 == $instance->id ) {
        $properties[ 'additional_settings' ] .= "\n" . "console.log('Form ID:1');";
    } else if ( 2 == $instance->id ) {
        $properties[ 'additional_settings' ] .= "\n" . "console.log('Form ID:2');";
    } else if ( 3 == $instance->id ) {
        $properties[ 'additional_settings' ] .= "\n" . "console.log('Form ID:3');";
    }
    return $properties;
}
add_filter( 'wpcf7_contact_form_properties', 'my_plugin_wpcf7_properties' , 10, 2 );

摘自我写的blog post

【讨论】：

但是如果我有多个表单和多个想要使用的 onClick 代码怎么办？并感谢您的帮助！
您的意思是eventValue 与表单不同吗？
一切都不一样（事件类别、事件动作、事件标签和事件值）……有3种不同的形式，每一种都需要有单独的点击属性……
有道理...更新

【解决方案3】：

我有一个解决方案，但它不是最干净的，因为您必须修改插件代码。

在 submit.php 文件中，我创建了以下 if 语句

global $post;
    if($post->ID == 19 || $post->ID == 135) {
       return $html; 
    }
    else {
       return $secondhtml; 
    }

由于我有几种形式，我有不同的 onclick 事件，因此根据帖子 ID，我返回包含输入代码的不同变量

【讨论】：