Möchten Sie ein Quiz-Formular mit WPForms erstellen? Mit Payment Fields können Sie ganz einfach ein Quiz-Formular erstellen, das die Gesamtpunktzahl für Ihr Quiz erfasst. In diesem Tutorial zeigen wir Ihnen, wie Sie dies mit Hilfe von Zahlungsfeldern ganz einfach tun können.
Erstellen des Quizformulars
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.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diesen Leitfaden.
Quizfragen stellen
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.
Zeit, die Antworten zu summieren
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;}
Erstellen der Quizlogik
Jetzt ist es an der Zeit, das Snippet hinzuzufügen, das das Ganze zusammenhält. Wir möchten eine benutzerdefinierte Bestätigungsnachricht anzeigen, die eine Dankesnachricht mit dem Namen des Quizteilnehmers anzeigt und ihm eine Gesamtpunktzahl angibt. Da wir keine Währungssymbole oder Dollarbeträge in dieser Summe haben wollen, werden wir ein benutzerdefiniertes Snippet verwenden, das unsere benutzerdefinierte Bestätigungsnachricht erstellt.
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.
Sie müssen jede dieser IDs aktualisieren, damit sie mit Ihren eigenen Formular- und Feld-IDs übereinstimmt. Um Ihre eigenen ID-Nummern zu finden, lesen Sie bitte diese Dokumentation.
Es ist nicht notwendig, der Registerkarte Bestätigungen etwas hinzuzufügen, da die Nachricht in unserem Snippet die Nachricht ist, die die Benutzer sehen, wenn sie das Quiz abschließen. Stellen Sie sicher, dass Sie diese Nachricht so anpassen, wie Sie es für Ihr Quiz benötigen.
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.