Search

Contact Form 7: Tracking Conversions on Your WordPress Site

Listen to this article

contact-form-conversion-trackingSo 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.

track-contact-form7-conversions

[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!

Akshaya Rane

Akshaya Rane

4 Responses

  1. Hello, how are you?
    I created this code and clei in my functions.php, then created the custom field, but did not work, what could it be?
    help me.

    1. Hi Sérgio,

      Could you try if the code works after removing the custom fields that you have added.

        1. Hi Sérgio
          This code will work for any custom post type. Try below code on single-job page to check whether any values are stored in post’s meta field,
          $key_1_value = get_post_meta( get_the_ID(), ‘key_1’, true );
          if( ! empty( $key_1_value ) ) {
          echo $key_1_value;
          }
          else {
          echo ‘Key value not stored’;
          }
          Don’t forget to replace value ‘key_1’ by your meta field key name.
          If the value is not getting saved, check if, ‘ $unit_tag ‘ is empty.

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »