UPDATE (12/31/17): Contact Form 7 has deprecated the use of ‘on_sent_ok’ as of the end of 2017. Please see my new guide on the DOM Events Method of Passing Contact Form 7 Data that will cover this exact same topic using the new preferred method.
I recently had to use Contact Form 7 for a long questionnaire that would either qualify or disqualify the person filling it out depending on their answers. So after the form was submitted I needed to run their answers through an equation and then display varying content depending on if they qualified or not. In order to get the form data into php where I could run it through an equation I had to first send the answer data and you can do this using the “Additional Settings” tab within your form. Within this tab we will setup the form to redirect to a custom page after submission and we will send along the data in the form of query strings. Let’s run through an example of how to set this up.
Contact Form 7 ‘Form’ Tab
We start by creating a general form within Contact Form 7. For this example, I’ll just add a couple text fields, a question with radio button options, and a submit button. You should fill out the “Mail” tab as you normally would too in order to format the email you would receive, but I don’t need to go into that for this example.
<p>Your Name (required)
[text* your-name]</p><p>Your Email (required)
[email* your-email]</p>
<p>Question: Is Contact Form 7 your favorite form plugin for WordPress?
[radio cf7-favorite "Yes" "No" "Maybe"]</p>
<p>[submit "Send"]</p>
Contact Form 7 ‘Additional Settings’ Tab
Here we first use the built in CF7 function on_sent_ok or on_submit. These achieve the same purpose, but on_sent_ok sends after the email is sent and on_submit sends right after the form is submitted. Within that function we can first assign variables with the values that the user filled in: var yourname = $(‘.wpcf7 input[name=your-name]’).val(); Note that with the radio button field you add :checked after the field to select the value from the radio button that was checked. After all variables are set, you use location to set the page where we will direct the user after the form is submitted. Along with the destination url, we just add the newly created variables to the url in standard query string format.
on_sent_ok: "var yourname = $('.wpcf7 input[name=your-name]').val();var youremail = $('.wpcf7 input[name=your-email]').val();var cf7favorite = $('.wpcf7 input[name=cf7-favorite]:checked').val();location = '/thank-you/?yourname='+yourname+'&youremail='+youremail+'&cf7favorite='+cf7favorite;"
Standard PHP to Grab the Query Strings
On the page where we have redirected the user to after submitting the form, we can now just use the php $_GET command to grab all of the query strings that we passed through. Once we have those we can use them however we want to decide what to display.
$yourname = htmlspecialchars($_GET["yourname"]);
$youremail = htmlspecialchars($_GET["youremail"]);
$cf7favorite = htmlspecialchars($_GET["cf7favorite"]);
This code could be used either in a page template made specifically for the post-form submission page or it could be used in a hook.
Genesis Theme Functions.php File
This is an example of how you might use a hook in the functions.php file for a genesis based theme.
//* 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('thank-you')){
$yourname = htmlspecialchars($_GET["yourname"]);
$youremail = htmlspecialchars($_GET["youremail"]);
$cf7favorite = htmlspecialchars($_GET["cf7favorite"]);
//echo your custom output using the query vars here
}
}
Hi it works if I copy and paste but when I change it to be my fields it won’t work. Can you please tell me the last bit what it does if I need to add the hyphen or not for the names?
In my example above, just copying and pasting won’t output anything because I left that open for the user to decide what to do with the data by writing a comment line “//echo your custom output using the query vars here”
If you want to see the data on your page you could just echo it out with something like this in place of the comment line:
echo $yourname . ‘ ‘ . $youremail . ‘ ‘ . $cf7favorite;
Another thing to consider is that the action hook I am using is for Genesis themes only. If you are not using a genesis theme, then you may need to use a different action hook in your functions.php file. Also I am looking for a page with the slug of ‘thank-you’ in my example, so your page slug would need to match or you could change the code to match the slug of your desired page.
If these are not the issue, then continue below…
In my example above, the names with the hyphen like ‘your-name’ all relate to the name of the form field. The names without the hyphen like ‘yourname’ are variables that are storing the entered content. I just kept the names similar to help myself keep track, but there variables could be named anything and don’t exactly need to match.
So we’ll walk through it with just the name field:
My form (with hyphen on the form field):
Your Name (required)
[text* your-name]
Additional settings tab (make a variable without the hyphen, assigning it the value from the form field that had the hyphen. Then send the variable without the hyphen through the query variable without the hyphen to the destination url, which is a thank you page here):
on_sent_ok: “var yourname = $(‘.wpcf7 input[name=your-name]’).val();location = ‘/thank-you/?yourname=’+yourname;”
On your landing page that the form goes to (EX: http://test.com/thank-you/?yourname=Theresa) Here you are grabbing the url variable without the hyphen and just saving it to a new php variable: $yourname
In my example I don’t have any code to output it, but you can do whatever you want with that variable now. :
$yourname = htmlspecialchars($_GET[“yourname”]);
I hope that clears it up for you!
Hi, the first parts isn’t working at all for me when submitting to a third party site. The form submits in the background and the email gets sent, but the pages never goes to the third party site – the wheel below the submit button just keeps spinning forever
on_sent_ok: “var myFname = $(‘.wpcf7 input[name=first-name]’).val();location = ‘https://THIRDPARTYSITE.com/pre-registration/signup-redirect.html?type=personal&first_name=’+myFname;”
Where THIRDPARTYSITE is the site I am submitting to and first_name is one of the fields the site is expecting
Any help greatly appreciated
Looking at your code, it appears to be correct assuming that the input[name=first-name] matches your created field. I would first do a test to see if it will submit to the current site because I wouldn’t think it is an issue relating to it being a third party site. If it is still broken when redirecting to a page to the same domain, we can tell that it’s not an issue with that 3rd party link specifically.
Since this works off of javascript, I would think that there might be a javascript error elsewhere on the page that is breaking it before it can run in the CF7 code. Check the error console to see if there are any js errors as they might be the cause.
Thanks so much! The best answer so far in terms of integrating js and php.
Thanks for the feedback! I’m glad it was helpful for you.
Hello Vincent,
I spent hours googling to find a good explanation, This is by far the best explanation I found to send form-field-values from contact form 7 to a redirected page.
I use it in combination with the plugin “Contact Form 7 – Dynamic Text Extension”. Made a dynamic hidden field and filled the field using a shortcode that produced the unique identifier. So glad it works!!
Thanks a lot for sharing!!
Dick.
I’m happy that my guide was able to end your hours of googling! Thanks for letting me know. 🙂
Hello vincoding, Thank you very mucho for the post.
But I have a problem in the thank you page in the top page I get;
$yourname = htmlspecialchars($_GET[“yourname”]); $youremail = htmlspecialchars($_GET[“youremail”]); $cf7favorite = htmlspecialchars($_GET[“cf7favorite”]);
I’m seeing the output of variables. can i hide this?
You’re welcome!
If you are seeing the code output like that you are probably not wrapping it in php tags.
You would need to put after those lines.
Also just make sure your thank you page is a .php page.
How do you pass parameters when the field is a text area? I’m getting an undefined value in my query string.
Like for text area with name as your-message?
var yourmessage = $(‘.wpcf7 input[name=your-message ]’).val()
Doesn’t work when I pass the values.
We are using “input” as part of our selector. A text area is not an input so the selector will need to be changed. Take a look at some example html for each type below.
versus
So all you need to do is change your code the look for a textarea[] instead of an input[] like this:
var yourmessage = $(‘.wpcf7 textarea[name=your-message]’).val();
Thanks Vincent! It worked like a charm. Did not pay attention to the selector.
I can’t thank you enough as I’ve been trying to achieve this myself with only limited js and PHP skills…
One thing – I noticed CF7 is dropping the on sent ok function shortly – what would a workaround be? They have a new code snippet to use on their website but trying to integrate your code into it is one step too far for me.
Help me obe-wan, you’re my only hope.
Thanks for the notice on the change! I’ve checked out the Contact Form 7 documentation and wrote an updated guide here: DOM Events Method of Passing Contact Form 7 Data
Let me know if you have any questions on it. 🙂
It’s deprecated in the latest version. How can we do this with dom event now?
That’s mentioned in bold at the top of the article. The updated method is here: https://vincoding.com/dom-events-method-passing-cf7-data/