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.

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.

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.

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

Test Out the Demo

Example Quiz

Your Name (required)

Your Email (required)

Did you previously use the old 'on_sent_ok' method?
YesNoMaybe

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!

Comments

  1. Thx Vincent! I’m looking for a way to track in google analytics my forms (I’ve several of them). Do you know if there is a “contactFormName” or something like that?

    • Hey Daniel,
      Yes, there is a way! By default Contact Form 7 forms do not have any identifying id or class on the <form> element, but you can use the html_id=”” variable within the CF7 shortcode to add your own custom ID to use as an identifier. You can also add custom classes through the shortcode with the similar html_class=”” variable.
      Example shortcode: [contact-form-7 id="1" title="Contact Form ID Demo" html_id="demoForm1" html_class="id_demo-form"]

      I hope that answers your question!

  2. Hi,
    I can’t seem to call [yourname] on the Thank You page,

    This is the hook that I embedded:

    add_action( ‘genesis_before_post_content’, ‘vc_genesis_custom_thankyou’ );
    function vc_genesis_custom_thankyou()
    {
    $yourname = htmlspecialchars($_GET[“yourname”]);
    $youremail = htmlspecialchars($_GET[“youremail”]);
    }

    yet it still doesn’t work, even though the URL is showing the name and email, as instructed.
    Any thoughts?
    http://www.bookgobbler.com/for-readers/
    Thanks!

    • Hey Jonathan,

      That example hook I used for the Thank You page will only work with a Genesis based theme from StudioPress. Genesis is a specific theme framework. If your theme isn’t a Genesis theme or child theme, then you can’t use the same ‘genesis_before_post_content’ hook. You could use a different core wordpress hook or use a custom page template for the Thank You page and stick those $_GET statements directly in the page template to grab the url variables that got sent over. In this case these two lines could be put directly in a page template to grab the values assuming they are properly wrapped in php tags:
      $yourname = htmlspecialchars($_GET[“yourname”]);
      $youremail = htmlspecialchars($_GET[“youremail”]);

  3. Great Article,

    I was writing something similar on my blog, but learned some new things from yours 🙂

Speak Your Mind

*