Validation Error Header

Meldungen zu ungültigen Eingaben gestalten

Contact Form 7 kann die eingegebenen Daten eines Benutzers auf Gültigkeit prüfen. Darunter gehört die einfachste Prüfung von Pflichtfeldern, aber auch komplexere Prüfungen wie eine gültige E-Mail Adresse. Sollten Eingaben ungültig sein so verweigert Contact Form 7 den Versand und zeigt eine entsprechende Meldung an. Das Aussehen dieser Meldungen kann man mit CSS gestalten.

Im Standard wird die Meldung direkt unter dem jeweiligen Feld angezeigt. Hier wird der Text mit roter Schriftfarbe dargestellt.

Ungültige Eingabe ohne Formatierung:

Gültigkeitsfehler Formatierung
Das Standard Aussehen der Meldungen zu ungültigen Eingaben.

Um die Meldungen etwas deutlicher für den Benutzer sichtbar zu machen, kann man sich von folgenden Beispielen inspirieren lassen:

Andere Hintergrund- und Textfarbe:

span.wpcf7-not-valid-tip{
    background-color: red;
    color: white;
}

Ergebnis:

Validation Hintergund und Text
Meldungen mit anderer Farbe.

Abgerundeter Rahmen und zentrierter Text:

span.wpcf7-not-valid-tip{
    border: 3px solid;
    border-radius: 15px;
    text-align: center;
}

Ergebnis:

Validation abgerundet und zentriert
Meldungen mit abgerundetem Rahmen und zentriertem Text.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.