DOM Events Method of Passing Contact Form 7 Data

I had previously written a post on Passing Contact Form 7 Data to the Thank You Page, but this method of passing the form data with “on_sent_ok” in the additional settings tab is being deprecated and will be abolished at the end of 2017. The reason that Contact Form 7 is making this change is because they said that there is increased risk in the event that their plugin or the site it is being used on in general has any vulnerabilities. So whether you got here from my previous post, are just trying to implement on_sent_ok for the first time, or are just having issues with Contact Form 7 on_sent_ok not working, you should know that this is being deprecated anyway so you can stop trying to work with that method now and just focus on the DOM Events methods. So for these reasons I am now revisiting this topic and we are going to tackle the same issue of passing data to the thank you page, but we are now going to use a DOM events method to trigger it. So let’s get to it!

CF7 ‘Form’ Tab Content

This is just where we make a the usual Contact Form 7 form. In this demo we will use fields for a name, an email address, and a question with radio button answer options.

<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Did you previously use the old 'on_sent_ok' method?<br />
[radio cf7-oldmethod "Yes" "No" "Maybe"]</p>

<p>[submit "Send"]</p>

DOM Events Method Javascript Code

This is the main part that is changing from the old on_ok_sent method. Instead of adding anything into the ‘Additional Settings’ tab in Contact Form 7, we are instead going to add a hook into the functions.php file that will insert the needed javascript code at the bottom of the page. As you can see in the below code, we will use a wordpress hook for the footer. Within that hook we are adding an event listener for wpcf7mailsent. That event listener checks for the form ID we are working with so that this only executes for the specific form that we want it to work with. In the demo my form has an ID of 944 and you should replace that number with the ID of your form.

Once the code determines that it is a submission from the correct form, it loops through the inputs and assigns the input values based on the names we gave the form fields when setting up the form. We save those values to some new variables that we also create in the loop. Once we have all the values saved to variables, we use a javascript redirect to send the user to our ‘thank you’ page with the variable values appended onto the url string.

/* DOM event method for passing demo CF7 data */
function vc_dom_event_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '944' == event.detail.contactFormId ) {
        var inputs = event.detail.inputs;
		for ( var i = 0; i < inputs.length; i++ ) {
			if ( 'your-name' == inputs[i].name ) {
				var yourname = inputs[i].value;
			}
			if ( 'your-email' == inputs[i].name ) {
				var youremail = inputs[i].value;
			}
			if ( 'cf7-oldmethod' == inputs[i].name ) {
				var cf7oldmethod = inputs[i].value;
			}
		}
		window.location.href = '/cf7-thank-you/?yourname='+yourname+'&amp;youremail='+youremail+'&amp;cf7oldmethod='+cf7oldmethod;
    }
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'vc_dom_event_footer' );

Get the URL Variable Content Sent by the DOM Events Method

Now that the user has been redirected to a thank you page with the url variables in tow, we just need to set up the thank you page to grab the url variables and do something with them. We do this by using the php $_GET method.

$yourname = htmlspecialchars($_GET["yourname"]);
$youremail = htmlspecialchars($_GET["youremail"]);
$cf7oldmethod = htmlspecialchars($_GET["cf7oldmethod"]);

In a genesis based WordPress theme, for example, we would do this by adding another hook like I do with the following code snippet:

/* custom output based on the form data
add_action( 'genesis_before_post_content', 'vc_genesis_custom_thankyou' );
function vc_genesis_custom_thankyou()
{
    if(is_page('cf7-thank-you')){
        $yourname = htmlspecialchars($_GET["yourname"]);
        $youremail = htmlspecialchars($_GET["youremail"]);
        $cf7oldmethod = htmlspecialchars($_GET["cf7oldmethod"]);
        //echo your ouput as desired here using the url variables that were passed through
    }
}

Test Out the Demo

Conclusion

The new DOM Events Method of passing Contact Form 7 data to a Thank You page isn’t any harder than the previous way that used the ‘Additional Settings’ tab. I venture to say that once you know how it works, it may actually be easier! We already know that it is a more secure way of passing data and it’s not any more difficult to implement, so there’s no reason to hang onto the old on_ok_sent method anymore. Try it out and start using it now!