Contact Form 7 is a popular WordPress form builder because of how easy it is to extensively customise its functionality, getting it to work hand in glove with other plugins and custom functions. It has a bunch of snippets that admins can add to the Additional Settings tab of each contact form that allow them to hook JavaScript code into the form code.

One of these was on_sent_ok, and this allowed admins to add Google Ads (or as it used to be known: Google Adwords) conversation tracking code to the submission event of specific forms. However this setting snippet was depreciated in 2017 due to potential safety concerns.

So this is now the most solid way I’ve found of adding Google Ads conversion tracking code to Contact Form 7 forms in WordPress:

  1. Find your theme’s functions.php file and open it in your grandma’s favourite text editor. You should find it under wp-content/themes/yourtheme. Note: When editing the files of a theme built by someone else it’s always a great idea to create a child theme and edit that.
  1. Add the following code to the bottom of the functions.php file and save it:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
 ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>
<?php
}

Or if you’d like the conversion tracking to only be called on one particular form, use:

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '123' == event.detail.contactFormId ) {
ga( 'send', 'event', 'Contact Form', 'submit' );
}
}, false );
</script>
<?php
}

Replace the red 123 there with the ID of the form you’d like it to be called on. You can find the correct form ID in the form’s shortcode in the CF7 admin interface.

  1. Log in to Google Analytics, find your property and go to Admin > View > Goals and click the +New Goal button
goals
new-goal
  1. Select the custom template. The “Contact us” template may be available for users who’ve set up goals before. If it’s an option then select it.
custom-goal
  1. Give your goal a name and set “event” as the trigger
event-trigger
  1. Set the Event Category to “Contact Form” and the action to “submit”
goal-details
  1. Save your new goal and switch over to Google Ads. In Ads go to Tools & Settings > Conversions (under Management)
  1. Click the big blue + and select Import, then select Google Analytics, then Continue and select your new goal for importing. It can take a little while for Analytics goals to appear for importing in Google Ads so if you do not see your goal yet just wait 5 minutes or so and refresh the page.

That’s pretty much it!

Give it a little test and make yourelf a brew.

You may also like…

Author: Aidan Ashby

Aidan is a web and branding designer living in Bristol, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.