Alle Felder in Ihrer Bestätigungsnachricht anzeigen

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

In diesem Tutorial zeigen wir Ihnen, wie Sie alle Felder in Ihrer Bestätigungsnachricht mithilfe eines benutzerdefinierten PHP-Snippets anzeigen können.

Ihr Formular erstellen

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

Hinzufügen des PHP-Codes zu Ihrer Website

Jetzt ist es an der Zeit, unser Code-Snippet hinzuzufügen. Wie und wo Sie Ihre Code-Snippets in Ihre Website einfügen können, erfahren 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, und dann werden wir jede Feld-ID-Nummer einer Variablen zuordnen, die wir erstellen. Das Feld "Name" in unserem Formular hat zum Beispiel die Feld-ID 1. Wir erstellen also eine Variable namens $name und das Gleichheitszeichen (=) verwendet, um diesen Wert auf diese bestimmte Variable zu setzen.

Sie müssen nur sicherstellen, dass Sie sinnvolle Variablennamen erstellt haben und diese Ihren Feld-IDs zuordnen.

Wenn Sie Hilfe bei der Suche nach Ihrer Formular- oder Feld-ID benötigen, lesen Sie bitte diese Anleitung.

Ein weiteres Beispiel ist die Verwendung des modernen Datei-Upload-Feldes. Da wir wissen, dass Benutzer je nach unseren Einstellungen mehr als ein Bild hochladen können, möchten wir sicherstellen, dass wir eine Schleife durch alle hochgeladenen Bilder ziehen, um sie in der Bestätigungsmeldung anzuzeigen.

Also haben wir ein PHP if Anweisung jedes hochgeladene Bild durchlaufen, um es in der Bestätigungsnachricht anzuzeigen.

Gestaltung der Eintragsvorschau mit benutzerdefiniertem CSS (optional)

Dieser Schritt ist völlig optional, aber da wir unseren Bildern innerhalb der if-Anweisung etwas HTML hinzugefügt haben. Wir fügen etwas Styling hinzu, um sicherzustellen, dass die Bilder in unserer Bestätigungsmeldung nicht zu groß aussehen, aber trotzdem ordentlich angezeigt werden.

Um Ihrer Website benutzerdefinierte CSS 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

Jetzt ist es an der Zeit, alles zusammenzufassen. Nachdem Sie Ihr Formular erstellt und Ihr benutzerdefiniertes Snippet hinzugefügt haben, ist es nun 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 war's! Sie haben erfolgreich eine Möglichkeit geschaffen, alle Felder in der Bestätigungsnachricht anzuzeigen!

Möchten Sie als Nächstes die Gestaltung der Bestätigungsmeldung aufheben, z. B. die Hintergrundfarbe entfernen? Schauen Sie sich unseren Artikel über die Anpassung der Gestaltung von Bestätigungsfeldern an.

Verwandte Seiten

Filter-Referenz: wpforms_frontend_confirmation_message