Wie man ein Quiz-Formular erstellt

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 diesem Tutorial zeigen wir Ihnen, wie Sie ein Quizformular mit einer snippetbasierten Konfiguration erstellen, die nach dem Absenden die Punktzahl des Benutzers berechnet und anzeigt.

Empfohlene Methode zum Erstellen von Quizformularen

WPForms enthält ein spezielles Quiz-Addon, mit dem sich Quizformulare auf einfachste und umfassendste Weise erstellen lassen.

Das Quiz-Addon enthält integrierte Quiz-Funktionen und bietet die einfachste Möglichkeit, Quizformulare in WPForms zu erstellen und zu verwalten.

Ausführliche Informationen zur empfohlenen Methode finden Sie in unserer Dokumentation zum Quiz-Addon.

Erstellen des Quizformulars mit einem Snippet

Wenn Sie dennoch ein Quizformular mit einer benutzerdefinierten Konfiguration erstellen möchten, können Sie die Schritte in dieser Anleitung befolgen und den folgenden Codeausschnitt verwenden.

Wir beginnen mit der Erstellung eines neuen Formulars. In unserem Formular fügen wir die Formularfelder Name und E-Mail am Anfang des Formulars hinzu. Dann unterteilen wir das Quiz mithilfe von Seitenumbrüchen in 6 Kategorien. Bei jedem Seitenwechsel wird im Seitentitel angezeigt, in welcher Kategorie sich die Quizteilnehmer gerade befinden.

Quizfragen und Punktestände hinzufügen

Für diese Dokumentation verwenden wir die Felder für mehrere Elemente unter dem Abschnitt Zahlungsfelder im Formularersteller, um unsere Quizfrage zu stellen und die Beschriftungen zu ändern, die 3 Antworten für jede Frage bieten. Für die richtige Antwort setzen Sie eine 1,00 und für die falschen Antworten 0,00 ein.

Fahren Sie auf diese Weise mit Ihren Fragen und Kategorien fort. Jede Frage sollte eine Antwort mit einer 1,00 für die richtige Antwort und 0,00 für falsche Antworten haben. Wir werden den Betrag verwenden, um eine laufende Summe für jede richtige Antwort zu erhalten.

Hinzufügen eines Gesamtfelds zur Verfolgung der Punktzahl

Jetzt wollen wir die Gesamtzahl der Punkte für jede richtige Antwort erfassen. Zu diesem Zweck fügen wir am unteren Ende des Formulars ein Feld "Total" ein. Allerdings werden wir diesem Feld auf der Registerkarte " Erweitert" eine CSS-Klasse zuweisen, damit das Feld nicht sichtbar ist, bis das Formular abgeschickt wird.

Sobald Sie das Formular gespeichert haben, müssen Sie das CSS hinzufügen, das zum Ausblenden dieses Feldes erforderlich ist. Kopieren Sie dieses CSS auf Ihre Website. Wenn Sie Hilfe benötigen, um herauszufinden, wie und wo Sie benutzerdefinierte CSS hinzufügen können, sehen Sie sich bitte dieses Tutorial an.

.hide-field {display: none;}

Anzeige der Quizpunktzahl in der Bestätigungsmeldung

Um den Teilnehmern nach dem Absenden ihre Punktzahl anzuzeigen, fügen Sie den folgenden Snippet in Ihre Website ein.

Dieser Ausschnitt liest die übermittelten Werte, ruft den Namen und die Punktzahl des Benutzers ab und zeigt eine Bestätigungsmeldung mit dem Endergebnis an.

Kopieren Sie dieses Snippet und fügen Sie es in Ihre Website ein. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets hinzufügen können, lesen Sie bitte diese nützliche Anleitung.

/**
 * Display a custom confirmation message for our pub quiz.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-quiz-form/
 */
   
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
       
    // Only run on my form with ID = 3221
    if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
            return $message;
        } 
   
    // Get the name of the person who completed this form
    $contact_name = $fields[ '1' ][ 'value' ];
            
    // Get the points from the total field (field ID '7') to remove any decimals and currency symbols
    $points_scored = $fields[ '7' ][ 'value' ];
  
    // Remove white space and currency symbol
    list($points_scored) = explode('.', $points_scored);
    $points_scored = substr($points_scored, 5);
     
       
    // Add the name and points scored to the message
    $message = __('Thanks ' . $contact_name .  ' you scored ' . $points_scored . ' out of a possible 35 points', 'plugin-domain');
      
    return $message;
        
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );

Dieses Snippet wird nur auf dem Formular ID 3221 ausgeführt. Es erfasst den Namen des Benutzers aus dem Feld "Name" in der Feld-ID 1, damit er in unserer benutzerdefinierten Bestätigungsmeldung angezeigt werden kann. Dieses Snippet erfasst dann den Betrag aus unserem Formularfeld " Total" (Feld-ID 7), entfernt das Währungssymbol und das Leerzeichen und konvertiert den verbleibenden Betrag in eine ganze Zahl, sodass kein Dezimalpunkt oder Nullen vorhanden sind.

Wenn die Nutzer am Ende des Quiz angelangt sind, klicken sie auf " Abschicken " und sehen sofort, wie viele Antworten sie richtig erhalten haben.

Und das war's! Möchten Sie, dass das Formular automatisch auf der Grundlage eines Wertes in einem Ihrer Formularfelder abgeschickt wird? Sehen Sie sich unser Tutorial über das automatische Absenden eines Formulars mit einer Feldauswahl an.

Referenzfilter

wpforms_frontend_bestaetigung_nachricht