### [Formularfelder-Eingaben großschreiben](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/) **Veröffentlicht:** 9. Juni 2021 **Autor:** Redaktionsteam **Auszug:** Diese Anleitung zeigt Ihnen, wie Sie CSS zusammen mit JavaScript verwenden, um die zu großschreibenden Texte dynamisch anzuwenden, während das Feld ausgefüllt wird. **Inhalt:** ## Einführung Möchten Sie die Eingaben in Ihren WPForms-Formularen großschreiben? Sie können ganz einfach CSS und **text-transform** verwenden, um die Eingabewerte zu formatieren, aber der Eintrag wird so gespeichert, wie er eingegeben wurde. Mit einem kleinen JavaScript-Snippet können Sie in Echtzeit sicherstellen, dass diese Werte mit Großschreibung angezeigt und gespeichert werden. In dieser Anleitung führen wir Sie durch jeden Schritt, wie Sie dies erreichen können. ## Formular erstellen Zuerst müssen Sie Ihr Formular erstellen. Für diese Anleitung haben wir unserem Formular ein Feld für **Absatztext** und ein Feld für **Einzeiligen Text** hinzugefügt. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/creating-first-form/ "Erstellen Ihres ersten Formulars"). ## CSS-Klassenname hinzufügen Als Nächstes verwenden wir für jedes dieser Formularfelder eine CSS-Klasse, um das CSS auszulösen, das die CSS-Regel **text-transform** verwendet, die wir in einem anderen Schritt hinzufügen werden. Um die erforderliche CSS-Klasse hinzuzufügen, klicken Sie im Formular-Builder auf das Feld **Einzeiliger Text** und dann auf **Erweitert**. Unter **CSS-Klassen** fügen Sie **capitalize** hinzu und wiederholen diese Schritte auch für das Feld **Absatztext**. ## Implementierungsoptionen ### Nur CSS verwenden (optional) Dieses benutzerdefinierte CSS bedeutet, dass das Formularfeld großgeschrieben angezeigt wird, der Eintrag jedoch weiterhin die Feldwerte genau so anzeigt, wie sie eingegeben wurden. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, [lesen Sie bitte diese Anleitung](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu"). Kopieren Sie einfach dieses CSS und fügen Sie es auf Ihrer Website ein. ``` .capitalize { text-transform: capitalize; } ``` Wenn Sie sehen möchten, was die CSS-Eigenschaft `text-transform` noch verwenden kann, [lesen Sie die Dokumentation von Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). ### Nur JavaScript verwenden (empfohlen) Um die Eingabewerte von Formularfeldern während der Formularerstellung großzuschreiben und sicherzustellen, dass die Eintraginformationen mit der Großschreibung gespeichert werden, fügen wir ein kleines Skript hinzu, das das Feld sofort großschreibt, während der Text eingegeben wird. Wenn Sie Hilfe beim Hinzufügen von JavaScript zu Ihrer Website benötigen, [sehen Sie sich diese Anleitung an](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu"). ``` /* * Formularfeldtext großschreiben * * @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ */ function wpf_dev_capitalize() { ?> **Kategorien:** Anleitungen **Schlagwörter:** CSS, Javascript, JS, PHP ---