Anzeigen aller Felder in Ihrer Bestätigungsnachricht

Möchten Sie alle ausgefüllten Formularfelder in Ihrer Bestätigungsnachricht anzeigen? WPForms enthält ein Feld für die Vorschau von Einträgen, mit dem Benutzer ihre Eingabe vor dem Absenden anzeigen können. Die Vorschau von Einträgen zeigt jedoch derzeit keine Bilder an, die bei der Übermittlung hochgeladen wurden.

In diesem Tutorial zeigen wir Ihnen, wie Sie alle Felder in Ihrer Bestätigungsnachricht mit einem benutzerdefinierten PHP-Snippet anzeigen.

Erstellen Ihres Formulars

Erstellen Sie zunächst ein neues Formular oder bearbeiten Sie ein vorhandenes, um auf den Formular-Generator zuzugreifen. In unserem Formular haben wir das Feld Datei-Upload hinzugefügt, das bis zu drei Bilder akzeptieren kann.

Hinzufügen des PHP-Codes zu Ihrer Website

Nun ist es an der Zeit, unseren Code-Snippet hinzuzufügen. Anleitungen, wie und wo Sie Ihre Code-Snippets zu Ihrer Website hinzufügen, finden Sie in diesem 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 );

Im obigen Code zielen wir auf die Formular-ID 1107 ab und ordnen dann jede Feld-ID-Nummer einer von uns erstellten Variablen zu. Zum Beispiel ist das Namensfeld in unserem Formular Feld-ID 1. Also haben wir eine Variable namens $name erstellt und das Gleichheitszeichen (=) verwendet, um diesen Wert dieser bestimmten Variablen zuzuweisen.

Sie müssen nur sicherstellen, dass Sie aussagekräftige Variablennamen erstellt und diese Ihren Feld-IDs zugeordnet haben.

Wenn Sie Hilfe beim Auffinden Ihrer Formular- oder Feld-ID benötigen, lesen Sie bitte dieses Tutorial.

Ein weiteres Beispiel ist, dass wir das moderne Datei-Upload-Feld verwenden. Da wir wissen, dass Benutzer je nach unseren Einstellungen mehr als ein Bild hochladen können, möchten wir sicherstellen, dass wir alle hochgeladenen Bilder durchlaufen, um sie in der Bestätigungsnachricht anzuzeigen.

Daher haben wir eine PHP-if-Anweisung erstellt, um jedes hochgeladene Bild zu durchlaufen, um jedes Bild in der Bestätigungsnachricht anzuzeigen.

Styling der Vorschau von Einträgen mit benutzerdefiniertem CSS (optional)

Dieser Schritt ist völlig optional, aber da wir der if-Anweisung einige HTML-Elemente zu unseren Bildern hinzugefügt haben. Wir werden einige Stile hinzufügen, um sicherzustellen, dass die Bilder in unserer Bestätigungsnachricht nicht zu groß aussehen, aber trotzdem ordentlich angezeigt werden.

Um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen, lesen Sie bitte dieses 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;
}

Alle Felder in der Bestätigungsnachricht anzeigen

Es ist nun an der Zeit, alles zusammenzuführen. Nachdem Sie Ihr Formular erstellt und Ihren benutzerdefinierten Snippet hinzugefügt haben, ist es an der Zeit zu sehen, was Ihr Code-Snippet für Sie hinzugefügt hat. Testen Sie Ihr Formular, indem Sie einige Einträge übermitteln, um zu sehen, wie alle Felder in Ihrer Bestätigung angezeigt werden.

Das ist alles! Sie haben erfolgreich eine Möglichkeit geschaffen, alle Felder in der Bestätigungsnachricht anzuzeigen!

Möchten Sie als Nächstes die Formatierung der Bestätigungsnachricht entfernen, z. B. die Hintergrundfarbe? Sehen Sie sich unseren Artikel über Anpassen der Formatierung der Bestätigungsnachricht an.

Verwandt

Filterreferenz: wpforms_frontend_confirmation_message