i am plete JS newbie, so if somebody can help with this issue, that would be great.

I have multiple contact forms on my site, and i would need to include custom JS event tracking code on each of submit buttons.

If it was a simple field, i would just add this code to it:

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

but i dont know how to do so with [submit "Send"] button. There are few tutorials for using on_sent_ok function in CF7, but i am pletely lost...

Any help would be greatly appreciated!

i am plete JS newbie, so if somebody can help with this issue, that would be great.

I have multiple contact forms on my site, and i would need to include custom JS event tracking code on each of submit buttons.

If it was a simple field, i would just add this code to it:

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

but i dont know how to do so with [submit "Send"] button. There are few tutorials for using on_sent_ok function in CF7, but i am pletely lost...

Any help would be greatly appreciated!

• javascript
• jquery
• wordpress
• contact-form-7

3 Answers 3

How about avoiding all of this stuff and just replace

[submit "SEND MESSAGE"]

with

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

Add this to your theme functions.php file (create it if it doesn't exist).

/**
 * 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 );

If you want different JS code depending on form ID, you can use the 2nd parameter:

/**
 * 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 );

Extracted from a blog post I wrote

I have a solution, but it's not the most clean one as you have to modify plugin code.

In the submit.php file I've created the following if statement

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

As i have several forms I have different onclick events for them so depending on post ID I return different variable containing the input code