Textfelder in Ihren Formularen gestalten

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 mit einfachem CSS leicht verbessern.

Diese Anleitung zeigt Ihnen, wie Sie verschiedene textbasierte Felder wie E-Mail, einzeiligen Text und Absatztext gestalten.

Einrichtung Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen. Für dieses Tutorial fügen wir die Felder Name, E-Mail, Einzeiliger Text und Absatztext hinzu.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Dokumentation zur Formularerstellung.

Benutzerdefinierte Stile hinzufügen

Sehen 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 benutzerdefiniertem CSS.

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: Macht den ersten Buchstaben jedes Wortes groß

Und das ist alles, was Sie brauchen, um die Gestaltung textbasierter Formularfelder anzupassen.

WPForms bietet jede Menge CSS-Tutorials. Warum schauen Sie nicht weitere CSS-Tutorials an, indem Sie unsere vollständige Liste ansehen. 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!

Wenn Sie spezielle Wünsche für weitere Tutorials zu CSS haben, können Sie uns gerne in der Facebook WPForms VIP Community anpingen!