Retrive wordpress Contact form 7 data instantly after submission

Question

i am using contact form 7 as a form builder. The requirement is when a user submit his form, after clicking the submit button there should open a new window that will display all his data that he has submitted. is there any solution for this?

I want the user submitted data in new tab so that he can veiw his submitted details

Answer 1

You can use Contact Form 7 custom DOM events to get the submitted data and output it on a new window.

Try out this javascript code . Tested and working.

document.addEventListener('wpcf7submit', function (event) {
    var inputs = event.detail.inputs;
    var output_html = '';
    for (var i = 0; i < inputs.length; i++) {
        output_html += inputs[i].name + ' : ' + inputs[i].value + '</br>';
    }
    var newWindow = window.open();
    newWindow.document.write(output_html);

}, false);

Or add this in your theme's function.php

add_action('wp_footer', 'ze_cf7_data_in_new_tab');
function ze_cf7_data_in_new_tab(){
    ?>
        <script>
            document.addEventListener('wpcf7submit', function(event) {
                var inputs = event.detail.inputs;
                var output_html = '';
                for (var i = 0; i < inputs.length; i++) {
                    output_html += inputs[i].name + ' : ' + inputs[i].value + '</br>';
                }
                var newWindow = window.open();
                newWindow.document.write(output_html);

            }, false);
        </script>

    <?php
    }