Elementor Formular: Sende-Button erst anzeigen, wenn Pflichtfelder ausgefüllt sind
Mit diesem Snippet kannst du Elementor-Formulare so erweitern, dass der Sende-Button erst dann sichtbar und klickbar wird, wenn alle Pflichtfelder vollständig ausgefüllt wurden.
Das verbessert die Nutzerführung deutlich: Der Fokus liegt zuerst auf den Eingaben und nicht auf dem Absenden. Gleichzeitig verhinderst du unvollständige Formularübermittlungen bereits im Frontend.
Gerade bei Kontaktformularen, Angebotsanfragen oder Buchungen ist das eine sinnvolle Ergänzung.
Beispiel
Was das Snippet konkret macht
- Der Submit-Button wird initial deaktiviert und ausgeblendet
- Alle Pflichtfelder (required) werden überwacht
- Sobald alle Felder ausgefüllt sind, wird der Button aktiviert
- Pflicht-Checkboxen (z. B. DSGVO) werden ebenfalls berücksichtigt
- Nach erfolgreichem Versand wird der Button erneut deaktiviert
Wichtig: Steuerung über die Klasse submit-lock
submit-lockbestimmt, welches Formular betroffen ist.
Das bedeutet:
- Nur Formulare innerhalb eines Containers mit dieser Klasse werden überwacht
- Du kannst mehrere Formulare unterschiedlich behandeln
- Keine ungewollten Seiteneffekte auf andere Formulare
Verwendung in Elementor
Du hast zwei Möglichkeiten:
Variante 1 (empfohlen)
Container um das Formular → unter Erweitert → CSS-Klassen: submit-lock
Variante 2
Direkt im Formular-Widget die Klasse setzen
Das Snippet
<script>
window.addEventListener('DOMContentLoaded', function() {
var requiredInputs = document.querySelectorAll('.submit-lock form [required]'),
checkBoxInputs = document.querySelectorAll('.submit-lock form input[type="checkbox"][required]'),
formSubmits = document.querySelectorAll('.submit-lock form button[type="submit"]');
const disableSubmitButtons = function() {
for (const submit of formSubmits) {
submit.setAttribute('disabled', '');
submit.style.opacity = '0';
submit.style.backgroundColor = '#615f5f';
}
};
const enableSubmitButtons = function() {
for (const submit of formSubmits) {
submit.removeAttribute('disabled');
submit.removeAttribute('style');
}
};
const hasEmptyRequiredInputs = function() {
for (const input of requiredInputs) {
if (input.value === '') return true;
}
return false;
};
const hasUncheckedRequiredCheckboxes = function() {
for (const input of checkBoxInputs) {
if (!input.checked) return true;
}
return false;
};
const checkFormStatus = function() {
(!hasEmptyRequiredInputs() && !hasUncheckedRequiredCheckboxes())
? enableSubmitButtons()
: disableSubmitButtons();
};
disableSubmitButtons();
requiredInputs.forEach(function(elem) {
elem.addEventListener('input', checkFormStatus);
elem.addEventListener('change', checkFormStatus);
});
checkBoxInputs.forEach(function(elem) {
elem.addEventListener('change', checkFormStatus);
});
});
jQuery(document).ready(function($){
$(document).on('submit_success', function(){
$('.submit-lock .e-form__buttons button')
.css("opacity", "0.5")
.css("background-color", "rgb(97, 95, 95)")
.attr("disabled", "disabled");
});
});
</script>Technische Erklärung
Das Script arbeitet vollständig im Frontend mit JavaScript.
- Es selektiert alle required Felder innerhalb von .submit-lock
- Prüft kontinuierlich den Zustand der Inputs
- Aktiviert den Button nur, wenn alle Bedingungen erfüllt sind
- Nutzt zusätzlich das Elementor-Event submit_success, um nach dem Absenden den Button zu sperren
Wichtig:
Das ist keine serverseitige Validierung, sondern eine UX-Optimierung im Browser.
Typische Einsatzbereiche
- Kontaktformulare
- Angebots- oder Projektanfragen
- Terminbuchungen
- Formulare mit Pflicht-Checkbox (DSGVO)
- Lead-Formulare mit mehreren Feldern
Einbau des Codes
Du kannst das Snippet auf drei Arten einbauen:
- global über WPCodeBox / Code Snippets Plugin
- im Footer (Custom Code)
- lokal über ein HTML-Widget (nur für eine Seite)
Wenn du es global einsetzt, steuerst du die Aktivierung ausschließlich über die Klasse submit-lock.
Wichtiger Hinweis
Das Snippet ersetzt keine echte Validierung im Formular.
Elementor sollte weiterhin korrekt konfigurierte Pflichtfelder haben. Dieses Script sorgt lediglich dafür, dass der Benutzer den Button erst dann nutzen kann, wenn alle Felder ausgefüllt sind.
Fazit
Mit wenig Code erreichst du eine deutlich bessere Benutzerführung im Formular. Der Sende-Button wird erst dann aktiv, wenn alle Pflichtfelder erfüllt sind – genau so, wie es logisch erwartet wird.
Das Ganze funktioniert ohne zusätzliches Plugin, ist flexibel einsetzbar und lässt sich über die Klasse submit-lock gezielt steuern.