Verwalten von Feldfehlerzuständen und Hervorhebungseffekt

Mit Jotform lässt sich das Verhalten von Feldern bei Fehlern oder Interaktionen der Nutzer ganz einfach steuern. Jedes Formular verfügt über zwei integrierte Funktionen: den Fehlerstatus, der Nutzer darauf hinweist, wenn Pflichtfelder leer gelassen oder falsch ausgefüllt wurden, und den Hervorhebungseffekt, der ein Feld optisch hervorhebt, sobald es ausgewählt wird. Gemeinsam unterstützen diese Funktionen die Nutzer dabei, Formulare korrekt auszufüllen, und verbessern das gesamte Nutzererlebnis.

Hervorhebungseffekt

Fehlerzustand

Sie können beide Funktionen deaktivieren oder anpassen, um sie besser auf das Design Ihres Formulars abzustimmen und die allgemeine Benutzererfahrung zu verbessern.

Watch on youtube

How to Customize Highlight Effect and Error Messages in Jotform

So beheben Sie den Fehlerzustand

Wenn Sie die Standard-Fehlermeldungen von Jotform nicht verwenden möchten, können Sie diese mithilife von benutzerdefiniertem CSS ausblenden. So bleibt das Formular übersichtlich, während die Nutzer dennoch einen dezenten visuellen Hinweis erhalten. Gehen Sie dazu wie folgt vor:

1. Kopieren zuerst diesen Code:

.form-error-message {
    display: none;
}
.form-validation-error {
    box-shadow: none !important;
}
.form-line-error {
    background: none;
}

2. Klicken Sie dann im Formular-Generator auf das Farbroller-Symbol auf der rechten Seite der Seite, um den Formular-Editor zu öffnen.
3. Klicken Sie nun im Menü des Formular-Editor auf den Reiter Styles, scrollen Sie nach unten, fügen Sie den Code Sie das in Feld CSS-Code einfügen (Inject CSS Code) ein – und schon sind Sie fertig.

Das war’s! Dadurch werden Fehlermeldungen entfernt und Fehler im Formular stattdessen durch einen einfachen roten Rahmen hervorgehoben. So sieht das Ganze aus:

So deaktivieren Sie den Hervorhebungseffekt

Der Hervorhebungseffekt sorgt für eine dezente Hintergrundänderung, sobald ein feld ausgewählt wird. Wenn Sie Ihr Formular jedoch lieber schlicht und frei von Ablenkungen halten möchten, können Sie diese Funktion ganz einfach deaktivieren. So gehen Sie dabei vor:

1. Klicken Sie im Formular-Generator in der orangefarbenen Navigationsleiste oben auf der Seite auf Einstellungen.
2. Klicken Sie auf der Seite Formulareinstellungen auf Weitere Optionen anzeigen.

3. crollen Sie als Nächstes nach unten zum Dropdown-Menü Highlight-Effekt, wählen Sie Deaktiviert aus, und schon sind Sie fertig.

So passen Sie den Fehlerzustand an

Fehlermeldungen helfen Nutzern dabei, Fehler in Ihrem Formular schnell zu erkennen und zu beheben. Sie können das Erscheinungsbild dieser Meldungen an Ihren Stil anpassen und sie optisch hervorheben. Hier ist eine kurze Anleitung:

1. Klicken Sie im Formular-Generator auf das Farbrollen-Symbol oben rechts auf dem Bildschirm.

2. Klicken Sie dann im sich öffnenden Menü des Formular-Editor auf Erweiterter Designer.

3. Setzen Sie nun im Reiter Designer im Bereich Farbschema ein Häkchen bei Fehlerzustand simulieren, um zu sehen, wie die Darstellung während der Anpassung des Effekts aussieht.
4. Klicken Sie dann auf das Zahnradsymbol daneben.

5. Konfigurieren Sie als Nächstes im daraufhin angezeigten Bereich Error Styles (Fehlerstile) die folgenden Einstellungen:
6. Klicken Sie nun oben links auf der Seite auf das Diskettensymbol, um die Änderungen zu speichern – und schon sind Sie fertig!

So passen Sie den Hervorhebungseffekt an

Der Hervorhebungseffekt lässt Felder optisch hervortreten, sobald man darauf klickt. Sie können den Stil ganz einfach an das Design Ihres Formulars anpassen. Hier ist eine kurze Anleitung:

1. Klicken Sie im Formular-Generator auf das Farbrollen-Symbol oben rechts auf dem Bildschirm.

2. Klicken Sie dann im sich öffnenden Menü des Formular-Editor auf Erweiterter Designer.

3. Aktivieren Sie nun Reiter Designer im Bereich Farbschema das Kontrollkästchen vor Hervorhebung simulieren, um zu sehen, wie die Darstellung bei dar Anpassung eines Effekts aussieht.
4. Klicken Sie dann auf das Zahnradsymbol daneben.

5. Klicken Sie als Nächstes im daraufhin angezeigten Bereich Hervorhebungsstile auf Seite und legen Sie die Hervorhebungsfarbe fest.
6. Klicken Sie nun oben links auf der Seite auf das Diskettensymbol, um die Änderungen zu speichern – und schon sind Sie fertig.

Das war’s! Mit Diesen Optionen können Sie Fehlerzustände und Hervorhebungseffekte entfernen, deaktivieren oder vollständig anpassen. So gestalten Sie ein Formular, das nicht nur Ihren Vorstellungen entspricht, sondern Ihre Nutzer auch effektiv durch den Prozess führt. Ob Sie es schlicht halten oder optisch dynamischer gestalten möchten – diese Einstellungen geben Ihnen die volle Kontrolle über das Ausfüll-Erlebnis.