Afficher tous les champs dans votre message de confirmation

Souhaitez-vous afficher tous les champs de votre formulaire dans votre message de confirmation ? WPForms inclut un champ de prévisualisation qui permet aux utilisateurs de voir leur entrée avant qu'elle ne soit soumise. Cependant, l'aperçu de l'entrée n'affiche pas actuellement les images téléchargées dans la soumission.

Dans ce tutoriel, nous allons vous montrer comment afficher tous les champs dans votre message de confirmation à l'aide d'un extrait PHP personnalisé.

Création du formulaire

Tout d'abord, créez un nouveau formulaire ou modifiez un formulaire existant pour accéder au générateur de formulaires. Dans notre formulaire, nous avons ajouté le champ File Upload, qui peut accepter jusqu'à trois images.

Ajouter le code PHP à votre site

Il est maintenant temps d'ajouter notre extrait de code. Pour savoir comment et où ajouter vos extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * 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 );

Dans le code ci-dessus, nous ciblons l'ID du formulaire 1107, puis nous allons faire correspondre chaque numéro d'identification de champ à une variable que nous créons. Par exemple, le champ Nom de notre formulaire est le champ ID 1. Nous avons donc créé une variable appelée $name et a utilisé le signe égal (=) pour attribuer cette valeur à cette variable particulière.

Il vous suffit de vous assurer que vous avez créé des noms de variables qui ont un sens pour vous et de les faire correspondre aux identifiants de vos champs.

Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire ou de votre champ, veuillez consulter ce tutoriel.

Un autre exemple est l'utilisation du champ Modern File Upload. Comme nous savons que les utilisateurs peuvent télécharger plus d'une image en fonction de nos paramètres, nous voulons nous assurer que nous passons en revue toutes les images téléchargées pour les afficher dans le message de confirmation.

Nous avons donc créé un fichier PHP if pour parcourir chaque image téléchargée afin de l'afficher dans le message de confirmation.

Styliser l'aperçu de l'entrée avec une feuille de style CSS personnalisée (facultatif)

Cette étape est complètement optionnelle, mais parce que nous avons ajouté du HTML à nos images à l'intérieur de l'instruction if. Nous allons ajouter un peu de style pour nous assurer que les images ne sont pas trop grandes dans notre message de confirmation, mais qu'elles s'affichent toujours correctement.

Pour ajouter des feuilles de style CSS personnalisées à votre site, veuillez consulter ce tutoriel.

.image_container {
    height: 250px;
    max-width: 25%;
    display: inline-block;
}
.image_container img {
    float: left;
    display: inline-block;
}
.small {
	max-width:150px;
	padding: 10px;
}

Affichage de tous les champs dans le message de confirmation

Il est maintenant temps d'assembler le tout. Après avoir créé votre formulaire et ajouté votre extrait de code personnalisé, il est temps de voir ce que votre extrait de code a ajouté pour vous. Testez votre formulaire en soumettant quelques entrées pour voir comment tous les champs s'affichent dans votre confirmation.

Vous avez réussi à créer un moyen d'afficher tous les champs dans le message de confirmation. Vous avez réussi à créer un moyen d'afficher tous les champs dans le message de confirmation !

Ensuite, vous souhaitez supprimer le style du message de confirmation, par exemple en supprimant la couleur d'arrière-plan ? Consultez notre article sur la personnalisation du style de la boîte de message de confirmation.

En rapport

Référence du filtre : wpforms_frontend_confirmation_message