### [Erstellen eines Quiz-Formulars](https://wpforms.com/developers/how-to-create-a-quiz-form/)
**Veröffentlicht:** 13. Juni 2023
**Autor:** Umair Majeed
**Auszug:** Diese Anleitung zeigt Ihnen, wie Sie ein Quiz-Formular erstellen und Zahlungsfelder verwenden, um die Gesamtpunktzahl am Ende des Formulars zu berechnen.
**Inhalt:**
Möchten Sie ein Quiz-Formular in WPForms erstellen? WPForms enthält ein Quiz-Addon, das Ihnen alles bietet, was Sie benötigen, um Quiz-Formulare direkt im Formular-Generator zu erstellen.
In dieser Anleitung zeigen wir Ihnen, wie Sie ein Quiz-Formular mit einer Snippet-basierten Einrichtung erstellen, die die Punktzahl eines Benutzers nach der Übermittlung berechnet und anzeigt.
Wir empfehlen die Verwendung des Quiz-Addons für die meisten Websites, aber diese Anleitung enthält auch eine Snippet-basierte Option für alle, die diesen Ansatz bevorzugen.
---
## Empfohlene Methode zum Erstellen von Quiz-Formularen
WPForms enthält ein spezielles **Quiz-Addon**, das die einfachste und vollständigste Methode zum Erstellen von Quiz-Formularen ist.
Das Quiz-Addon enthält integrierte Quiz-Funktionen und bietet die einfachste Möglichkeit, Quiz-Formulare in WPForms zu erstellen und zu verwalten.
Für vollständige Details zur empfohlenen Methode lesen Sie bitte unsere [Dokumentation zum Quiz-Addon](https://wpforms.com/docs/quiz-addon).
Wenn Sie gerade erst anfangen, können Sie auch unsere [Quiz-Formularvorlagen](https://wpforms.com/templates/category/quizzes/) durchsuchen, um schnell ein Quiz zu erstellen und es für Ihre Website anzupassen.
## Erstellen des Quiz-Formulars mit einem Snippet
Wenn Sie dennoch ein Quiz-Formular mit einer benutzerdefinierten Einrichtung erstellen möchten, können Sie die Schritte in dieser Anleitung befolgen und den folgenden Code-Snippet verwenden.
Wir beginnen mit der Erstellung eines neuen Formulars. In unserem Formular fügen wir am Anfang die Formularfelder **Name** und **E-Mail** hinzu. Dann verwenden wir **Seitenumbrüche**, um das Quiz in **6** Kategorien zu unterteilen. Jeder **Seitenumbruch** wird mit dem **Seitentitel** angezeigt, der angibt, auf welcher Kategorie sich die Quizteilnehmer gerade befinden.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, [sehen Sie sich diese Anleitung an](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars").
## Hinzufügen von Quizfragen und Punkten
Für diese Dokumentation verwenden wir die Felder **Mehrere Elemente** im Abschnitt **Zahlungsfelder** im Formular-Generator, um unsere Quizfrage zu stellen und die Bezeichnungen zu ändern, indem wir **3** Antworten für jede Frage angeben. Für die richtige Antwort setzen Sie **1,00** für die richtige Antwort und **0,00** für die falschen Antworten.
Fahren Sie mit Ihren Fragen und Kategorien fort. Jede Frage sollte **eine** Antwort mit **1,00** für die richtige Antwort und **0,00** für falsche Antworten haben. Wir verwenden den Betrag, um eine laufende Summe für jede richtige Antwort zu ermitteln.
## Hinzufügen eines Gesamtfeldes zur Verfolgung der Punktzahl
Jetzt möchten wir die Gesamtzahl der Punkte für jede richtige Antwort verfolgen. Um dies zu erreichen, fügen wir am Ende des Formulars ein **Gesamt**-Feld hinzu. Wir geben diesem Feld jedoch eine **CSS-Klasse** auf der Registerkarte **Erweitert**, damit wir dieses Feld bis zur Übermittlung des Formulars ausblenden können.
Nachdem Sie das Formular gespeichert haben, müssen Sie das CSS hinzufügen, um dieses Feld auszublenden. Kopieren Sie dieses CSS auf Ihre Website. Wenn Sie Hilfe beim Finden von benutzerdefiniertem CSS benötigen, [sehen Sie sich dieses Tutorial an](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Hinzufügen von benutzerdefinierten CSS-Stilen für WPForms").
```
.hide-field {display: none;}
```
## Anzeigen der Quizpunktzahl in der Bestätigungsnachricht
Um den Quizteilnehmern ihre Punktzahl nach der Übermittlung anzuzeigen, fügen Sie den folgenden Snippet zu Ihrer Website hinzu.
Dieser Snippet liest die übermittelten Werte, ruft den Namen und die Punktzahl des Benutzers ab und zeigt eine Bestätigungsnachricht mit dem Endergebnis an.
Kopieren und fügen Sie diesen Snippet auf Ihre Website ein. Wenn Sie Hilfe beim Hinzufügen von Snippets benötigen, [sehen Sie sich dieses nützliche Tutorial an](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms").
```php
/**
* Zeigt eine benutzerdefinierte Bestätigungsnachricht für unser Pub-Quiz an.
*
* @link https://wpforms.com/developers/how-to-create-a-quiz-form/
*/
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
// Nur auf meinem Formular mit ID = 3221 ausführen
if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
return $message;
}
// Den Namen der Person abrufen, die dieses Formular ausgefüllt hat
$contact_name = $fields[ '1' ][ 'value' ];
// Die Punkte aus dem Gesamtfeld (Feld-ID '7') abrufen, um Dezimalstellen und Währungssymbole zu entfernen
$points_scored = $fields[ '7' ][ 'value' ];
// Leerzeichen und Währungssymbol entfernen
list($points_scored) = explode('.', $points_scored);
$points_scored = substr($points_scored, 5);
// Den Namen und die erzielten Punkte zur Nachricht hinzufügen
$message = __('Danke ' . $contact_name . ' Sie haben ' . $points_scored . ' von möglichen 35 Punkten erreicht', 'plugin-domain');
return $message;
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );
```
Dieser Snippet wird nur für die Formular-ID **3221** ausgeführt. Er ruft den Namen des Benutzers aus unserem Namensfeld mit der Feld-ID **1** ab, damit er in unserer benutzerdefinierten Bestätigungsnachricht angezeigt werden kann. Dieser Snippet ruft dann den Betrag aus unserem **Gesamt**-Formularfeld mit der Feld-ID **7** ab, entfernt das Währungssymbol und Leerzeichen und wandelt das Übrige in eine ganze Zahl um, sodass keine Dezimalstellen oder Nullen vorhanden sind.
Sie müssen jede dieser IDs aktualisieren, um Ihre eigenen Formular- und Feld-IDs anzugeben. Um Ihre eigenen ID-Nummern zu finden, [lesen Sie diese Dokumentation](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Formular-ID und Feld-ID finden").
Wenn Benutzer das Ende des Quiz erreichen, klicken sie auf **Senden** und sehen sofort, wie viele Antworten sie richtig beantwortet haben.
Das ist alles! Möchten Sie, dass das Formular automatisch basierend auf dem Wert eines Ihrer Formularfelder übermittelt wird? Sehen Sie sich unser Tutorial [So übermitteln Sie ein Formular automatisch mit einer Feldauswahl](https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/ "So übermitteln Sie ein Formular automatisch mit einer Feldauswahl") an.
## Referenzfilter
[wpforms\_frontend\_confirmation\_message](https://wpforms.com/developers/wpforms_frontend_confirmation_message/ "Verwenden des wpforms_frontend_confirmation_message-Filters")
**Kategorien:** Tutorials
**Schlagwörter:** Bestätigungsnachricht, CSS, PHP
---