Afficher tous les champs dans votre message de confirmation

Souhaitez-vous afficher tous les champs de votre formulaire remplis dans votre message de confirmation ? WPForms inclut un champ Aperçu de la saisie qui permet aux utilisateurs de visualiser leur saisie avant qu'elle ne soit soumise. Cependant, l'Aperçu de la saisie n'affiche actuellement aucune image téléchargée lors de la soumission.

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

Création de votre formulaire

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

Ajout du code PHP à votre site

Il est maintenant temps d'ajouter notre extrait de code. Pour obtenir de l'aide sur la façon et l'endroit 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 mapper chaque numéro d'ID de champ à une variable que nous créons. Par exemple, le champ Nom de notre formulaire est l'ID de champ 1. Nous avons donc créé une variable appelée $name et utilisé le signe égal (=) pour définir cette valeur à cette variable particulière.

Vous devez simplement vous assurer que vous avez créé des noms de variables qui ont du sens pour vous et les mapper à vos ID de champ.

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

Un autre exemple est que nous utilisons le champ Téléchargement de fichiers moderne. Sachant que les utilisateurs peuvent télécharger plus d'une image en fonction de nos paramètres, nous voulons nous assurer de parcourir toutes les images téléchargées pour les afficher dans le message de confirmation.

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

Stylisation de l'Aperçu de la saisie avec CSS personnalisé (facultatif)

Cette étape est entièrement facultative, mais comme nous avons ajouté du HTML à nos images dans l'instruction if. Nous allons ajouter un style pour nous assurer que les images ne paraissent pas trop grandes dans notre message de confirmation, tout en s'affichant proprement.

Pour ajouter du CSS personnalisé à 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;
}

Afficher tous les champs dans le message de confirmation

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

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

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

Articles associés

Référence du filtre : wpforms_frontend_confirmation_message