Mostrar todos los campos en el mensaje de confirmación

¿Le gustaría mostrar todos los campos completados de su formulario dentro de su mensaje de confirmación? WPForms incluye un campo de Vista Previa que permite a los usuarios ver su entrada antes de ser enviada. Sin embargo, la vista previa de entrada no muestra actualmente las imágenes cargadas en el envío.

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

Creación del formulario

Primero, crea un nuevo formulario 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.

Cómo añadir el código PHP a su sitio web

Ahora es el momento de añadir nuestro fragmento de código. Para obtener ayuda sobre cómo y dónde agregar los fragmentos de código a su sitio, por favor revise 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, nos dirigimos al ID del formulario 1107, y luego vamos a asignar cada número de ID de campo a una variable que creamos. Por ejemplo, el campo Nombre de nuestro formulario es el campo ID 1. Así que creamos una variable llamada $name y utilizó el signo igual (=) para asignar ese valor a esa variable en particular.

Sólo tienes que asegurarte de que has creado nombres de variables que tengan sentido para ti y asignarlos a tus ID de campo.

Si necesita ayuda para encontrar el ID de su formulario o campo, consulte este tutorial.

Otro ejemplo es que estamos utilizando el campo Modern File Upload. Como sabemos que los usuarios pueden subir más de una imagen dependiendo de nuestra configuración, queremos asegurarnos de que hacemos un bucle con todas las imágenes subidas para mostrarlas en el mensaje de confirmación.

Así que creamos un PHP if para recorrer cada una de las imágenes subidas y mostrarlas en el mensaje de confirmación.

Estilizar la vista previa de la 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. Vamos a añadir un poco de estilo para asegurarse de que las imágenes no se ven demasiado grande en nuestro mensaje de confirmación, pero todavía muestran ordenadamente.

Para añadir CSS personalizado a su sitio, por favor revise 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 del mensaje de confirmación

Ahora es el momento de ponerlo todo junto. Después de crear su formulario y añadir su fragmento de código personalizado, es hora de ver lo que su fragmento de código ha añadido para usted. Pruebe su formulario enviando algunas entradas para ver cómo se muestran todos los campos en su confirmación.

Ya está. Ha 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, por ejemplo, el color de fondo? Eche un vistazo a nuestro artículo sobre la personalización del estilo del cuadro de mensaje de confirmación.

Relacionado

Filter Reference: wpforms_frontend_confirmation_message