How to Show All Fields in Your Confirmation Message

Introduction

Would you like to show all of your completed form fields inside your confirmation message?

Since the release of WPForms 1.6.9 there is a new field called Entry Preview. You can easily enable this to display the completed form fields before the form is submitted, but you can also display these completed fields inside the Confirmation Message. If you’d like to learn more about the Entry Preview field, please check out this documentation.

However, the Entry Preview does not currently display any images uploaded in the submission. In this tutorial, we’re not going to use the Entry Preview field, we’re going to use PHP so that we can display all the completed form fields and display thumbnail images of any image uploaded to the form.

With a little bit of setup and some PHP code snippets, you can easily achieve this. Inside this tutorial, we’re going to set up our form and then add some PHP code snippets so that in our confirmation message we’ll show all of the completed fields when the form is submitted.

Creating your form

First, we’ll create our form. For the purpose of this documentation, we’re going to create a form with the Name, Address, Phone, a URL, Email, a Checkbox with the ability to accept multiple selections, a Dropdown, a Paragraph Text for comments, and a Modern File Upload that will accept up to three images.

Create the form and add the fields so that we can show all fields in the confirmation message.

Adding the PHP code to your site

Now it’s time to add our code snippet. For help with how and where to add your code snippets to your site, please review this tutorial.

/**
 * Show all fields in the confirmation message
 *
 * @link https://wpforms.com/developers/how-to-show-all-fields-in-your-confirmation-message/
 */

function wpf_dev_frontend_confirmation_message( $message, $form_data, $fields, $entry_id ) {
    
    // Only run on my form with ID = 1107
    if ( absint( $form_data[ 'id' ] ) !== 1107 ) {
        return $message;
    }

    // Name form field - ID #1
    $name = $fields[ '1' ][ 'value' ];

    // Address form field - ID #2
    $address = $fields[ '2' ][ 'value' ];

    // Phone form field - ID #3
    $phone = $fields[ '3' ][ 'value' ];

    // Email form field - ID #4
    $email = $fields[ '4' ][ 'value' ];

    // Website URL form field - ID #5
    $website = $fields[ '5' ][ 'value' ];

    // Color Options form field - ID #6
    $color_options = $fields[ '6' ][ 'value' ];

    // Delivery Method form field - ID #7
    $delivery_method = $fields[ '7' ][ 'value' ];

    // Special Instructions form field - ID #9
    $special_instructions = $fields[ '9' ][ 'value' ];

    // Modern Upload form field - ID #8
    $field_id = 8;
          $images = '';
          if ( is_array( $fields[ $field_id ][ 'value_raw' ] ) ) {
             foreach ( $fields[ $field_id ][ 'value_raw' ] as $value_raw ) {
                $images .= '<div class="image_container"><img src="' . $value_raw[ 'value' ] . '" class="small"></div>';
             }
          }


    $message = "<p>This is the information we've captured from your submission <a href=\"http://google.com\" target=\"_blank\">Please visit this page for account information</a></p>.
    <ul>
    <li><strong>Name</strong>: $name </li>
    <li><strong>Address</strong>: $address </li>
    <li><strong>Phone Number</strong>: $phone </li>
    <li><strong>Email Address</strong>: $email </li>
    <li><strong>Website</strong>: $website </li>
    <li><strong>Color Options</strong>: $color_options </li>
    <li><strong>Delivery Method</strong>: $delivery_method </li>
    <li><strong>Any Special Instructions</strong>: $special_instructions </li>
    </ul>
    <p>The images you have uploaded are:";

    return $message . '<br>' . $images . '</p>';
    
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_frontend_confirmation_message', 10, 4 );

In the code above, we’re targetting the form ID 1107 and then we’re going to map every field ID number to a variable that we create. For example, the Name field on our form is field ID 1. So we created a variable called $name and used the equals (=) sign to set that value to that particular variable.

You just need to make sure that you’ve created variable names that make sense to you and map them to your field IDs.

If you need help finding your form or field ID, please review this tutorial.

Another example is that we’re using the Modern File Upload field. Since we know that users can upload more than one image depending on our settings, we want to make sure we loop through all the images uploaded to display them in the confirmation message.

So we created a PHP if statement to run through each image that was uploaded in order to display each image inside the confirmation message.

To learn more about PHP if statements, you can learn more about that from the PHP.net manual.

Adding the CSS (optional)

This step is completely optional, but because we’ve added some HTML to our images inside the if statement, we’re going to add some styling as well to make sure the images don’t look too large in our confirmation message but still display neatly.

To add custom CSS to your site, please review this tutorial.

.image_container {
    height: 250px;
    max-width: 25%;
    display: inline-block;
}
.image_container img {
    float: left;
    display: inline-block;
}
.small {
	max-width:150px;
	padding: 10px;
}

Showing all the fields in the confirmation message

It’s now time to pull everything together. Once you’ve created your form, added your PHP code snippet, and added any CSS to style these fields, it’s time to see what your code snippet has added for you. Test your form by completing it so that you can see how all the fields display in your confirmation.

Now you can show all fields in the confirmation message.

And that’s it, you’ve successfully created a way to show all fields in the confirmation message! Would you like to remove the styling of the confirmation message as well, such as removing the background color? Take a look at our article on How to Remove Confirmation Message Box Styling.

Filter Reference: wpforms_frontend_confirmation_message