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?

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.

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.

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.

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.

Related

Filter Reference: wpforms_frontend_confirmation_message