I'm using the Contact Form 7 plugin for the user to generate a pdf based on submitted (by the form) and server provided data.

I'd like to also show a "preview" after submission so I need to pass the custom fields to the client in order to get them in some js file.

This is what I have:

plugin rendering the pdf:


add_action('wpcf7_before_send_mail', 'generate_pdf');
function generate_pdf($wpcf7) {

    $file_uri = 'fpdf/fpdf.php';

    /* PDF file initialization */
    $pdf = new FPDF();
    $today_date = "California, " . date("d  F  Y");
    $pdf->Cell(0, 10, $today_date, 0, 1, 'R');
    $name = $data['your-name'];
    $submission = WPCF7_Submission::get_instance();
    $data = $submission->get_posted_data();

    $pdf->Output(wp_upload_dir()['basedir'] . '/' . $name . '.pdf', 'F');
    $wpcf7['custom_field'] = 'CUSTOM VALUE';
    return $wpcf7;

javascript file called on form submit:

$('.wpcf7-submit').on('click', function (e) {
        var data = $('form').serializeArray();
        var cleaned_data = {};
        for (item in data) {
            var name = data[item]['name'];
            if (name[0] != '_'){
                cleaned_data[name] = data[item]['value']; 
        var testInput = cleaned_data["your-name"];


In this last code I'd like to get the values passed by the php script, but I don't know how to do it.

  • All the data from the contact form is available in PHP via the callback function parameter. – Michael Ecklund Dec 12 '16 at 21:31
  • Which values would you like to access in your JS? You could just grab them from the form with jQuery, but it depends on what you're trying to achieve. – Pim Dec 14 '16 at 5:49
  • I'd like to access the variables that I retrieve from another posts data in the php action. So, according to user inputs I retrieve specific data from the db and pass it to js. – Rod0n Dec 14 '16 at 10:33

I might have a solution for you.

But I have to say I'm not sure I understood what u want.

So, here is what I designed, step by step:

  1. The user will access a page where he needs to insert an e-mail in order to receive a pdf file;
  2. The user clicks on submit and using AJAX we send all data passed by the user to be treated within a php file;
  3. At this point the Contact Form 7 plugin has already sent the message to someone. So, through the admin area u need to choose who will receive the message and what will be messages' content. Maybe you can warn the user that his pdf is coming, it's up to you;
  4. Coming back to the php file where the data is being treated. Here we will do two important things. First, generate the users' pdf. Second, use wp_mail() function so the user can receive the pdf within his inbox;
  5. Last but not least, still within the php file, we send all data to JavaScript file so you can handle that data for u to build your preview.

So, first of all we need the script in JS. You can put the code below within your functions.php:

function my_script() { ?>

    ;(function () {

        $ = jQuery.noConflict();

        var form_data;

        // $(parent).on(event, selector, function)
        $('body').on('submit', 'form.wpcf7-form', function( e ){

            // Keep all data posted through the form. Custom data can be handled later.
            form_data = $(this).serialize();

                method : 'post',
                url : '<?php echo get_stylesheet_directory_uri() . '/custom.php'; ?>', // Put here your own php file path.
                dataType : 'json',
                data : {
                    form_data : form_data,
                success : function( response ) {

                    // Here u can do whatever u want with the response. This is what u asked for in your question.
                    // In your case the response will have data for u to build the preview.
                    // Remove the log below when running in production.
                    console.log( response );

                error: function( xhr, status, error ) {

                    // Use this in case you are having erros and u want to see what's going on in your php file which is being requested by your AJAX.
                    // var err = eval( "(" + xhr.responseText + ")" );
                    // console.log( err.Message );




add_action( 'wp_footer', 'my_script', 100 );

Now we need to handle the php file. See that the code above is calling for a file called custom.php. You can name it whatever u want, just make sure u will use the correct path for it. See below my custom.php:

// We need to include wp-load.php in case we need to use WordPress functions and constants, and we will.
$absolute_path = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once $absolute_path[0] . 'wp-load.php';

// Set response var.
$r = array();

// Optionally u can get rid of some unnecessary part of the serialzed string.
$_POST['form_data'] = preg_replace( "/.+_wpnonce=.+&/U", '', $_POST['form_data'] );

$fields = explode( '&', $_POST['form_data'] );

foreach ( $fields as $field ) {

    $field_pieces = explode( '=', $field );

    // $r['form_data']['your-name'] = 'Your name'.
    $r['data'][$field_pieces[0]] = urldecode( $field_pieces[1] );


// If needed, set all your custom data here.
// You can use this custom data within the pdf and also u can put it in your preview.
$r['data']['custom_field'] = 'CUSTOM VALUE';

// Require PDF library. Pay attention not to get the wrong path, otherwise this file will retrieve an error.
require_once 'fpdf/fpdf.php';

/* Init PDF */
$pdf = new FPDF();
$today_date = "California, " . date("d  F  Y");
$pdf->Cell(0, 10, $today_date, 0, 1, 'R');

// Make sure this path is right.
$pdf->Output(wp_upload_dir()['basedir'] . '/' . $r['data']['your-name'] . '.pdf', 'F');

function send_email() {

    global $r;

    // Here we are sending the pdf to the e-mail which was put by the user.
    $to = $r['data']['your-email'];

    // U can add more headers if u wish. Just google it.
    $headers  = 'From: Rod0n ' . "\r\n";

    $subject = 'Your requested PDF has arrived';

    $msg = 'You can see your pdf attached. Thanks.';

    // Attach the pdf. e.g. array( WP_CONTENT_DIR . '/uploads/' . $r['data']['your-name'] . '.pdf' );
    $attachment = array( 'put here the path for the pdf' );

    wp_mail( $to, $subject, $msg, $headers, $attachment );



// Encode our response in order to retrieve it subsequently.
$r = json_encode( $r );

// Retrieve response var.
echo $r;

Pay attention to both code snippets, especially to the comments and set up your own changes.

Not the answer you're looking for? Browse other questions tagged or ask your own question.