So zeigen Sie die Bestätigung und das Formular nach der Übermittlung erneut an

Möchten Sie nach der Übermittlung die Formularbestätigungsnachricht zusammen mit dem Formular selbst anzeigen? Normalerweise haben Sie nach der Übermittlung eines Formulars die Wahl, entweder eine Bestätigungsnachricht anzuzeigen oder zu einer anderen Webseite weiterzuleiten. In diesem Tutorial führen wir Sie jedoch durch den Prozess, beides mit einem einfachen Code-Snippet zu erreichen.

Erstellung des Formulars

Zuerst müssen Sie ein neues Formular erstellen. Zu diesem Zweck haben wir diesen Schritt bereits abgeschlossen. Wenn Sie jedoch Hilfe beim Erstellen eines Formulars mit WPForms benötigen, lesen Sie bitte diese Dokumentation.

Für unser Formular haben wir nur die Formularfelder Name, E-Mail und Absatztext hinzugefügt.

AJAX im Formular deaktivieren

Als Nächstes müssen Sie sicherstellen, dass AJAX-Formularübermittlung aktivieren im Formular deaktiviert ist. Um diese Einstellung zu überprüfen, klicken Sie im Formular-Builder auf die Registerkarte Einstellungen und dann auf Allgemein.

Bestätigung und Formular anzeigen

Als Nächstes müssen Sie einen kleinen Code-Snippet zu Ihrer Website hinzufügen, der es ermöglicht, das Formular vor der Bestätigungsnachricht erneut anzuzeigen.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
  
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
       
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }

    // Reset the fields to blank
	unset(
		$_GET[ 'wpforms_return' ],
		$_POST[ 'wpforms' ][ 'id' ]
	);
 
	// Comment this line out if you want to clear the form field values after submission
	unset( $_POST[ 'wpforms' ][ 'fields' ] );

	// Actually render the form.
	wpforms()->frontend->output( $form_data[ 'id' ] );
  
}
 
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

Da wir möchten, dass dieses Snippet nur für ein bestimmtes Formular ausgeführt wird, verwenden wir if ( absint( $form_data[ 'id' ] ) !== 235 ). Das bedeutet, dass dieses Snippet nur ausgeführt wird, wenn die Formular-ID mit 235 übereinstimmt.

Wenn Sie die Werte in den Formularfeldern nach der Formularübermittlung beibehalten möchten, kommentieren Sie einfach unset( $_POST[ 'wpforms' ][ 'fields' ] ); aus. Sie können dies tun, indem Sie zwei Schrägstriche (//) vor den unset-Felder-Code setzen.

Beispiel:

// unset( $_POST[ 'wpforms' ][ 'fields' ] );

Jetzt sehen Sie, wenn das Formular übermittelt wird, dass Ihre Besucher die Bestätigung und das Formular auf derselben Seite sehen, nachdem das Formular übermittelt wurde!

Und das ist alles! Möchten Sie ein Standarddatum für Ihren Datums-Picker festlegen? Schauen Sie sich unser Tutorial an So legen Sie ein Standarddatum für Ihr Datums-Picker-Formularfeld fest.

Referenzaktion

wpforms_frontend_output_success

FAQ

F: Warum erscheint meine Bestätigungsnachricht unter dem Formular?

A: Wenn Ihre Bestätigungsnachricht über Ihrem Formular erscheint und Sie möchten, dass sie darunter erscheint, ändern Sie bitte die Priorität dieser Funktion.

Um zu erklären, was die Priorität einer Funktion ist, schauen wir uns das obige Snippet an, insbesondere die letzte Zeile.

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

In diesem Fall ist der Name des Action Hooks (wie von WPForms definiert) wpforms_frontend_output_success, der Name unserer Funktion ist wpf_dev_frontend_output_success. Innerhalb dieser Funktion übergeben wir 3 Argumente ($form_data, $fields, $entry_id) und haben die Standardpriorität auf 10 gesetzt.

Da wir möchten, dass die Standardfunktionalität des Formulars zuerst angezeigt wird, in diesem Fall die Bestätigungsnachricht, müssen wir die Priorität ändern, damit die Nachricht zuerst erscheint und die Funktion danach ausgeführt wird. Dazu erhöhen wir die Priorität auf 1000.

Die meisten Funktionen verwenden 10 als Standardprioritätszahl. Wenn Sie also möchten, dass etwas zuerst ausgeführt wird, würden Sie eine Priorität unter 10 wählen. Wenn Sie möchten, dass die Funktion danach ausgeführt wird, erhöhen Sie die Priorität auf etwas über 10.

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
 
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
      
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }
                // Reset the fields to blank
		unset(
			$_GET[ 'wpforms_return' ],
			$_POST[ 'wpforms' ][ 'id' ]
		);

		// Comment this line out if you want to clear the form field values after submission
		unset( $_POST[ 'wpforms' ][ 'fields' ] );

		// Actually render the form.
		wpforms()->frontend->output( $form_data[ 'id' ] );
 
}

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 );

F: Warum funktioniert der Codeausschnitt bei mir nicht?

A: Wenn der Snippet nicht funktioniert, stellen Sie bitte sicher, dass Sie die 235 geändert haben, um Ihre eigene Formular-ID auf Ihrer Website anzupassen. Bitte sehen Sie sich dieses Tutorial an, um Ihre Formular-ID zu finden.

F: Warum sehe ich nach der zweiten Übermittlung eine leere Seite?

A: Wenn Sie eine leere Seite oder einen AJAX-Fehler im Konsolenprotokoll sehen, stellen Sie bitte sicher, dass Sie AJAX wie oben beschrieben deaktiviert haben. Dieser Snippet funktioniert nur, wenn AJAX im Formular deaktiviert ist.