Contact Form 7: Tracking Conversions on Your WordPress Site

So you have a bunch of contact forms on your site? Do you know which form works the best? If you don’t, you need to invest some time, tracking form conversions, on your WordPress website. Let me explain. Consider the WisdmLabs website. We have a contact form on the ‘Contact Us’ page, one in the sidebar of a blog post (like this one), and on landing pages as well. Each of these forms are structured differently. To know which contact forms visitors respond to the most, we have to track the number of visitors filling up each form.

To track form conversions, specifically Contact Form 7 form conversions, you can use an available hook, which tracks when a form has been filled. The data can be saved as quantitative statistics, and can be represented using a pie chart.
[space]

How to Track when a Contact Form 7 is Filled

If you’ve worked with the Contact Form 7 plugin, you’ll be familiar with its basic operations. You will know that there is an action which is invoked when every form is filled. From a layman’s perspective, that “action”, is the mail which is sent. And from a WordPress developer’s perspective, the action in discussion here, is the ‘wpcf7_before_send_mail’ or the ‘wpcf7_after_send_mail’ hook.

Let’s make use of the ‘wpcf7_before_send_mail’ hook, to track when a form has been filled. What we will do, is keep track using a counter, which will be saved as the post meta. The post being the container of the Contact Form 7 form.

For this, you will have to add the below code in the functions.php file of your theme or a custom plugin.

// add a function on the 'wpcf7_before_send_mail' hook
add_action( 'wpcf7_before_send_mail', 'wdm_add_contact_form_counter');

function wdm_add_contact_form_counter( &$wpcf7_data ) {

   // we have to get the post id, using the content posted
   $unit_tag = $wpcf7_data->posted_data[ '_wpcf7_unit_tag' ];
   if ( ! empty( $unit_tag ) ) {
       preg_match( '/^wpcf7-f(\d+)-p(\d+)-o(\d+)$/', $unit_tag, $matches );
       $post_id = (int) $matches[ 2 ];

       // increment the post counter. Let’s save this value under wdm_contact_form_filled key
       $count_key = 'wdm_contact_form_filled';

       $count = get_post_meta( $post_id, $count_key, true );

       $count = intval( $count );

       // if the the counter is not already present
       if ( empty( $count ) ) {
           // set the count to 1
           $count = 1;
           // add the value along with the key to the specified post
           add_post_meta( $post_id, $count_key, $count );

       } 
       else {
           // if there is a counter present. Increment the counter by 1.
               $count ++;

           // update the value of the counter in the post meta
           update_post_meta( $post_id, $count_key, $count );
       }
   }
}

Once we have the data in hand, we can represent it using a Google Chart, for a quick analysis of the received data. It’s simple. We have to iterate through the posts, and read the meta value. Then use the API provided, to represent the statistics graphically.

[space]

This sort of a counter can be used to track other forms on your site as well, if sufficient hooks are available. Tracking can help you analyse and tweak the forms on your site, to improve conversions. Go ahead, try it out. Skip the graphical representation if you want, and just list out simple statistics. You can extend the functionality by displaying statistics against time. And if you have any doubts or questions along the way, do feel free to write them to me, using the comment section below.

Happy Weekend!