### [Formatierung von Textfeldern in Ihren Formularen](https://wpforms.com/developers/how-to-customize-the-styling-of-text-based-form-fields/)
**Veröffentlicht:** 4. Februar 2022
**Autor:** Umair Majeed
**Auszug:** Dieses Tutorial zeigt Ihnen verschiedene Möglichkeiten, textbasierte Formularfelder mit CSS zu gestalten, von der Änderung der Farbe und Größe bis hin zur Erzwingung von Klein- oder Großbuchstaben.
**Inhalt:**
Möchten Sie anpassen, wie Text in Ihren Formularfeldern angezeigt wird? Von Schriftgrößen und Farben bis hin zur Texttransformation können Sie die Textfelder Ihres Formulars ganz einfach mit einfachem CSS verbessern.
Diese Anleitung zeigt Ihnen, wie Sie verschiedene textbasierte Felder wie E-Mail, einzeiliger Text und Paragraphentext gestalten.
Dieses Handbuch behandelt nicht das Rich-Text-Editor-Feld, da es so konzipiert ist, dass es von den Benutzern des Formulars gesteuert wird.
## Einrichten Ihres Formulars
Erstellen Sie zuerst Ihr Formular und fügen Sie Ihre Felder hinzu. Für dieses Tutorial fügen wir die Felder **Name**, **E-Mail**, **einzeiliger Text** und **Paragraphentext** hinzu.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere [Dokumentation zur Formularerstellung](https://wpforms.com/docs/creating-first-form/).
Wenden Sie diese CSS-Stile nicht auf Passwortfelder an. Andernfalls wird die Funktion zur Passwortstärke beeinträchtigt und die Formularübermittlung möglicherweise verhindert.
## Hinzufügen von benutzerdefinierten Stilen
Schauen wir uns verschiedene Möglichkeiten an, Ihre Textfelder zu gestalten. Hilfe beim Hinzufügen von CSS zu Ihrer Website finden Sie in diesem Tutorial zum [Hinzufügen von benutzerdefinierten CSS-Stilen](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Wenn Sie bestimmte Formulare oder Felder ansprechen, müssen Sie **-999** durch Ihre tatsächliche Formular-ID und Feld-IDs ersetzen. Wenn Sie Hilfe beim Auffinden dieser IDs benötigen, lesen Sie bitte unsere Anleitung zum [Auffinden von Formular- und Feld-IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Textgröße
Um die Größe des Textes in Formularfeldern zu ändern:
###### Für alle Formulare
```
.wpforms-form input {
font-size: 20px !important;
}
```
###### Für ein bestimmtes Feld in einem bestimmten Formular
```
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
```
#### Textfarbe
Um die Farbe des Textes in Formularfeldern zu ändern:
###### Für alle Formulare
```
.wpforms-form input {
color: #000000 !important;
}
```
###### Für ein bestimmtes Feld in einem bestimmten Formular
```
#wpforms-999-field_1-container input {
color: #000000 !important;
}
```
#### Texttransformation
Um die Groß-/Kleinschreibung von Text zu steuern:
###### Für alle Formulare
```
.wpforms-form input {
text-transform: capitalize !important;
}
```
###### Für ein bestimmtes Feld in einem bestimmten Formular
```
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
```
Verfügbare **text-transform**-Werte:
- **lowercase**: Erzwingt die Umwandlung aller Texte in Kleinbuchstaben
- **uppercase**: Erzwingt die Umwandlung aller Texte in Großbuchstaben
- **capitalize**: Wandelt den ersten Buchstaben jedes Wortes in einen Großbuchstaben um
Und das ist alles, was Sie brauchen, um die Gestaltung von textbasierten Formularfeldern anzupassen.
WPForms bietet viele CSS-Tutorials. Warum nicht [weitere CSS-Tutorials in unserer vollständigen Liste ansehen](https://wpforms.com/developers/tags/css/ "WPForms Developer CSS-Snippets"). Wir aktualisieren diese regelmäßig, also schauen Sie immer wieder vorbei. Wenn Sie jedoch spezifischere CSS-Anleitungen suchen, [treten Sie unserem WPForms VIP Circle bei und fragen Sie uns dort](https://www.facebook.com/groups/wpformsvip "Treten Sie dem WPForms VIP Circle für schnelle Tipps und Anleitungen bei")!
Wenn Sie spezielle Wünsche haben, mehr Tutorials zu CSS zu sehen, können Sie uns gerne in der [Facebook WPForms VIP Community](https://www.facebook.com/groups/wpformsvip "Facebook WPForms VIP Community") ansprechen!
**Kategorien:** Styling
**Tags:** CSS
---