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.
| improve this answer | |

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