How to Show All Fields in Your Confirmation Message

Overview

Would you like to show all of your completed form fields inside your confirmation message? 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.

Setup

We’ll walk through each step and run through the PHP code snippets for each individual form field you want to display in your confirmation message.

1) 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.

2) Adding the PHP code to your site

Now it’s time to add our code snippet. For help with adding any 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$name and using 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.

3) Adding some CSS

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;
}

3) 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 your 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