Mostrare tutti i campi nel messaggio di conferma

Volete mostrare tutti i campi del modulo compilati all'interno del messaggio di conferma? WPForms include un campo di anteprima dell'inserimento che consente agli utenti di visualizzare il loro inserimento prima dell'invio. Tuttavia, l'anteprima dell'inserimento non mostra attualmente le immagini caricate durante l'invio.

In questa guida vi mostreremo come visualizzare tutti i campi nel messaggio di conferma, utilizzando uno snippet PHP personalizzato.

Nota: WPForms versione 1.6.9 e successive include il campo Anteprima della voce. Se si desidera utilizzare questo campo al suo posto, si consiglia di consultare il nostro tutorial sull'uso del campo Anteprima della voce per sapere come fare.

Creazione del modulo

Per prima cosa, creare un nuovo modulo o modificarne uno esistente per accedere al costruttore di moduli. Nel nostro modulo, abbiamo aggiunto il campo Caricamento file, che può accettare fino a tre immagini.

Creare il modulo e aggiungere i campi, in modo da poterli mostrare tutti nel messaggio di conferma.

Aggiungere il codice PHP al sito

Ora è il momento di aggiungere il nostro snippet di codice. Per sapere come e dove aggiungere gli snippet di codice al vostro sito, consultate questo 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 );

Nel codice qui sopra, si punta all'ID del modulo 1107, e poi mapperemo ogni numero ID di campo a una variabile che creeremo. Ad esempio, il campo Name del nostro modulo è l'ID del campo 1. Quindi, abbiamo creato una variabile chiamata $name e utilizzare il segno di uguale (=) per impostare quel valore su quella particolare variabile.

È sufficiente assicurarsi di aver creato nomi di variabili che abbiano un senso e di averli mappati con gli ID dei campi.

Se avete bisogno di aiuto per trovare l'ID del vostro modulo o campo, consultate questa guida.

Un altro esempio è che stiamo usando il campo Modern File Upload. Poiché sappiamo che gli utenti possono caricare più di un'immagine, a seconda delle impostazioni, vogliamo assicurarci di scorrere tutte le immagini caricate per visualizzarle nel messaggio di conferma.

Abbiamo quindi creato un file PHP if per scorrere ogni immagine caricata e visualizzarla nel messaggio di conferma.

Nota: per saperne di più sulle istruzioni if di PHP, consultare il manuale ufficiale di PHP.net sulla strutturazione delle istruzioni if.

Stilizzazione dell'anteprima della voce con CSS personalizzati (opzionale)

Questo passaggio è del tutto facoltativo, ma poiché abbiamo aggiunto dell'HTML alle nostre immagini all'interno dell'istruzione if. Aggiungeremo un po' di stile per assicurarci che le immagini non appaiano troppo grandi nel nostro messaggio di conferma, ma vengano comunque visualizzate in modo ordinato.

Per aggiungere CSS personalizzati al vostro sito, consultate questo 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;
}