Wenn du ein Formular mit Elementor erstellst, möchtest du möglicherweise die Anzahl der Zeichen in bestimmten Feldern begrenzen. Das ist besonders nützlich, um sicherzustellen, dass Nutzer nicht zu lange Texte eingeben. In diesem Tutorial zeigen wir dir, wie du mit einfachem JavaScript eine Zeichenbegrenzung für ein Elementor-Formularfeld setzt.
Schritt 1: Elementor Formular erstellen
Falls du noch kein Formular mit Elementor erstellt hast, folge diesen Schritten:
- 1. Öffne den Elementor-Editor.
- 2. Ziehe das Formular-Widget auf deine Seite.
- 3. Füge ein Textfeld oder einen Textbereich hinzu, das begrenzt werden soll.
- 4. Wechsel auf den Reiter "Erweitert" deines Textfeldes oder Textbereich und vergebe eine eindeutige ID. In unserem Beispiel wollen wir eine Zeichenbegrenzung am Textfeld vornehmen. Wir vergeben dem Textfeld in unserem Beispiel die ID "message".
Schritt 2: Die Zeichenbegrenzung per JavaScript setzen
Elementor bietet keine direkte Möglichkeit, Zeichenlimits festzulegen. Deshalb fügen wir ein benutzerdefiniertes Skript ein, das die Eingaben begrenzt. So geht’s:
- 1. Füge ein HTML-Widget unterhalb des Formulars ein.
- 2. Kopiere den folgenden Code und füge ihn in das HTML-Widget ein:
<script>
jQuery(document).ready(function($) {
// ID des Feldes in die eckige Klammer eingeben
var textField = $('[name="form_fields[ID-DES-FELDES]"]');
if (textField.length) {
textField.on('input', function() {
var text = textField.val();
// Begrenze die Eingabe auf 190 Zeichen
if (text.length > 190) {
text = text.substring(0, 190);
textField.val(text);
}
});
}
});
</script>
- 3. In Zeile 4 muss nun in der eckige Klammer die ID des Formular Textfeldes eingefügt werden. In unserem Beispiel wäre dies die ID "message".
- 4. In Zeile 11 und 12 muss nun das gewünschte Zeichenlimit hinterlegt werden. In unserem Fall wäre das 190.
Schritt 3: Speichern und testen
Nachdem du das Skript eingefügt und angepasst hast, solltest du das Formular testen:
- 1. Speicher die Änderungen deiner Seite.
- 2. Öffne die Seite und gib in das Textfeld mehr als 190 Zeichen ein.
- 3. Überprüfe, ob das Feld automatisch auf 190 Zeichen begrenzt wird.
Falls das Skript nicht sofort funktioniert, stelle sicher, dass:
- Die ID des Textfeldes stimmt mit der in Zeile 4 des Skriptes hinterlegen ID in der eckige Klammer überein.
- jQuery auf deiner Seite geladen ist (Elementor lädt es standardmäßig mit).
- Ein Caching Plugin die Ausführung des Skriptes nicht blockiert (z.B. zum Beispiel durch verzögertes Laden von JavaScripts in WP-Rocket).
Fazit
Mit diesem einfachen JavaScript-Code kannst du problemlos ein Zeichenlimit für Elementor-Formulare setzen. Dadurch hast du mehr Kontrolle über die Benutzereingaben und kannst sicherstellen, dass keine zu langen Texte eingereicht werden.
Benötigst du Unterstützung?
Falls du Unterstützung benötigst oder weitere Skripte und Funktionen für dein Elementor-Formular suchst, stehe ich dir gerne zur Verfügung. Melde dich einfach bei mir, und ich helfe dir weiter. Ich freue mich darauf, dich bei der Umsetzung deiner Projekte zu unterstützen!
