Möchten Sie die Darstellung von Text in Ihren Formularfeldern anpassen? Von Schriftgrößen und -farben bis hin zur Textumwandlung können Sie die Textfelder Ihres Formulars mit einfachem CSS verbessern.
Diese Anleitung zeigt Ihnen, wie Sie verschiedene textbasierte Felder wie E-Mail, einzeiliger Text und Absatztext gestalten können.
Einrichten Ihres Formulars
Zunächst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen. In diesem Tutorial fügen wir die Felder Name, E-Mail, Einzeiliger Text und Absatztext hinzu.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte unsere Dokumentation zur Formularerstellung.
Hinzufügen von benutzerdefinierten Stilen
Sehen wir uns verschiedene Möglichkeiten zur Gestaltung Ihrer Textfelder an. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, sehen Sie sich bitte dieses Tutorial zum Hinzufügen von benutzerdefiniertem CSS an.
Textgröße
So ändern Sie die Größe von Text in Formularfeldern:
Für alle Formen
.wpforms-form input {
font-size: 20px !important;
}
Für ein bestimmtes Feld innerhalb eines bestimmten Formulars
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
Textfarbe
So ändern Sie die Farbe von Text in Formularfeldern:
Für alle Formen
.wpforms-form input {
color: #000000 !important;
}
Für ein bestimmtes Feld innerhalb eines bestimmten Formulars
#wpforms-999-field_1-container input {
color: #000000 !important;
}
Textumwandlung
Zur Steuerung der Großschreibung von Text:
Für alle Formen
.wpforms-form input {
text-transform: capitalize !important;
}
Für ein bestimmtes Feld innerhalb eines bestimmten Formulars
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
Verfügbare Werte für die Texttransformation:
- Kleinbuchstaben: Erzwingt, dass der gesamte Text klein geschrieben wird.
- Großbuchstaben: Erzwingt, dass der gesamte Text in Großbuchstaben geschrieben wird.
- Großschreiben: Großschreibung des ersten Buchstabens eines jeden Wortes
Das ist alles, was Sie brauchen, um das Styling von textbasierten Formularfeldern anzupassen.
WPForms hat eine Menge von CSS-Tutorials. Warum nicht überprüfen, andere CSS-Tutorials durch unsere vollständige Liste zu sehen. Wir aktualisieren diese regelmäßig, also schauen Sie immer mal wieder rein. Aber wenn Sie für mehr spezifische CSS how-to Informationen suchen, bitte unsere WPForms VIP Circle beitreten und fragen Sie uns dort!
Wenn Sie spezielle Wünsche haben, um zu sehen, mehr Tutorials auf CSS, fühlen Sie sich frei, ping uns innerhalb der Facebook WPForms VIP Community!