Visualizzazione di tutti i campi nel messaggio di conferma

Desideri mostrare tutti i campi del modulo completati nel tuo messaggio di conferma? WPForms include un campo Anteprima della compilazione che consente agli utenti di visualizzare la propria compilazione prima che venga inviata. Tuttavia, l'Anteprima della compilazione non visualizza attualmente alcuna immagine caricata nella sottomissione.

In questo tutorial, ti mostreremo come visualizzare tutti i campi nel tuo messaggio di conferma utilizzando uno snippet PHP personalizzato.

Creazione del tuo modulo

Innanzitutto, crea un nuovo modulo o modifica uno esistente per accedere al generatore di moduli. Nel nostro modulo, abbiamo aggiunto il campo Caricamento file, che può accettare fino a tre immagini.

Aggiungere il codice PHP al tuo sito

Ora è il momento di aggiungere il nostro snippet di codice. Per assistenza su come e dove aggiungere i tuoi snippet di codice al tuo sito, ti preghiamo di consultare 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 sopra, stiamo prendendo di mira l'ID del modulo 1107, e poi mapperemo ogni numero ID del campo a una variabile che creiamo. Ad esempio, il campo Nome sul nostro modulo è l'ID campo 1. Quindi, abbiamo creato una variabile chiamata $name e utilizzato il segno di uguale (=) per impostare quel valore a quella particolare variabile.

Devi solo assicurarti di aver creato nomi di variabili che abbiano senso per te e di averli mappati ai tuoi ID campo.

Se hai bisogno di aiuto per trovare l'ID del tuo modulo o campo, ti preghiamo di consultare questo tutorial.

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

Quindi abbiamo creato un'istruzione if PHP per scorrere ogni immagine che è stata caricata per visualizzare ogni immagine all'interno del messaggio di conferma.

Styling dell'Anteprima della compilazione con CSS personalizzato (facoltativo)

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

Per aggiungere CSS personalizzato al tuo sito, ti preghiamo di consultare 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;
}

Mostrare tutti i campi nel messaggio di conferma

È ora di mettere tutto insieme. Dopo aver creato il tuo modulo e aggiunto il tuo snippet personalizzato, è ora di vedere cosa ha aggiunto per te il tuo snippet di codice. Testa il tuo modulo inviando alcune compilazioni per vedere come tutti i campi vengono visualizzati nella tua conferma.

Fatto! Hai creato con successo un modo per mostrare tutti i campi nel messaggio di conferma!

Successivamente, desideri rimuovere lo stile del messaggio di conferma, come la rimozione del colore di sfondo? Dai un'occhiata al nostro articolo su come personalizzare lo stile della finestra del messaggio di conferma.

Correlati

Riferimento filtro: wpforms_frontend_confirmation_message