KI-Zusammenfassung
Abstände sind ein entscheidender Teil des Formulardesigns. In WPForms sind die Abstände zwischen Feldern, Titeln und anderen Aspekten standardmäßig so eingestellt, dass sie Ihren Website-Besuchern das optimale Erlebnis bieten.
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.
In diesem Artikel
Abstände zwischen Formularfeldern erzwingen
Bevor ich Ihnen den genauen Code zum Erzwingen von Abständen zwischen verschiedenen Formularkomponenten zeige, benötigen Sie die richtigen Plugins, um diese Aufgabe so einfach wie möglich zu gestalten.
Ersteinrichtung: Formularabstände mit Code
Beginnen wir mit der Installation der erforderlichen Plugins auf Ihrer Website.
Schritt 1: WPForms und WPCode installieren
Diese Methode funktioniert sowohl für die Lite- als auch für die Pro-Version von WPForms. Ich empfehle jedoch, WPForms Pro zu erwerben, da Sie damit Zugriff auf unzählige zusätzliche Styling-Optionen mit dem Block-Editor erhalten und für erweiterte Anpassungen keinen Code mehr benötigen.
Nach dem Kauf von WPForms Pro installieren Sie das Plugin auf Ihrer Website. Hier ist eine detaillierte Anleitung zur Installation von WPForms.
Als Nächstes benötigen Sie auch das WPCode-Plugin. Dies ist ein kostenloses Plugin, das das Hinzufügen von Code-Snippets zu Ihrer Website unglaublich einfach macht.
Die Installationsschritte sind ähnlich wie bei der Installation von WPForms, aber Sie können die kostenlose Version von WPCode direkt aus dem WordPress-Repository hinzufügen. Hier ist die Kurzfassung des Vorgangs.
Gehen Sie in Ihrem WordPress-Admin-Menü zu Plugin » Neu hinzufügen.
Dies bringt Sie zur Plugin-Seite. Verwenden Sie das Suchfeld auf der rechten Seite, um nach WPCode zu suchen. Wenn die Plugin-Liste auf Ihrem Bildschirm erscheint, klicken Sie auf die Schaltfläche Jetzt installieren daneben.
Die Installation dauert nur wenige Sekunden und die Schaltfläche „Installieren“ ändert sich zu „Aktivieren“. Drücken Sie die Schaltfläche Aktivieren, um die Installation des Plugins auf Ihrer Website abzuschließen.
Großartig! Da die notwendigen Plugins installiert sind, können wir nun mit der Anpassung der Abstände zwischen den verschiedenen Formularelementen fortfahren.
Schritt 2: Ein Formular erstellen und einbetten
Wenn Sie versuchen, die Abstände zwischen den Feldern in WPForms anzupassen, haben Sie wahrscheinlich bereits ein oder mehrere Formulare auf Ihrer Website erstellt und veröffentlicht.
Aber nur für den Fall, dass Sie dies noch nicht getan haben, können Sie dieser einfachen Anleitung zum Erstellen eines einfachen Kontaktformulars folgen.
Zu Demonstrationszwecken verwende ich diese fertige Umfrageformular-Vorlage.
Stellen Sie sicher, dass Sie Ihr Formular einbetten und veröffentlichen (oder zumindest eine Entwurfsversion davon in Ihrem WordPress-Editor speichern). Sie können die Abstände nur für ein Formular anpassen, das bereits auf Ihrer Website eingebettet ist.
Sie müssen auch die Formular-ID des Formulars kennen, dessen Abstände Sie anpassen möchten. Sie finden die Formular-ID ganz einfach, indem Sie zu WPForms » Alle Formulare gehen.
Die Formular-ID besteht ausschließlich aus Zahlen und wird in der Spalte Shortcode in Anführungszeichen angegeben. In meinem Fall ist die Formular-ID 2294.
Großartig! Aber Sie fragen sich vielleicht immer noch, wie Sie den Code einfügen, um den WPForms-Abstand zu ändern. Das werde ich als Nächstes beschreiben.
Schritt 3: Code für Formularabstände einfügen
Bevor Sie die Codes verwenden, ist es wichtig zu wissen, wie Sie neue Code-Snippets in Ihre WordPress-Website einfügen können. Sie müssen diesen Vorgang für jeden Code wiederholen, der den Abstand zwischen den Feldern in WPForms steuert.
Um ein neues Snippet hinzuzufügen, gehen Sie einfach zu Code Snippets » + Snippet hinzufügen.
Klicken Sie dann unter der Option Benutzerdefinierter Code hinzufügen (Neues Snippet) auf die Schaltfläche Snippet verwenden.
Sie sollten sich nun auf einem neuen Bildschirm befinden, auf dem Sie Ihrem Snippet einen Titel geben und Ihren benutzerdefinierten Code schreiben können (oder einfach die kopieren und einfügen, die ich im nächsten Abschnitt teilen werde).
Da alle Codes zur Steuerung des Abstands in einem Formular CSS sind, stellen Sie sicher, dass Sie CSS-Snippet im Dropdown-Menü Codetyp auswählen.
Danach müssen Sie nur noch Ihr Code-Snippet hinzufügen und die Einfügungsmethode auswählen. Die Einfügungseinstellungen können in einem Abschnitt unter der Code-Vorschau geändert werden. Sie sollten die Standardeinstellungen für keinen der in diesem Beitrag behandelten Codes ändern müssen.
Wichtiger ist, dass Sie Ihr Snippet speichern und aktivieren, nachdem Sie Ihren benutzerdefinierten Code hinzugefügt haben. Sie werden nicht sehen, dass der Code wirksam wird, bis er mit dem Schalter oben rechts aktiviert ist.
Ausgezeichnet! Sie sind nun bereit, mit der Anpassung der Formularabstände mit benutzerdefiniertem Code zu beginnen.
CSS-Codes zur Anpassung von Formularabständen
Wir sind nun bereit, mit der Erstellung der CSS-Code-Snippets zu beginnen, die die Abstände für verschiedene Formularelemente steuern.
Abstand zwischen Formular-Titel und erstem Feld ändern
Sprechen wir über Formularüberschriften! Standardmäßig verwendet WPForms die H1-Überschrift Ihrer Seite als Formularüberschrift. Diese Überschrift erscheint über dem Formular selbst.
Wenn die Überschrift stattdessen innerhalb des Formularcontainers erscheinen soll, können Sie diese Option einfach im WordPress-Blockeditor aktivieren.
Klicken Sie auf das eingebettete Formular in Ihrem Editor, um zusätzliche Optionen im rechten Bedienfeld zu öffnen. Klicken Sie dann auf den Schalter Titel anzeigen .
Möglicherweise möchten Sie die H1 ausblenden, wenn Sie den WPForms-Titel verwenden. Dies kann einfach geschehen, indem Sie auf die H1 klicken und dann auf das Augensymbol tippen, wenn es erscheint.
Nun sind wir bereit, den Abstand zwischen der Überschrift und dem ersten Formularfeld zu ändern. Sie können Ihr Formular zu diesem Zeitpunkt veröffentlichen oder aktualisieren.
Betrachten wir zunächst den Standardabstand zwischen der Formularüberschrift und dem ersten Feld in WPForms. So sieht es normalerweise aus:
Um diesen Abstand zu ändern, erstellen Sie ein neues Snippet in WPCode, wie in Schritt 3 gezeigt. Sie können schnell darauf zugreifen, indem Sie in der WordPress-Seitenleiste zu Code Snippets » + Snippet hinzufügen gehen.
Hier ist der Code zum Ändern des Titelabstands für ALLE WPForms-Formulare auf Ihrer Website:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}
Denken Sie daran, dass die Abstands- und Randwerte variabel sind. Das bedeutet, dass Sie hier jeden beliebigen Wert eingeben können. Ich empfehle, nur den Wert für margin-bottom in diesem Code zu ändern und padding-bottom auf 0 zu belassen.
Wenn Sie beispielsweise möchten, dass der Titel mit dem gleichen Abstand wie der Abstand zwischen den einzelnen Feldern erscheint, können Sie 15px als Wert für margin-bottom verwenden. Wenn Sie einen größeren oder kleineren Abstand als diesen erstellen möchten, erhöhen oder verringern Sie einfach den px-Wert für margin-bottom nach Bedarf.
So erscheint der Titel, nachdem der obige Code-Schnipsel zu meinem Umfrageformular hinzugefügt wurde.
Wenn Sie diesen Abstand für bestimmte Formulare anpassen möchten, anstatt globale Änderungen vorzunehmen, können Sie den obigen Code ändern, indem Sie die Formular-ID des Formulars angeben, an dem Sie interessiert sind.
Hier ist zum Beispiel, wie sich der Code für ein Formular mit der ID 2294 ändern würde.
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
Das kümmert sich um den Abstand für Ihren Formular-Titel. Aber was ist mit dem Abstand zwischen den einzelnen Feldern?
Das werde ich als Nächstes behandeln.
Abstände für alle Felder ändern
Der Abstand zwischen jeder aufeinanderfolgenden Zeile von Feldern ist eine weitere variable Zahl, die mit Code leicht gesteuert werden kann.
Als Referenz werfen wir zunächst einen Blick auf den Standardabstand zwischen den Feldern.
Wenn Sie diesen Abstand nun vergrößern oder verringern möchten, können Sie einen neuen CSS-Schnipsel erstellen, indem Sie die gleichen Schritte wie hier befolgen.
Nur diesmal sieht der benötigte Code so aus:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
Das Ergebnis ist ein gestreckteres Formular mit einem größeren Abstand zwischen jedem aufeinanderfolgenden Feld.
Sie können den Abstand frei anpassen, indem Sie den px-Wert der Eigenschaft padding-top ändern.
Auch hier gilt: Wenn Sie die Abstände der Felder nur für ein einzelnes Formular ändern möchten, müssen Sie den Code bearbeiten und die Formular-ID angeben:
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}
Abstand der Senden-Schaltfläche ändern
Das Ändern des Abstands zwischen Ihrem letzten Feld und der Schaltfläche zum Absenden ist genauso einfach wie bei den Codes, die Sie oben verwendet haben.
Standardmäßig erscheint der Abstand für die Schaltfläche zum Absenden in WPForms wie folgt:
Der Code, den Sie zum Anpassen des Abstands für die Schaltfläche zum Absenden benötigen, lautet:
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Nachdem Sie diesen Code aktiviert haben, werden Sie feststellen, dass der erhöhte Abstand für Ihre Schaltfläche zum Absenden des Formulars wirksam wird:
Das war ziemlich unkompliziert, nicht wahr?
Nutzen Sie die CSS-Codes, um nach Belieben Abstände in WPForms zu erzwingen!
Als Nächstes: Erweiterte Formularstile anwenden
Das Anpassen von Rändern und Abständen in Ihren Formularen ist eine der wenigen Dinge, die Code erfordern. Aber WPForms ermöglicht es Ihnen, Ihre Formularstile größtenteils ohne Code im Detail anzupassen.
Sie können das Erscheinungsbild Ihrer Felder, Beschriftungen, Schaltflächen und mehr mit intuitiven Point-and-Click-Steuerelementen ändern. Sehen Sie sich unseren Leitfaden zur Formulargestaltung mit dem Block-Editor für einen umfassenden Überblick an.
Erstellen Sie jetzt Ihr WordPress-Formular
Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-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.
