Den Stil eines WordPress-Formulars anpassen: Kontrollkästchen, Breite, Button und RTL

Warum das Design eines WordPress-Formulars verrutscht

In den Foren von WordPress.org taucht die Frage jede Woche in verschiedenen Formen auf: Das Einwilligungskästchen nimmt 90 % der Breite ein, das dem Absende-Button hinzugefügte CSS ändert nichts auf der Website, Fehlermeldungen bleiben auf einer arabischen Website links ausgerichtet. Hinter diesen Symptomen folgt das Design eines WordPress-Formulars einer einfachen Regel: Es erbt alles, was das Theme vorgibt.

Ein Theme schreibt oft breit gefasste Regeln vor, wie etwa „alle Felder auf 100 % Breite“. Diese zielen auf Textfelder ab, betreffen aber auch Kontrollkästchen und Radio-Buttons. Das Formular fügt seine eigenen Regeln hinzu, und die spezifischere von beiden gewinnt – nicht unbedingt die, die als Letztes geschrieben wurde.

Bevor Sie etwas korrigieren, öffnen Sie die Seite im Browser, machen Sie einen Rechtsklick auf das betroffene Element und wählen Sie „Untersuchen“. Das Stil-Panel zeigt jede angewendete Regel, die Datei, in der sie deklariert ist, sowie Regeln, die durchgestrichen sind, weil eine andere gewonnen hat. Dort liegt in neun von zehn Fällen die Antwort.

Was nexya forms unterstützt

nexya forms ist ein Modul von nexya Pro, das auf nexya.dev verkauft und nach dem Kauf von Freemius bereitgestellt wird. Wie jedes nexya-Modul wird es über den Hub aktiviert, und solange es ausgeschaltet ist, läuft keines seiner Hooks auf der Website.

Das Modul wendet einen einheitlichen Stil auf alle Formulare der Website an. Sie müssen das Layout also nicht Formular für Formular überarbeiten, und ein später hinzugefügtes Formular sieht aus wie die anderen. Auch Dropdown-Menüs und der Datumsauswahl-Kalender erhalten ein eigenes Design, anstatt das rohe Browser-Aussehen beizubehalten, das sich von Gerät zu Gerät unterscheidet.

Seit Version 1.3.2 kann der Absende-Button vor und/oder nach seiner Beschriftung ein Icon enthalten: eines von sechzehn vorgeschlagenen Icons oder ein Bild aus der Mediathek. Das Icon ist zentriert zum Text ausgerichtet, und die Reihenfolge richtet sich nach Sprachen, die von rechts nach links geschrieben werden.

Gegen Spam bietet das Mail-Modul ein unsichtbares Captcha für die Formulare der Website. Es fügt weder ein Kontrollkästchen noch einen Rahmen hinzu, der gestaltet werden müsste: In dieser Hinsicht gibt es nichts zu stylen.

Das Einwilligungskästchen nimmt die volle Breite ein

Dies ist der häufigste Fall. Das Theme deklariert eine Breite von 100 % für Eingabefelder, ohne Kontrollkästchen auszuschließen. Das Ergebnis: Das Kästchen wird gedehnt, und der Text der Einwilligung wird in die nächste Zeile gedrückt oder überlagert.

Die Korrektur besteht darin, Kontrollkästchen und Radio-Buttons ihre natürliche Breite zurückzugeben, indem die Regel auf Ihre Formulare beschränkt wird, damit an anderer Stelle nichts kaputtgeht. Ermitteln Sie im Inspektor die Klasse oder ID des Formularcontainers und schreiben Sie eine Regel wie die folgende, wobei Sie den Selektor durch den von Ihnen ermittelten ersetzen:

• Container-Selektor gefolgt von input[type="checkbox"] und input[type="radio"]
• Eigenschaften: width: auto; und, falls erforderlich, flex: none;, wenn das Theme das Kästchen in einer Flexbox platziert
• Überprüfen Sie anschließend die Darstellung auf Smartphones, wo sich die Regeln des Themes oft ändern

Das Aussehen eines Formulars Schritt für Schritt ändern

1. 1

   Das Formular-Modul einschalten

   Schalten Sie nach der Installation von nexya Pro nexya forms über den Hub ein. Der gemeinsame Stil wird daraufhin auf alle Formulare der Website angewendet.

   
2. 2

   Das Symbol des Absende-Buttons hinzufügen

   Wählen Sie im Formular-Editor ein Symbol vor und/oder nach der Button-Beschriftung aus sechzehn Optionen aus oder nehmen Sie ein Bild aus der Mediathek.

   
3. 3

   Inspizieren, was noch schief steht

   Klicken Sie auf der veröffentlichten Seite mit der rechten Maustaste auf das falsch angezeigte Element und wählen Sie „Untersuchen“, um die gewinnende Theme-Regel und die Datei zu sehen, in der sie deklariert ist.

   
4. 4

   In CSS korrigieren, dann den Cache leeren

   Fügen Sie eine Regel, die auf den Formularcontainer beschränkt ist, zum zusätzlichen CSS hinzu (width: auto für Kontrollkästchen, text-align: start für RTL), leeren Sie den Seiten-Cache und überprüfen Sie das Ganze auf dem Computer und dem Smartphone.

   

Das CSS des Absende-Buttons wird nicht angewendet

Wenn eine dem Button hinzugefügte Regel auf der Website keine Wirkung zeigt, liefert der Inspektor die Ursache. Drei Situationen treten dabei häufig auf.

Die Regel ist durchgestrichen: Eine andere, spezifischere setzt sich durch. Fügen Sie den Selektor des Formularcontainers vor den des Buttons ein, um die Spezifität zu erhöhen. Verwenden Sie !important nur als letzten Ausweg, da dies spätere Korrekturen erschwert.

Die Regel taucht überhaupt nicht auf: Das CSS wird nicht geladen. Es wurde möglicherweise an der falschen Stelle platziert, oder eine alte Version der Seite wird von einem Cache ausgeliefert. Das zusätzliche CSS von WordPress befindet sich im Customizer für klassische Themes und im Site-Editor unter den Stilen für Block-Themes. Leeren Sie anschließend den Seiten-Cache und laden Sie die Seite ohne Browser-Cache neu.

Die Regel wird im Editor angewendet, aber nicht auf der Website: Die Vorschau des Editors und die öffentliche Seite laden nicht immer dieselben Stylesheets. Testen Sie Änderungen immer auf der veröffentlichten Seite.

Für ein Icon auf dem Button ist kein CSS mit nexya forms erforderlich: Die Einstellung existiert seit Version 1.3.2 und übernimmt die Zentrierung sowie die Reihenfolge bei RTL-Sprachen automatisch.

Die Breite des Formulars einstellen

Ein Formular nimmt die Breite des Blocks ein, der es enthält. Wenn es auf einem großen Bildschirm zu breit erscheint, ist es am saubersten, den Container statt jedes einzelne Feld zu begrenzen: eine maximale Breite (max-width) in Pixeln oder Zeichen sowie automatische Ränder (Margins) links und rechts, um es zu zentrieren.

Die bekannten Fakten zu nexya forms erwähnen keine dedizierte Breiteneinstellung. Dieses Limit wird daher im Layout selbst (Spalte, Blockgruppe, Builder-Sektion) oder durch eine CSS-Regel für den Container festgelegt.

Formulare auf Arabisch, Hebräisch oder Persisch (RTL)

Wenn sich die Website in einer Sprache befindet, die von rechts nach links geschrieben wird, fügt WordPress das Attribut dir=“rtl“ zur Seite hinzu. Gut geschriebene Elemente passen sich von selbst an. Diejenigen, die links bleiben, haben fast immer eine text-align: left-Regel oder eine links fixierte Positionierung, die vom Theme oder vom Formular vorgegeben wird.

Was nexya forms für RTL ankündigt, ist die Reihenfolge von Icon und Beschriftung auf dem Absende-Button. Es gibt keine angekündigte RTL-Einstellung für den Rest des Formulars und auch keine erweiterte Einstellung für Validierungsmeldungen. Wenn eine Fehlermeldung falsch ausgerichtet bleibt, muss dies über CSS korrigiert werden.

Die nachhaltigste Lösung besteht darin, left und right durch die logischen Werte start und end zu ersetzen (zum Beispiel text-align: start), die der Leserichtung der Sprache folgen. Andernfalls reicht eine Regel aus, die auf [dir="rtl"] gefolgt von dem Selektor der Nachricht beschränkt ist.

Die Regeln, die gewinnen, sind nicht die, die als Letztes geschrieben wurden, sondern die präzisesten.