Styling der Formularbeschriftungen, damit sie neben den Feldern erscheinen

Möchten Sie ein kompakteres Formularlayout erstellen, indem Sie die Beschriftungen nebeneinander statt über den Feldern anzeigen? WPForms zeigt standardmäßig Beschriftungen über den Feldern an, aber Sie können dieses Layout einfach mit CSS ändern, um Beschriftungen und Felder nebeneinander anzuzeigen.

Diese Anleitung zeigt Ihnen, wie Sie dieses professionelle horizontale Layout erreichen.

Einrichtung Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen und die gewünschten Felder hinzufügen. Wenn Sie Hilfe benötigen, lesen Sie bitte diese Anleitung zum Erstellen Ihres ersten Formulars.

Sobald Sie Ihr Formular erstellt haben, klicken Sie auf Einstellungen » Allgemein, klicken Sie auf den Pfeil Erweitert, um diese Optionen zu öffnen. Dort fügen Sie im Feld Formular-CSS-Klasse die Klasse wpforms-inline-labels hinzu.

Diese CSS-Klasse ermöglicht es uns, bestimmte Formulare gezielt anzusprechen, anstatt alle Formulare auf Ihrer Website zu beeinflussen.

Hinzufügen der Beschriftungsformatierung

Nun ist es an der Zeit, den CSS-Code zu Ihrer Website hinzuzufügen. Wenn Sie nicht sicher sind, wie Sie CSS zu Ihrer Website hinzufügen, lesen Sie diese Anleitung zum Hinzufügen benutzerdefinierter CSS-Stile.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Nachdem Sie dieses CSS hinzugefügt haben, werden Ihre Formularbeschriftungen nun auf derselben Zeile wie Ihre Formularfelder angezeigt.

Das ist alles! Möchten Sie die Formularbeschriftungen so gestalten, dass sie innerhalb des Formularfeldes erscheinen? Sehen Sie sich unsere Anleitung an: So erstellen Sie ein Formular mit schwebenden Beschriftungen.

Häufig gestellte Fragen

F: Was ist, wenn ich dies auf alle meine Formulare anwenden möchte?

A: Wenn Sie dies für alle Ihre Formulare wünschen, verwenden Sie stattdessen dieses CSS und überspringen Sie den obigen Schritt beim Hinzufügen der Formular-CSS-Klasse. Dies wäre nicht notwendig, wenn Sie dies für alle Formulare anwenden möchten.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Das ist alles! Möchten Sie als Nächstes weitere Formular-Styling-Optionen erkunden? Werfen Sie einen Blick auf unsere Anleitung zum Styling des Submit-Buttons mit CSS.