KI-Zusammenfassung
Möchten Sie die Schaltfläche „Senden“ basierend auf den Antworten der Formularfelder automatisch ein- oder ausblenden? Mit einem einfachen Code-Snippet können Sie die Sichtbarkeit der Schaltfläche „Senden“ Ihres Formulars mithilfe bedingter Logik steuern.
Diese Anleitung zeigt, wie Sie ein Code-Snippet hinzufügen und eine bedingte Logik einrichten, um die Sichtbarkeit Ihrer Schaltfläche „Senden“ zu steuern.
Einrichtung des Formulars
Öffnen Sie zunächst den Formular-Builder, indem Sie ein neues Formular erstellen oder Ihr vorhandenes bearbeiten.
In diesem Beispiel erstellen wir ein Spendenformular mit einem Feld für Mehrfachauswahl, das Ja/Nein-Optionen anzeigt. Alle anderen zusätzlichen Felder im Formular werden nur angezeigt, wenn Ja mithilfe bedingter Logik ausgewählt wird.
Die Schaltfläche „Senden“ wird nur angezeigt, wenn Ja ausgewählt ist, und Benutzer werden zu einer Dankesseite weitergeleitet, wenn Nein ausgewählt ist.
Hinweis: Notieren Sie sich die ID Ihres Formulars, da Sie diese beim Hinzufügen des Code-Snippets benötigen. Wenn Sie Hilfe beim Auffinden dieser IDs benötigen, lesen Sie unsere Anleitung zum Auffinden von Formular- und Feld-IDs.
Festlegen der bedingten Logik
Bevor wir den Code für die Schaltfläche „Senden“ hinzufügen, müssen wir die bedingte Logik für die anderen Felder in Ihrem Formular einrichten. Diese Felder sollten verborgen bleiben, bis der Benutzer „Ja“ aus dem Feld für Mehrfachauswahl auswählt.
Um dies zu erreichen, öffnen Sie die Einstellungen jedes Feldes und konfigurieren Sie die bedingte Logik so, dass das Feld angezeigt wird, wenn Ihr Feld für Mehrfachauswahl gleich Ja ist. Dies stellt sicher, dass diese Felder standardmäßig verborgen bleiben und nur bei Bedarf angezeigt werden.
Hinweis: Wenn Sie Hilfe beim Verständnis der Funktionsweise der bedingten Logik in WPForms benötigen, lesen Sie bitte unsere ausführliche Anleitung zur bedingten Logik.
Erstellen der Dankesseite
Da unser Formular den Benutzern eine Ja/Nein-Auswahl bietet, möchten wir auch dann ein gutes Erlebnis bieten, wenn „Nein“ ausgewählt wird. Anstatt nur die Schaltfläche „Senden“ auszublenden, leiten wir die Benutzer zu einer speziellen Dankesseite weiter.
Erstellen Sie dazu eine neue Seite in WordPress und nennen Sie sie Danke (oder einen anderen Namen Ihrer Wahl). Hierhin werden Benutzer, die „Nein“ auswählen, automatisch weitergeleitet.
Notieren Sie sich den URL-Pfad der Seite, da Sie diesen für die Weiterleitung in unserem Code-Snippet benötigen.
Hinzufügen des Code-Snippets
Der folgende Code-Snippet steuert die Sichtbarkeit Ihrer Schaltfläche „Senden“ basierend auf den Formularantworten:
Dieses Snippet verwendet zuerst CSS, um die Schaltfläche „Senden“ beim anfänglichen Laden der Seite auszublenden. Dann richtet es einen JavaScript-Ereignis-Listener ein, der Änderungen an den Optionen des Feldes für Mehrfachauswahl Ihres Formulars überwacht.
Wenn ein Benutzer „Ja“ auswählt, fügt das Skript eine CSS-Klasse hinzu, die die Schaltfläche „Senden“ sichtbar macht. Wenn er „Nein“ auswählt, leitet das Skript ihn automatisch zu Ihrer Dankesseite weiter.
Hinweis: Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte unser Tutorial zum sicheren Hinzufügen von Code-Snippets.
Anpassen des Codes
Sie müssen mehrere Schlüsselwerte im Code-Snippet für Ihr spezifisches Formular anpassen:
- Auf Zeile 12 und Zeile 16, suchen Sie den CSS-Selektor
#wpforms-form-1000und ersetzen Sie1000durch Ihre tatsächliche Formular-ID. - Ersetzen Sie auf Zeile 30 im jQuery-Selektor
form#wpforms-form-10001000noch einmal durch Ihre Formular-ID. - Auf Zeile 33 finden Sie den Weiterleitungs-URL-Pfad
/thank-you. Aktualisieren Sie diesen, damit er mit dem tatsächlichen URL-Pfad Ihrer Dankesseite übereinstimmt.- Wenn Sie Ihre Seite beispielsweise „Danke“ genannt haben, würden Sie sie in
/dankeändern.
- Wenn Sie Ihre Seite beispielsweise „Danke“ genannt haben, würden Sie sie in
Testen Ihrer Implementierung
Nachdem Sie den Code-Schnipsel hinzugefügt und angepasst haben, ist es wichtig, die Funktionalität gründlich zu testen:
- Laden Sie Ihr Formular neu und vergewissern Sie sich, dass die Schaltfläche Senden standardmäßig ausgeblendet ist.
- Wählen Sie als Nächstes Nein in Ihrem Formular aus und bestätigen Sie, dass Sie sofort zu Ihrer Dankesseite weitergeleitet werden.
- Testen Sie dann den „Ja“-Pfad – wählen Sie Ja und vergewissern Sie sich, dass nicht nur die Schaltfläche „Senden“ erscheint, sondern auch alle Ihre bedingt ausgeblendeten Felder sichtbar werden.
- Schließlich füllen Sie das Formular aus und senden es ab, nachdem Sie Ja ausgewählt haben, um sicherzustellen, dass der gesamte Vorgang wie erwartet funktioniert.
Häufig gestellte Fragen
F: Kann dies für ein einzeiliges Textfeld verwendet werden?
A: Absolut! Hier ist ein Code-Schnipsel, der mit einem einzeiligen Textfeld funktioniert.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit {
visibility: hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
?>
<script>
jQuery(function($){
// Form ID 1000 and Field ID 15
$( "#wpforms-1000-field_15" ).change(function(){
var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
var specificText ="Some Text Here"
if(inputvalue == specificText){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );
F: Kann ich diesen Schnipsel für das Dropdown-Feld verwenden?
A: Ja, Sie können dies mit Dropdown-Feldern unter Verwendung des folgenden Code-Schnipsels verwenden:
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).on( 'change', function () {
var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();
if(selectedval == "First Choice"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
else{
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
F: Kann dies auch für die Schaltflächen „Nächste Seite“ und „Vorherige Seite“ verwendet werden?
A: Um dieselbe Funktionalität für Seitenumbruch-Schaltflächen zu verwenden, müssten Sie nur .wpforms-submit in button.wpforms-page-next ändern. Der vollständige Code-Schnipsel würde also etwa so aussehen.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 button.wpforms-page-next {
visibility: hidden;
}
#wpforms-form-1000 button.wpforms-page-next.show-next {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($) {
$( "form#wpforms-form-1000" ).click(function() {
var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
if (selectedval == "No") {
window.location = "/thank-you";
}
if (selectedval == "Yes") {
$( "button.wpforms-page-next" ).addClass( "show-next" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
F: Was ist, wenn ich mehr als ein Multiple-Choice-Feld auf der Seite habe?
A: Wenn Sie mehr als eine „Ja“- oder „Nein“-Frage haben, können Sie das Skript identifizieren, indem Sie die Feld-ID angeben. Wenn Sie beispielsweise drei Multiple-Choice-Felder auf einer Seite haben, würde Ihr Skript wie folgt aussehen.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
if(selectedval == "Yes"){
window.location = "/thank-you";
}
if(selectedval == "No"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Unsere Formular-ID ist 1000 und die ID des Multiple-Choice-Feldes, das wir in unserem Code verwenden möchten, ist 15. Daher setzen wir eine Variable zur Auswertung mit $("div#wpforms-1000-field_15-container input[type='radio']:checked")
F: Kann ich einfach den Senden-Button deaktivieren, bis alle Felder einen Wert haben?
A: Ja, allerdings werden Telefonnummern, E-Mail-Adressen usw. nicht validiert. Dieser Schnipsel prüft nur, ob irgendein Wert vorhanden ist, bevor die Schaltfläche „Senden“ geklickt werden kann.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_disable_submit_validation() {
?>
<script type="text/javascript">
jQuery(function () {
// Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
jQuery('#wpforms-submit-727').attr('disabled', true);
// Look and listen for any change on the form ID 727, change the 727 to match your form ID
jQuery('#wpforms-form-727').change(function () {
// List all field IDs in this section using the && to join them
if (jQuery('#wpforms-727-field_1').val() != '' &&
jQuery('#wpforms-727-field_2').val() != '' &&
jQuery('#wpforms-727-field_3').val() != '' &&
// Check for radio button (adjust field number as needed)
jQuery('input[name="wpforms[fields][4]"]:checked').val() &&
// Check for checkbox (adjust field number as needed)
jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
// If all of those field IDs have values, the submit button can be clicked
jQuery('#wpforms-submit-727').attr('disabled', false);
} else {
// Otherwise, the submit button for this form remains disabled
jQuery('#wpforms-submit-727').attr('disabled', true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);
Hinweis: Sie müssen nur sicherstellen, dass 727 mit Ihrer Formular-ID übereinstimmt und dass Sie jedes Feld-ID auf diesem Formular aufgelistet haben. Wenn Sie Hilfe beim Auffinden der Formular- oder Feld-ID-Nummern benötigen, sehen Sie sich dieses Tutorial an.
F: Was ist, wenn ich mehr als eine Auswahl für ein Feld vergleichen möchte?
A: Wenn Sie mehr als ein Feld vergleichen möchten, würden Sie einfach das PHP-Äquivalent für den ODER-Operator verwenden.
Dieses Beispiel verwendet ein einfaches Reservierungsformular mit dem Kontrollkästchen-Feld, damit der Benutzer seine gewünschte Zeit auswählen kann. Wenn der Benutzer 8:00 – 9:00 Uhr, 9:00 – 10:00 Uhr oder 10:00 – 11:00 Uhr auswählt, wird er auf die Seite Vielen Dank weitergeleitet, da diese Zeitfenster bereits belegt sind.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
window.location = "/thank-you";
}
if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Hinweis: Um mehr über PHP-Vergleichsoperatoren zu erfahren, lesen Sie bitte hier die Dokumentation zu diesem Thema.
F: Könnte ich dies ändern, um zwei Daten miteinander zu vergleichen?
A: Absolut! Nehmen wir an, Sie haben zwei Datumsfelder auf Ihrer Website. Datum eins wäre das Bestelldatum und Datum zwei das Abholdatum. Aber Sie möchten den Senden-Button nicht anzeigen, es sei denn, Datum zwei ist größer als Datum eins.
Bitte denken Sie daran, dass Sie für jede Hilfe beim Hinzufügen von Snippets dieses Tutorial ansehen können.
/**
* Conditionally show the submit button if date 2 is greater than date 1
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
?>
<script>
jQuery(function($){
// Only fire this script when date 2 has been selected
document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() {
// Set the first date picker variable
var oneDate = $( "input#wpforms-1899-field_32" ).val();
// Set the second date picker variable
var twoDate = $( "input#wpforms-1899-field_33" ).val();
// Now compare the 2 dates, show a message and keep the Submit button hidden
// if date 2 is less than date 1
if(twoDate < oneDate){
alert( "Please make sure that the pickup date is after the dropoff date" );
e.preventDefault();
e.stopPropagation();
}
else {
// since date 2 is greater than date 1, go ahead and show the submit button
$( ".wpforms-submit" ).addClass( "show-submit" );
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );
Jede Referenz auf 1899 im obigen Snippet ist meine Formular-ID. Die _32 und _33 sind die Feld-IDs für die beiden Datumsfelder in unserem Formular.
Sie müssen alle diese IDs aktualisieren, um sie an Ihre eigenen Formular- und Feld-IDs anzupassen. Um Ihnen dabei zu helfen, sehen Sie sich einfach dieses Tutorial an.
F: Kann ich verhindern, dass der Benutzer das Formular basierend auf einer Dropdown-Auswahl fortsetzt?
A: Absolut. In diesem Beispiel zeigen wir die Schaltflächen „Weiter“ und „Zurück“ wie erwartet an, aber wenn sie im Formular „Nein“ auswählen, möchten wir diese Schaltflächen deaktivieren, damit der Benutzer das Formular nicht fortsetzen kann.
/**
* Conditionally show the Next button based on dropdown choice
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_conditional_next_page() {
?>
<script>
jQuery(function($){
// Only run this on the form ID 727
$( "form#wpforms-form-727" ).on( 'change', function () {
// Look at the field ID 9 which is a dropdown to see what the user selected
var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();
// If the user selects no from the dropdown, disable the Next button
if(selectedval == "No"){
$( ".wpforms-page-next" ).attr({disabled: "true"});
}
else {
// Otherwise, the next button for this form remains disabled
$( '.wpforms-page-next' ).attr('disabled', false);
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );
Hinweis: Wenn Sie dieses Snippet verwenden, bedenken Sie, dass der Benutzer möglicherweise nicht versteht, warum die Schaltfläche deaktiviert ist, und dies zu Verwirrung führen kann. Stellen Sie sicher, dass der Benutzer den Ablauf Ihres Formulars versteht, wenn Sie dieses Snippet verwenden.
F: Wie kann ich verhindern, dass der Senden-Button angezeigt wird, es sei denn, ein Zahlenfeld ist größer oder gleich 3?
A: Bei der Analyse eines numerischen Betrags könnten Sie dieses Snippet verwenden.
/**
* Check if amount entered on field ID 15 is greater than or equal to 3
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
if(selectedval <= "2"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
if(selectedval >= "3"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Hinweis: Denken Sie daran, die Formular-ID von 1000 zu ändern, um sie an Ihre eigene Formular-ID anzupassen, und ändern Sie auch die Feld-ID _15, um sie an die Feld-ID Ihres Zahlen-Formularfelds anzupassen.
F: Wie kann ich die Schaltfläche „Weiter“ ausblenden, bis eine bestimmte Anzahl von Kontrollkästchen in einem mehrstufigen Formular ausgewählt ist?
A: Sie können die Schaltfläche „Weiter“ ausblenden, bis eine bestimmte Anzahl von Kontrollkästchen ausgewählt ist, indem Sie eine Kombination aus CSS und JavaScript verwenden. Hier ist ein Beispiel, das die Schaltfläche „Weiter“ ausblendet, bis mindestens 2 Kontrollkästchen ausgewählt sind:
/**
* Hide Next button until multiple checkboxes are selected
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
visibility: visible;
}
</style>
<?php } );
function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
// Function to check the number of selected checkboxes
function checkCheckboxes() {
var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
if (minSelection >= 2) {
$("button.wpforms-page-next").addClass("show-next");
} else {
$("button.wpforms-page-next").removeClass("show-next");
}
}
// Check the checkboxes on form load and when any checkbox is clicked
checkCheckboxes();
$('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
checkCheckboxes();
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );
Und das ist alles, was Sie brauchen, um die Senden-Schaltfläche in Ihrem Formular bedingt anzuzeigen! Möchten Sie mehr darüber erfahren, wie Sie die Farbe der Senden-Schaltfläche ändern können? Sehen Sie sich unseren Artikel über So ändern Sie die Farbe der Senden-Schaltfläche an.