So passen Sie den Abstand zwischen Formularfeldern in WPForms an

Abstand ist ein entscheidender Teil des Formular-Designs, und in WPForms wird der Abstand zwischen Feldern, Titeln und anderen Aspekten standardmäßig so eingestellt, dass er den Besuchern Ihrer Website das optimale Erlebnis bietet.

Allerdings ist jede Website einzigartig. Wenn Sie also benutzerdefinierte Abstände zwischen Feldern einstellen möchten, um sie besser an Ihren spezifischen Stil anzupassen, sind Sie hier genau richtig.

In diesem Artikel zeige ich Ihnen Schritt für Schritt, wie Sie Abstände zwischen Feldern in WPForms erzwingen können. Obwohl Sie hier mit etwas Code arbeiten müssen, benötigen Sie keine Vorkenntnisse im Programmieren, um meiner Methode zu folgen.

So passen Sie den Abstand zwischen Formularfeldern in WPForms an

Jede Abstandsänderung in dieser Anleitung folgt der gleichen Form. Sie entscheiden, welchen Teil des Formulars Sie verschieben möchten, kopieren die entsprechende CSS-Anweisung und wählen dann aus, wo Sie sie einfügen möchten, je nachdem, ob die Änderung eine Seite, ein Formular oder jedes Formular auf Ihrer Website betreffen soll.

Schritt 1: Installieren Sie das WPForms-Plugin

Für alle, die neu anfangen: WPForms ist ein Drag-and-Drop-Formularersteller mit über 2.100 fertigen Vorlagen, sodass Sie normalerweise mit etwas beginnen können, das dem gewünschten Ergebnis nahe kommt, anstatt mit einer leeren Leinwand.

Wenn Sie noch nie zuvor eines erstellt haben, ist diese Anleitung zum Erstellen eines einfachen Kontaktformulars der schnellste Weg. Was mir an WPForms für diese spezielle Aufgabe am besten gefällt, ist, wie viel Sie ändern können, bevor Sie überhaupt Code anfassen.

Die visuellen Stilkontrollen kümmern sich um Farben, Rahmen, Feldgrößen und Container-Abstände, was überraschend viel von dem abdeckt, von dem die Leute annehmen, dass es CSS erfordert.

Kaufen Sie zunächst die Pro-Lizenz. Installieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie dieser Anleitung, wie Sie ein Plugin zu WordPress hinzufügen.

Upgrade auf WPForms Pro jetzt!

Für die folgenden Beispiele verwende ich diese fertige Umfrageformularvorlage, die genügend Felder enthält, um Abstandsänderungen offensichtlich zu machen.

Schritt 2: Probieren Sie zuerst die integrierten Abstandssteuerungen aus

Bevor Sie CSS schreiben, sollten Sie prüfen, ob die visuellen Steuerelemente bereits das tun, was Sie möchten. Öffnen Sie Ihr Formular und gehen Sie zu Einstellungen » Themen im Builder, oder klicken Sie auf das Formular im Block-Editor, um dasselbe Panel dort zu öffnen.

Drei dieser Einstellungen ändern den Abstand direkt:

• Feldstile » Größe: Dies ändert die Feldhöhe und, was hier nützlicher ist, den Abstand zwischen einer Beschriftung und ihrem Eingabefeld. Schaltet zwischen Klein, Mittel und Groß.
• Beschriftungsstile » Größe: Passt die Größe des Beschriftungstextes an, wodurch sich der Platz verschiebt, den jede Beschriftung über ihrem Feld einnimmt.
• Containerstile » Abstände: Legt den Platz innerhalb des äußeren Rands des Formulars fest. Erhöhen Sie ihn, wenn das Formular sich angepresst an einen Hintergrund oder Rand anfühlt.

Es gibt hier jedoch eine ehrliche Einschränkung zu beachten, da keine dieser Steuerelemente den vertikalen Abstand zwischen einer Feldzeile und der nächsten festlegt, was die häufigste Sache ist, die die Leute ändern möchten.

Dieser Abstand ist mit 15 Pixeln oberhalb und unterhalb jedes Feldes fest vorgegeben, und CSS ist der einzige Weg, ihn zu ändern. Wenn die integrierten Steuerelemente Sie nah genug herangebracht haben, können Sie hier aufhören. Wenn die Zeilen selbst immer noch zu eng oder zu locker sind, lesen Sie weiter.

Schritt 3: Kopieren Sie den CSS-Code für den gewünschten Abstand

Jeder der folgenden Code-Schnipsel gibt es in zwei Formen: eine, die für jedes WPForms-Formular auf Ihrer Website gilt, und eine, die ein einzelnes Formular anhand seiner ID anspricht, was Sie möchten, wenn ein Formular einen anderen Abstand als die anderen benötigt.

Um die ID eines Formulars zu finden, gehen Sie zu WPForms » Alle Formulare und bewegen Sie den Mauszeiger über den Formularnamen. Oder Sie können auch das spezifische Formular öffnen, auf Einbetten klicken und den Shortcode des Formulars direkt aus dem Builder kopieren.

WPForms wendet bereits seine eigenen Stile auf diese Elemente an, daher benötigen Sie oft !important, damit Ihre Werte Vorrang haben. Ich habe es in den folgenden Snippets aufgenommen, wo es wirklich benötigt wird.

Abstand zwischen Feldern (vertikaler Abstand)

Dies ist das, wonach die meisten Leute suchen. WPForms gibt jedem Feld einen oberen und unteren Abstand von 15 Pixeln, sodass benachbarte Felder 30 Pixel voneinander entfernt sind. Hier ist der Standardabstand in meinem Umfrageformular:

Um ihn für alle Ihre Formulare zu ändern:

.wpforms-container .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Erhöhen Sie beide Werte, um die Felder gleichmäßig auseinanderzuschieben, oder verringern Sie sie, um das Formular zu straffen. Wenn Sie nur den Abstand in eine Richtung vergrößern möchten, setzen Sie nur padding-top und lassen Sie den unteren Wert unverändert.

Für ein einzelnes Formular fügen Sie die ID hinzu:

#wpforms-2294 .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Abstand unter dem Formular-Titel

Standardmäßig befindet sich die H1-Überschrift Ihrer Seite über dem Formular und nicht darin. WPForms fügt 35 Pixel unter dem Formular-Titel ein, bevor das erste Feld beginnt.

Das ist deutlich mehr als der Abstand zwischen den Feldern, was beabsichtigt ist, da der Titel eine Überschrift ist und Überschriften mehr Platz verdienen als der Inhalt darunter.

Wenn Sie möchten, dass der Titel im Formularcontainer enthalten ist, klicken Sie im Editor auf das eingebettete Formular und aktivieren Sie im rechten Bereich Titel anzeigen.

Sie möchten wahrscheinlich die Seiten-H1-Überschrift ausblenden, damit der Titel nicht zweimal erscheint. Klicken Sie auf die H1 und drücken Sie das Augensymbol, das erscheint.

Hier ist der Abstand des Titels vor allen Änderungen:

Um ihn zu steuern, setzen Sie den Container-Abstand auf Null und den Titel-Rand auf den gewünschten Wert:

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

.wpforms-container-full .wpforms-title {
	margin-bottom: 15px !important;
}

Lassen Sie padding-bottom auf 0 und ändern Sie nur margin-bottom.

Wenn Sie ihn auf 15 Pixel setzen, befindet sich der Titel im gleichen Abstand zum ersten Feld wie die Felder zueinander.

Das sieht ordentlich aus, wenn das Formular als einheitlicher Block erscheinen soll. Und hier ist das Ergebnis in meinem Umfrageformular:

Die Version für ein einzelnes Formular, mit dem # bei beiden Selektoren:

#wpforms-2294 .wpforms-head-container {
	padding-bottom: 0 !important;
}

#wpforms-2294 .wpforms-title {
	margin-bottom: 15px !important;
}

Abstand zwischen einem Label und seinem Feld

Dieser Abstand verwirrt die Leute, weil er wie ein Feldabstand aussieht, aber separat gesteuert wird.

Mit modernem Markup setzt WPForms ihn über eine CSS-Variable namens --wpforms-field-size-input-spacing, die standardmäßig auf 15 Pixel eingestellt ist.

Das Überschreiben der Variable ist sauberer, als direkt den Label-Rand zu bekämpfen, da es die eigene Größenlogik von WPForms intakt hält:

.wpforms-container-full {
	--wpforms-field-size-input-spacing: 8px;
}

Reduzieren Sie ihn auf etwa 8 Pixel, und jedes Label rückt näher an seine Eingabe heran, was die beiden visuell miteinander verbindet.

Das ist bei längeren Formularen wirklich nützlich, da ein enger Abstand zwischen Label und Feld in Kombination mit größeren Abständen zwischen den Zeilen die Zuordnung von Labels zu Feldern erheblich erleichtert.

Wenn Sie für diese Einstellung keine CSS-Änderungen vornehmen möchten, ändert die Steuerung Feldstile » Größe aus Schritt 2 dieselbe Variable.

Abstand zwischen nebeneinander liegenden Feldern

Wenn Sie Felder mithilfe des Layout-Felds oder der Spaltenklassen von WPForms nebeneinander platzieren, werden sie durch eine 20-Pixel-Gosse getrennt. Die Änderung erfordert etwas Sorgfalt, da die Gosse aus zwei Werten besteht, die übereinstimmen müssen.

Jede halbe Spalte ist auf calc(50% - 10px) mit einem linken Rand von 20 Pixeln eingestellt. Ändern Sie nur den Rand, und Ihre Spalten werden ihren Zeilen überlaufen. Passen Sie beides zusammen an:

.wpforms-container .wpforms-one-half {
	width: calc(50% - 20px) !important;
	margin-left: 40px !important;
}

Die Regel lautet, dass die Breiten subtraktion die Hälfte Ihrer Spaltenbreite betragen sollte. Eine Spaltenbreite von 40px bedeutet eine Subtraktion von 20px, eine Spaltenbreite von 30px bedeutet eine Subtraktion von 15px und so weiter.

Weitere Informationen zum Erstellen dieser Zeilen finden Sie im Leitfaden zu mehrspaltigen Formularlayouts.

Abstand über dem Senden-Button

Moderne Markup-Steuerelemente steuern den oberen Rand des Submit-Buttons mit ihrer eigenen Variable --wpforms-button-size-margin-top, die standardmäßig auf 10px gesetzt ist und auf meinem Formular wie folgt aussieht:

Sie können also Ihren eigenen Wert dafür festlegen und alles andere unverändert lassen:

.wpforms-container-full {
	--wpforms-button-size-margin-top: 30px;
}

Dem Button mehr Platz zu geben als den Feldern ist normalerweise die richtige Entscheidung, da dies die Aktion von den auszufüllenden Dingen trennt und der Unterschied sofort sichtbar ist:

Reduzieren oder Entfernen von zusätzlichem Platz

Nun funktioniert alles oben Genannte umgekehrt, und das Schließen von Lücken ist eine ebenso häufige Anforderung wie das Öffnen. Um die Zeilen zu straffen, nehmen Sie den Feld-Abstand unter seinem Standardwert von 15px:

.wpforms-container .wpforms-field {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

Wenn sich die Lücke, mit der Sie kämpfen, eher zwischen dem Formular und dem umgebenden Inhalt befindet als innerhalb des Formulars, ist normalerweise der Container und nicht die Felder der Schuldige. Setzen Sie den Container-Abstand auf Null und entfernen Sie den Titelabstand:

.wpforms-container-full {
	--wpforms-container-padding: 0px;
}

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

Seien Sie vorsichtig, wenn Sie zu eng werden, denn sobald die Zeilen enger beieinander liegen als der Abstand zwischen einem Label und seinem eigenen Feld, beginnen die Leute falsch zu lesen, welches Label zu welchem Eingabefeld gehört, und das zeigt sich als schlechte Daten und nicht als Beschwerden. Ich würde mindestens 8px Abstand auf jedem Feld lassen.

Schritt 4: Wählen Sie aus, wo Sie Ihr CSS hinzufügen möchten

Dieselbe CSS verhält sich je nachdem, wo Sie sie einfügen, unterschiedlich, und die Wahl des richtigen Ortes erspart Ihnen, sich auf jeder Seite zu wiederholen oder versehentlich Formulare neu zu gestalten, die Sie unverändert lassen wollten.

Wo Sie es hinzufügen	Was es beeinflusst
WPForms Builder	Dieses eine Formular, überall, wo es eingebettet ist
Block-Editor	Diese eine Einbettung, auf dieser einen Seite
WPCode	Jedes Formular auf Ihrer Website

Methode 1: Der WPForms Builder

Öffnen Sie Ihr Formular und gehen Sie zu Einstellungen » Themes, dann wechseln Sie zum Tab Erweitert. Dort finden Sie ein Feld für Benutzerdefiniertes CSS. Fügen Sie Ihren Snippet ein und klicken Sie dann auf Speichern.

Hier hinzugefügte Stile werden mit dem Formular selbst gespeichert, sodass sie es zu jeder Seite begleiten. Das gilt, egal ob Sie es mit dem WPForms-Block, dem Shortcode oder dem Divi-Modul einbetten.

Für die meisten Leute ist dies die richtige Standardeinstellung, da sie eine Änderung anstelle einer Änderung pro Seite bedeutet. Die vollständige Auswahl an Optionen wird in der Dokumentation zu Styling Ihrer Formulare im Formular-Builder behandelt.

Methode 2: Der Block-Editor

Klicken Sie auf den Formularblock auf Ihrer Seite oder in Ihrem Beitrag, um das Styling-Panel auf der rechten Seite zu öffnen, dann öffnen Sie den Abschnitt Erweitert und fügen Sie Ihr CSS dort hinzu.

Veröffentlichen oder aktualisieren Sie die Seite, um es anzuwenden. Der Unterschied hier ist die Reichweite, da alles, was Sie im Block-Editor hinzufügen, nur diese spezifische Einbettung betrifft.

Sie können ein Kontaktformular website-weit mit großzügigen Abständen auf einer speziellen Kontaktseite und engeren Abständen in einer Seitenleiste ausführen, ohne das Formular zu duplizieren.

Beachten Sie, dass dieses Panel nur für Formulare angezeigt wird, die mit dem WPForms-Block eingebettet sind. Ein Formular, das per Shortcode eingefügt wurde, hat es nicht. Die Dokumentation zum Styling Ihrer Formulare im Block-Editor behandelt die übrigen Steuerelemente.

Methode 3: WPCode (Webseitenweit)

Die beiden oben genannten Methoden sind auf ein einzelnes Formular oder eine einzelne Einbettung beschränkt, was genau das ist, was Sie die meiste Zeit wollen. Aber wenn Sie die Abstände für ein Dutzend Formulare standardisieren, ist es besser, sie einmal sitewide einzustellen, als jedes einzelne zu öffnen.

Sitewide CSS überlebt auch einen Theme-Wechsel, was CSS, das über den Customizer Ihres Themes hinzugefügt wurde, nicht tut. WPCode ist ein kostenloses Plugin, das dies vereinfacht. Gehen Sie in Ihrem WordPress-Admin-Menü zu Plugins » Neu hinzufügen.

Suchen Sie nach WPCode und klicken Sie dann in den Ergebnissen auf Jetzt installieren. Sobald die Installation abgeschlossen ist, ändert sich die Schaltfläche zu Aktivieren. Klicken Sie darauf.

Wenn WPCode aktiv ist, gehen Sie zu Code-Snippets » + Snippet hinzufügen.

Klicken Sie unter der Option Benutzerdefinierten Code hinzufügen (Neues Snippet) auf Snippet verwenden.

Geben Sie Ihrem Snippet einen Namen und wählen Sie dann CSS-Snippet aus dem Dropdown-Menü für den Code-Typ. Dies ist wichtig, da WPCode den Code nicht korrekt anwendet, wenn er immer noch auf PHP eingestellt ist.

Fügen Sie Ihr CSS ein und lassen Sie die Einfügungseinstellungen unter der Code-Vorschau auf den Standardwerten. Keines der Snippets in dieser Anleitung benötigt etwas anderes.

Speichern Sie das Snippet und aktivieren Sie es dann mit dem Schalter oben rechts. Auf Ihrer Website ändert sich nichts, bis dieser Schalter aktiviert ist, was fast jedem beim ersten Mal passiert.

Da dies für jedes Formular gilt, verwenden Sie die Formular-ID-Version Ihres Snippets, wenn Sie einige ausschließen möchten. Sie können auch Ihren eigenen Klassennamen zu bestimmten Feldern hinzufügen und diese stattdessen ansprechen, was in der Dokumentation zu benutzerdefinierten CSS-Klassen behandelt wird.

Wie viel Abstand sollten Sie zwischen Formularfeldern einfügen?

Das Hauptprinzip ist Nähe, was bedeutet, dass ein Label näher an seinem eigenen Feld sitzen sollte, als dieses Feld zum nächsten sitzt.

Gleiche Abstände überall lassen die Leute raten, welches Label zu welcher Box gehört, und genau deshalb ist die Variable Label-zu-Feld standardmäßig auf 15px eingestellt, während benachbarte Felder 30px Abstand haben.

Eine gängige Richtlinie unter Designsystemen ist, Felder mit 50 % bis 75 % der Feldhöhe zu beabstanden. WPForms-Felder sind 43 Pixel hoch bei der Größe Mittel, was den empfohlenen Bereich auf etwa 21px bis 32px bringt.

Der Standardwert von 30px liegt bequem darin, also wenn Sie unsicher sind, ob Sie etwas ändern sollen, lautet die Antwort wahrscheinlich nein. Ein paar weitere Dinge, die es wert sind, beachtet zu werden:

• Geben Sie Abschnitten mehr Raum als Feldern: Wenn ein Formular verschiedene Gruppen wie Kontaktdetails und Zahlungsdetails hat, verdoppeln oder verdreifachen Sie den Abstand zwischen den Gruppen, damit die Struktur auf einen Blick sichtbar ist.
• Halten Sie Mobil- und Desktop-Ansicht konsistent: WPForms kümmert sich bereits um responsive Abstände, also widerstehen Sie dem Hinzufügen von mobil-spezifischen Abständen, es sei denn, etwas ist wirklich kaputt.
• Ändern Sie jeweils einen Wert: Abstandsprobleme sind normalerweise auf einen Übeltäter zurückzuführen, nicht auf fünf. Passen Sie den Feldabstand an, betrachten Sie das Formular und fahren Sie dann fort.

Weitere Informationen zur Designseite finden Sie in unserem Leitfaden zu den Best Practices für das Formular-Design, der sich eingehender mit Layout und Feldreihenfolge befasst.

FAQs zu Formularabständen in WPForms

Der Formularabstand in WPForms wird im Support häufig angesprochen, meist im Zusammenhang mit zu großen Lücken oder CSS, das nicht greift. Hier sind die Fragen, die ich am häufigsten sehe.

Wie reduziere ich den Abstand zwischen Feldern in WPForms?

Verringern Sie den Feldabstand unter dem Standardwert von 15 Pixel. Verwenden Sie .wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; } und passen Sie es von dort aus an. Behalten Sie mindestens 8 Pixel bei, damit die Labels visuell mit ihren eigenen Eingabefeldern verbunden bleiben.

Warum gibt es so viel Platz zwischen meinen Formularfeldern?

Jedes Feld hat oben und unten einen Abstand von 15 Pixel, sodass benachbarte Felder 30 Pixel voneinander entfernt sind, bevor Ihr Theme etwas hinzufügt. Wenn der Abstand größer erscheint, wendet Ihr Theme wahrscheinlich eigene Abstände auf Formularelemente oder Absätze innerhalb des Formularcontainers an.

Kann ich den Formularabstand ohne CSS ändern?

Teilweise. Feldstile » Größe ändert den Abstand zwischen Label und Feld, und Containerstile » Abstand ändert den Abstand innerhalb des Formularrands, beides ohne Code. Der vertikale Abstand zwischen den Feldzeilen hat keine visuelle Steuerung, daher benötigt dieser CSS.

Wie füge ich Abstand zwischen zwei Feldern in derselben Zeile hinzu?

Nebeneinander liegende Felder verwenden eine 20-Pixel-Rinne, die aus einer calc()-Breite und einem passenden linken Rand besteht. Ändern Sie beides zusammen, wobei die Breitenreduzierung die Hälfte der Rinne betragen sollte, sonst laufen die Spalten aus ihrer Zeile heraus.

Warum funktioniert mein CSS für Abstände nicht?

Meistens fehlt ein # bei einem Formular-ID-Selektor oder die eigenen Stile von WPForms haben Vorrang. Fügen Sie !important vor dem Semikolon hinzu und bestätigen Sie, dass Ihr Selektor mit dem Formular übereinstimmt. Unser Leitfaden zur Fehlerbehebung bei nicht funktionierendem CSS behandelt den Rest.

Wie zentriere ich ein Formular in WPForms?

Das ist eher eine Frage der Containerbreite als des Abstands, daher helfen die hier aufgeführten Snippets nicht. Das Festlegen einer max-width für den Formularcontainer mit margin: 0 auto ist der übliche Ansatz.

Als Nächstes: Passen Sie den Rest Ihres Formular-Designs an

Der Abstand zwischen Feld und Label ist einer der wenigen Teile des Formular-Designs, der immer noch von ein oder zwei Zeilen CSS profitiert, aber fast alles andere ist Point-and-Click im selben Einstellungen » Themes-Panel, das Sie oben verwendet haben. Unser Leitfaden zum Styling von Formularen mit dem Block-Editor führt durch die vollständige Steuerung.

Wenn Sie das Layout überdenken und nicht nur den Abstand, dann behandelt Gestaltung von Formularlayouts die Spaltenstruktur und Feldreihenfolge, und wie man Kontaktformulare in WordPress stylt ist eine gute Lektüre für Kontaktformulare im Speziellen.

Gestalten Sie jetzt Ihre WordPress-Formulare

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.