Mostrar todos los campos en tu mensaje de confirmación

¿Te gustaría mostrar todos los campos completados de tu formulario en el mensaje de confirmación? WPForms incluye un campo de Vista previa de entrada que permite a los usuarios ver su entrada antes de enviarla. Sin embargo, la Vista previa de entrada no muestra actualmente ninguna imagen subida en el envío.

En este tutorial, te mostraremos cómo mostrar todos los campos en tu mensaje de confirmación utilizando un fragmento de código PHP personalizado.

Creación de su formulario

Primero, crea un formulario nuevo o edita uno existente para acceder al constructor de formularios. En nuestro formulario, hemos añadido el campo Carga de archivos, que puede aceptar hasta tres imágenes.

Añadir el código PHP a tu sitio

Ahora, es el momento de añadir nuestro fragmento de código. Para obtener ayuda sobre cómo y dónde añadir tus fragmentos de código a tu sitio, por favor revisa este 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 );

En el código anterior, estamos apuntando al ID del formulario 1107, y luego vamos a mapear cada ID de campo a una variable que creamos. Por ejemplo, el campo Nombre en nuestro formulario es el ID de campo 1. Así que creamos una variable llamada $name y usamos el signo igual (=) para asignar ese valor a esa variable en particular.

Solo necesitas asegurarte de haber creado nombres de variables que tengan sentido para ti y mapearlos a tus IDs de campo.

Si necesitas ayuda para encontrar el ID de tu formulario o campo, por favor revisa este tutorial.

Otro ejemplo es que estamos usando el campo Carga de archivos moderna. Como sabemos que los usuarios pueden subir más de una imagen dependiendo de nuestra configuración, queremos asegurarnos de recorrer todas las imágenes subidas para mostrarlas en el mensaje de confirmación.

Así que creamos una sentencia if de PHP para recorrer cada imagen que se subió para mostrar cada imagen dentro del mensaje de confirmación.

Estilizar la Vista previa de entrada con CSS personalizado (opcional)

Este paso es completamente opcional, pero como hemos añadido algo de HTML a nuestras imágenes dentro de la sentencia if. Añadiremos algo de estilo para asegurarnos de que las imágenes no se vean demasiado grandes en nuestro mensaje de confirmación, pero que sigan mostrándose ordenadamente.

Para añadir CSS personalizado a tu sitio, por favor revisa este 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;
}

Mostrar todos los campos en el mensaje de confirmación

Es hora de juntar todo. Después de crear tu formulario y añadir tu fragmento de código personalizado, es hora de ver lo que tu fragmento de código ha añadido para ti. Prueba tu formulario enviando algunas entradas para ver cómo se muestran todos los campos en tu confirmación.

¡Eso es todo! ¡Has creado con éxito una forma de mostrar todos los campos en el mensaje de confirmación!

A continuación, ¿desea eliminar el estilo del mensaje de confirmación, como eliminar el color de fondo? Consulte nuestro artículo sobre personalización del estilo del cuadro de mensaje de confirmación.

Relacionado

Referencia del filtro: wpforms_frontend_confirmation_message