Möchten Sie die Schaltfläche "Absenden" automatisch ein- oder ausblenden, je nach den Antworten in den Formularfeldern? Mit einem einfachen Codeschnipsel können Sie die Sichtbarkeit der Schaltfläche "Absenden" Ihres Formulars mit bedingter Logik steuern.
In dieser Anleitung wird gezeigt, wie Sie ein Codeschnipsel hinzufügen und eine bedingte Logik einrichten, um die Sichtbarkeit der Schaltfläche Senden zu steuern.
Einrichten des Formulars
Öffnen Sie zunächst den Formularersteller, indem Sie ein neues Formular erstellen oder Ihr bestehendes bearbeiten.
In diesem Beispiel erstellen wir ein Spendenformular mit einem Multiple-Choice-Feld, in dem Ja/Nein ausgewählt werden kann. Alle anderen zusätzlichen Felder im Formular werden nur dann angezeigt, wenn mit Hilfe der bedingten Logik Ja ausgewählt wird.
Die Schaltfläche "Absenden" erscheint nur, wenn "Ja" ausgewählt wurde. Wenn "Nein" ausgewählt wurde, werden die Benutzer auf eine "Danke"-Seite weitergeleitet.
Hinweis: Notieren Sie sich die ID Ihres Formulars, da Sie diese beim Hinzufügen des Codeschnipsels benötigen. Wenn Sie Hilfe bei der Suche nach diesen IDs benötigen, lesen Sie unseren Leitfaden zur Ermittlung von Formular- und Feld-IDs.
Einstellen der bedingten Logik
Bevor wir den Code für die Schaltfläche "Senden" hinzufügen, müssen wir eine bedingte Logik für die anderen Felder in Ihrem Formular einrichten. Diese Felder sollten ausgeblendet bleiben, bis der Benutzer im Feld Multiple Choice "Ja" auswählt.
Öffnen Sie dazu die Einstellungen jedes Feldes und konfigurieren Sie eine bedingte Logik, um das Feld einzublenden, wenn Ihr Multiple-Choice-Feld gleich Ja ist. Dadurch wird sichergestellt, dass diese Felder standardmäßig ausgeblendet bleiben und nur bei Bedarf angezeigt werden.
Hinweis: Wenn Sie Hilfe benötigen, um zu verstehen, wie die bedingte Logik in WPForms funktioniert, lesen Sie bitte unsere ausführliche Anleitung zur bedingten Logik.
Erstellen der Dankeseite
Da unser Formular den Nutzern eine Ja/Nein-Entscheidung bietet, wollen wir auch dann eine gute Erfahrung bieten, wenn "Nein" ausgewählt wird. Anstatt die Schaltfläche "Absenden" einfach auszublenden, leiten wir die Benutzer auf eine spezielle "Danke"-Seite um.
Erstellen Sie dazu eine neue Seite in WordPress und nennen Sie sie "Danke" (oder einen anderen Namen, den Sie bevorzugen). Hierher werden Nutzer, die "Nein" wählen, automatisch weitergeleitet.
Notieren Sie sich den URL-Pfad der Seite, da Sie diesen für die Umleitung in unserem Codeschnipsel benötigen.
Hinzufügen des Codeschnipsels
Das folgende Codeschnipsel steuert die Sichtbarkeit der Submit-Schaltfläche auf der Grundlage von Formularantworten:
Dieses Snippet verwendet zunächst CSS, um die Schaltfläche "Submit" beim ersten Laden der Seite auszublenden. Dann wird ein JavaScript-Ereignis-Listener eingerichtet, der auf Änderungen an den Multiple-Choice-Feldoptionen Ihres Formulars achtet.
Wenn ein Benutzer "Ja" wählt, fügt das Skript eine CSS-Klasse hinzu, die die Schaltfläche "Senden" sichtbar macht. Wenn er "Nein" wählt, leitet das Skript ihn automatisch zu Ihrer Dankeseite weiter.
Hinweis: Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte unseren Leitfaden zum sicheren Hinzufügen von Code-Snippets.
Anpassen des Codes
Sie müssen mehrere Schlüsselwerte im Codeschnipsel für Ihr spezifisches Formular anpassen:
- Auf Zeile 12 und Zeile 16finden Sie den CSS-Selektor
#wpforms-form-1000und ersetzen1000mit Ihrer tatsächlichen Formular-ID. - Auf Zeile 30im jQuery-Selektor
form#wpforms-form-1000ersetzen1000noch einmal mit Ihrer Formular-ID. - Auf Zeile 33finden Sie den Pfad für die Umleitung der URL
/thank-you. Aktualisieren Sie dies, damit es dem tatsächlichen URL-Pfad Ihrer Dankeseite entspricht.- Wenn Sie Ihre Seite zum Beispiel "Danke" nennen, würden Sie sie ändern in
/thanks.
- Wenn Sie Ihre Seite zum Beispiel "Danke" nennen, würden Sie sie ändern in
Testen Ihrer Implementierung
Sobald Sie das Codeschnipsel hinzugefügt und angepasst haben, ist es wichtig, die Funktionalität gründlich zu testen:
- Laden Sie zunächst Ihr Formular neu und stellen Sie sicher, dass die Schaltfläche Absenden standardmäßig ausgeblendet ist.
- Wählen Sie dann Nein in Ihrem Formular und bestätigen Sie, dass Sie sofort auf Ihre Dankeseite weitergeleitet werden.
- Testen Sie dann den Pfad "Ja" - wählen Sie "Ja" und überprüfen Sie, ob nicht nur die Schaltfläche "Absenden" erscheint, sondern auch alle Ihre bedingt ausgeblendeten Felder sichtbar werden.
- Füllen Sie abschließend das Formular aus und senden Sie es mit Ja ab, um sicherzustellen, dass der gesamte Prozess wie erwartet funktioniert.
Häufig gestellte Fragen
F: Kann dies auch für ein einzeiliges Textfeld verwendet werden?
A: Auf jeden Fall! Hier ist ein Codeschnipsel, 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 dieses Snippet für das Dropdown-Feld verwenden?
A: Ja, Sie können dies mit Dropdown-Feldern verwenden, indem Sie das folgende Code-Snippet 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 für den nächsten und vorherigen Seitenwechsel verwendet werden?
A: Um die gleiche Funktionalität für Seitenwechsel-Schaltflächen zu nutzen, müssten Sie lediglich .wpforms-submit in button.wpforms-page-next ändern. Das komplette Codeschnipsel 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 durch Angabe der Feld-ID identifizieren. Wenn Sie zum Beispiel 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 lautet 1000 und die ID des Multiple Choice Feld, das wir in unserem Code verwenden wollen, ist 15. Deshalb setzen wir eine Variable, die wir mit $("div#wpforms-1000-field_15-container input[type='radio']:checked")
F: Kann ich die Schaltfläche "Absenden" einfach deaktivieren, bis alle Felder einen Wert haben?
A: Ja, aber es werden keine Telefonnummern, E-Mail-Adressen usw. überprüft. Dieses Snippet sucht nur nach einem beliebigen Wert, bevor die Schaltfläche "Senden" angeklickt 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 die 727 mit Ihrer Formular-ID übereinstimmt und dass Sie alle Feld-IDs in diesem Formular aufgeführt haben. Wenn Sie Hilfe bei der Suche nach den Formular- oder Feld-ID-Nummern benötigen, lesen Sie bitte diese Anleitung.
F: Was ist, wenn ich mehr als eine Auswahl für ein Feld vergleichen möchte?
A: Wenn Sie mehr als ein Feld vergleichen wollen, verwenden Sie einfach das PHP-Äquivalent für den OR-Operator.
In diesem Beispiel wird ein einfaches Reservierungsformular mit einem Kontrollkästchen verwendet, in dem der Benutzer die 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 "Danke" 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 die Dokumentation zu diesem Thema hier.
F: Könnte ich dies ändern, um zwei Daten miteinander zu vergleichen?
A: Auf jeden Fall! Nehmen wir an, Sie haben zwei Datumsfelder auf Ihrer Website. Datum eins wäre das Bestelldatum und Datum zwei wäre das Abholdatum. Sie möchten aber die Schaltfläche " Senden" nur dann anzeigen, wenn das zweite Datum größer ist als das erste.
Bitte denken Sie daran, wenn Sie Hilfe beim Hinzufügen von Snippets benötigen, sehen Sie sich diese Anleitung an.
/**
* 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 );
Jeder Verweis auf 1899 in dem obigen Ausschnitt ist meine Formular-ID. Die _32 und _33 sind die Feld-IDs für die 2 Datumsauswahlfelder in unserem Formular.
Sie müssen alle diese IDs aktualisieren, damit sie mit Ihren eigenen Formular- und Feld-IDs übereinstimmen. Hilfe bei der Suche nach diesen IDs finden Sie in diesem Lernprogramm.
F: Kann ich verhindern, dass der Benutzer das Formular aufgrund einer Dropdown-Option weiter durchläuft?
A: Auf jeden Fall. In diesem Beispiel werden die Schaltflächen "Weiter" und "Zurück" wie erwartet angezeigt, aber wenn der Benutzer im Formular "Nein" auswählt, wollen wir diese Schaltflächen deaktivieren, damit der Benutzer nicht mit dem Formular fortfahren 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, denken Sie daran, dass der Benutzer möglicherweise nicht versteht, warum die Schaltfläche deaktiviert ist, was zu Verwirrung führen kann. Achten Sie darauf, dass der Benutzer den Ablauf Ihres Formulars versteht, wenn Sie dieses Snippet verwenden.
F: Wie kann ich verhindern, dass die Schaltfläche "Senden" angezeigt wird, wenn ein Zahlenfeld größer oder gleich 3 ist?
A: Wenn Sie einen numerischen Betrag analysieren, können Sie diesen Ausschnitt 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, damit sie mit Ihrer eigenen Formular-ID übereinstimmt, und ändern Sie auch die Feld-ID _15, damit sie mit der Feld-ID Ihres Formularfeldes Number übereinstimmt.
F: Wie kann ich die Schaltfläche Weiter ausblenden, bis eine bestimmte Anzahl von Kontrollkästchen in einem mehrstufigen Formular ausgewählt wurde?
A: Mit einer Kombination aus CSS und JavaScript können Sie die Schaltfläche "Weiter" ausblenden, bis eine bestimmte Anzahl von Kontrollkästchen ausgewählt ist. Hier ist ein Beispiel, bei dem die Schaltfläche "Weiter" ausgeblendet wird, 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 );
Das ist alles, was Sie brauchen, um die Schaltfläche "Senden" in Ihrem Formular bedingt anzuzeigen! Möchten Sie mehr darüber erfahren, wie Sie die Farbe der Schaltfläche "Senden" ändern können? Schauen Sie sich unseren Artikel How to Change the Submit Button Color an.