KI-Zusammenfassung
Möchten Sie ein bedingtes Bewertungsformular mit Dropdown-Menüs erstellen? Mit dem Umfrage- und Abstimmungs-Add-on sind Sie bereits ausgestattet, um ein Formular zu generieren, das Besuchermeinungen sammelt und es ihnen ermöglicht, über verschiedene Aspekte abzustimmen.
Für unsere Dokumentationszwecke möchten wir jedoch ein Formular entwerfen, das es Benutzern ermöglicht, Funktionen anhand von numerischen Werten zu priorisieren. Angesichts des numerischen Systems für die Priorisierung ist es unerlässlich, doppelte Prioritätsnummern für verschiedene von unseren Besuchern ausgewählte Funktionen zu verhindern.
In diesem Tutorial erstellen wir unser Bewertungsformular mit einem kurzen Code-Snippet, das eine Prioritätsnummer eliminiert, wenn sie bereits ausgewählt wurde. Dies stellt sicher, dass wir aufschlussreiche Entscheidungen aus den von unseren Kunden ausgedrückten Prioritäten ableiten können.
Erstellung des Formulars
Beginnen wir mit der Einrichtung eines neuen Formulars und der Integration der notwendigen Felder. Unser Formular besteht aus einem Name-Feld, einem optionalen E-Mail-Feld und fünf Dropdown-Feldern, die jeweils Funktionen zur Bewertung anbieten.
Für Unterstützung bei der Einrichtung Ihres Formulars können Sie diesen hilfreichen Leitfaden zur Erstellung Ihres ersten Formulars konsultieren.
Festlegen der Dropdown-Feldoptionen
Nun müssen wir für unsere Dropdown-Felder jedes einzelne durchgehen und unser Bewertungssystem hinzufügen. Für die Zwecke dieser Dokumentation basieren unsere Bewertungen numerisch auf 1-10, wobei 1 die am wenigsten bevorzugte Option und 10 die höchste ist.
Sie können natürlich jedes System verwenden, das für Sie am besten geeignet ist, sei es numerisch oder textbasiert.
Auswählen des Dropdown-Stils
Bitte denken Sie daran, im Tab Erweitert des Dropdown-Feldes den Stil Klassisch für Ihre Felder auszuwählen. Dies ist sehr wichtig, da das Snippet nur mit diesem Stil funktioniert.
Erstellen der bedingten Bewertungslogik
Es ist nun an der Zeit, das Snippet zu Ihrer Website hinzuzufügen. Wenn Sie Hilfe benötigen, wo und wie Sie Snippets zu Ihrer Website hinzufügen können, sehen Sie sich bitte dieses Tutorial an.
/**
* WPForms Conditional Rating Form
*
* @link https://wpforms.com/developers/how-to-create-a-conditional-rating-form/
*/
function wpf_dev_conditional_dropdown_options( ) {
?>
<script type="text/javascript">
// only run on dropdown fields inside the form ID 2552
jQuery( 'form#wpforms-form-2552 select' ).on( 'change', function() {
jQuery( 'option' ).prop( 'disabled', false);
jQuery( 'select' ).each(function() {
var val = this.value;
jQuery( 'select' ).not(this).find( 'option' ).filter(function() {
return this.value === val;
}).prop( 'disabled', true);
});
}).change();
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_dropdown_options', 30 );
Dieses Code-Snippet scannt nach Dropdown-Feldern im Formular mit der ID 2552. Sobald eine Option aus einem der Felder ausgewählt wurde, wird diese Option für die Auswahl in den verbleibenden Feldern nicht mehr verfügbar sein.
Bitte stellen Sie sicher, dass Sie die Feld-ID 2552 aktualisieren, um die ID Ihres Formulars anzugeben. Wenn Sie Hilfe beim Auffinden Ihrer ID benötigen, beziehen Sie sich bitte auf dieses Tutorial zum Auffinden dieser spezifischen IDs.
Nun werden Sie feststellen, dass die ausgewählten Optionen in den anderen Feldern deaktiviert werden.
Und das ist alles! Sie haben erfolgreich ein bedingtes Bewertungsformular mit den Dropdown-Feldern von WPForms erstellt. Möchten Sie die Schaltfläche zum Absenden basierend auf den im Formular gemachten Angaben bedingt ausblenden? Sehen Sie sich unser Tutorial an: Bedingtes Einblenden der Schaltfläche zum Absenden.
Referenzaktion
FAQ
F: Wie kann ich die Optionen zurücksetzen?
A: Wenn ein Benutzer seine Meinung zu einer der Optionen ändert, geht er einfach zurück und trifft neue Auswahlen, wodurch die zuvor ausgewählten Werte zurückgesetzt werden.
F: Kann die bedingte Logik verwendet werden, um das Dropdown ein- und auszublenden?
A: Absolut! Sie können die bedingte Logik von WPForms verwenden, um alle Dropdowns auszublenden, bis eine Auswahl getroffen wurde. Sie müssen sicherstellen, dass Sie bei der Anwendung dieser Logik die erforderliche Logik überprüfen und testen, z. B. Funktion 2 ist ausgeblendet, solange Funktion 1 nicht ausgewählt ist – Eine auswählen –.
