Sending variables from Wordpress Contact Form 7 submission to success page

Question

I am using Contact Form 7 with Wordpress 3.5.

Currently, when a user submits the message, they are redirected to a success page by using the following in the "Additional Settings" field:

on_sent_ok: 'location.replace("http://www.example.org/success-page");'

I want to be able to customise the output of the success-page by using the input from a field, for example:

on_sent_ok: 'location.replace("http://www.example.org/success-page?name=yourname");'

I hoped that by dropping the usual Contact Form 7 shortcodes into the Additional settings, it may have sent the field value with it, but that's not the case.

Can anyone suggest how I can get the field values from contact form 7 into the url, or alternatively send as a $_POST parameter? It may require some javascript to do this, I guess.

Solution 1

This is possible but you need the save the posted data from the contact form to the session and show it there.

Add this to your functions.php

add_action('wpcf7_mail_sent', 'save_cf7_data');


function save_cf7_data($cf) 
{

    if(session_id() == '') {
       session_start();
    }

    $current_submission = WPCF7_Submission::get_instance();

    $_SESSION['cf7_submission'] = $current_submission->get_posted_data();


}

And your success page you just need to print the session var, like:

echo $_SESSION['cf7_submission']['name'];

That's all.

Solution 2

Another option is to use jQuery or Javascript and catch the form on submit. After the form is caught you can serialize the params and pass them to a custom page to catch them and do things with them.

Example for jQuery:

jQuery(document).ready(function($) {
    $('.wpcf7-form').each(function () {
        $(this).on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',    // Can also choose GET instead
                url: 'forms/getParams',
                data: $(this).serialize(),
                dataType: "json",
                success: function (data) {
                    $(this)[0].reset();    // Optional in case you want to clear the form on success
                },
                error: function (data, errorThrown) {
                    console.log(errorThrown);
                }
            });

        });
    });
});

Solution 3

the 'additional settings' code is javascript and thus is running in the context of the browser. this means you can easily access the form data using normal javascript code

e.g. on_sent_ok: 'location.replace("http://www.example.org/success-page?name=" + jQuery("input[name=name]").val());'