Möchten Sie das Aussehen Ihrer WordPress-Formulare ganz einfach anpassen? Mit unserer Formstyling-Funktion können Sie Ihre Formulare gestalten, ohne CSS schreiben zu müssen.
Dieses Tutorial zeigt Ihnen, wie Sie Ihre Formulare mit dem WPForms Visual Builder im Block-Editor gestalten können.
Voraussetzungen: Um Ihre Formulare im Block-Editor gestalten zu können, müssen Sie über die folgenden Voraussetzungen verfügen:
- WordPress Version 6.0 oder höher
- Block-Editor oder ein Thema mit vollständiger Seitenbearbeitung
Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben.
Ermöglichung von modernem Markup
Modernes Markup in WPForms beinhaltet verbesserte Zugänglichkeit und ermöglicht es Ihnen, Ihre Formulare visuell im Block-Editor anzupassen.
Um das Formstyling zu aktivieren, müssen Sie auf der Seite mit den WPForms-Einstellungen modernes Markup aktivieren. Gehen Sie dazu auf WPForms " Einstellungen und wählen Sie die Registerkarte Allgemein.
Blättern Sie dann zum Abschnitt Allgemein und stellen Sie sicher, dass die Option Formularstyling einbeziehen auf Basis und Formularstyling eingestellt ist.
Aktivieren Sie anschließend das Kontrollkästchen Modernes Markup verwenden, um es zu aktivieren.
Achten Sie darauf, Ihre Änderungen zu speichern, nachdem Sie diese Option aktiviert haben.
Anpassen Ihrer Formulare
Nachdem Sie die Option "Modernes Markup" aktiviert haben, erstellen Sie ein neues Formular und fügen das Formular einer Seite oder einem Beitrag hinzu.
Klicken Sie im Blockeditor auf das Formular, um zusätzliche Optionen für den WPForms-Block zu öffnen.
In den Einstellungen des WPForms-Blocks finden Sie Optionen zum Anpassen des Farbthemas, der Formularfelder, der Beschriftungen, der Schaltflächen sowie der Container- und Hintergrundstile, ohne dass Sie CSS schreiben müssen. Im Abschnitt " Erweitert" finden Sie außerdem zusätzliche Optionen zum Kopieren von Stileinstellungen von einem Formular in ein anderes.
Im Folgenden gehen wir auf jede dieser Optionen näher ein.
Themen
Mit der Einstellung "Themen" können Sie ein vordefiniertes Farbthema auswählen, um den Stil der Felder, Beschriftungen, Schaltflächen, des Containers und des Hintergrunds Ihres Formulars automatisch zu aktualisieren.
Zum Anwenden klicken Sie einfach auf Ihr bevorzugtes Thema, und es wird sofort die Farben der Felder, Beschriftungen, Schaltflächen, des Containers oder des Hintergrunds Ihres Formulars anpassen.
Wenn Sie nach der Auswahl eines Themas einzelne Einstellungen anpassen, werden diese Änderungen als neues benutzerdefiniertes Formulardesign gespeichert. Dieses neue Thema wird zu Ihrer Liste der verfügbaren Themen hinzugefügt und kann auf jedes beliebige Formular angewendet werden, so wie Sie es mit jedem anderen Formulardesign tun würden.
Sie können dieses Thema zur leichteren Identifizierung auch im Feld Themenname umbenennen.
Um ein benutzerdefiniertes Formular-Design zu löschen, klicken Sie einfach auf den Text "Design löschen" neben dem Namen des Designs.
Feldstile
Im Abschnitt Feldstile finden Sie die Optionen zum Anpassen von Größe, Rahmen, Rahmengröße, Rahmenradius und Farben für Ihre Formularfelder. Im Folgenden werden die verfügbaren Feldoptionen erläutert.
- Größe: Passt die Gesamtgröße Ihrer Formularfelder an. Die Optionen umfassen Klein, Mittel und Groß.
- Umrandung: Mit dieser Einstellung können Sie einen Rahmen um Ihre Formularfelder hinzufügen oder entfernen. Zu den Optionen gehören durchgehende, gestrichelte oder gepunktete Rahmen.
- Größe der Umrandung: Legt die Dicke der Feldränder fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
- Radius des Rahmens: Verwenden Sie diese Option, um abgerundete Ecken auf Ihre Formularfelder anzuwenden, um ein weicheres, moderneres Aussehen zu erzielen. Die Standardeinheit ist Pixel (px), aber Sie können sie in die von Ihnen bevorzugte Einheit ändern.
Als nächstes finden Sie die Einstellungen für Farben. Hier können Sie die Hintergrund-, Rahmen-, Text- und Dropdown-Menü-Farben Ihrer Felder aktualisieren.
Wenn Sie auf eine bestimmte Farboption klicken, wird ein Overlay mit den verfügbaren Themenfarben angezeigt.
Klicken Sie auf das Farbfeld, um den Farbwähler zu öffnen.
Wenn Sie bereits eine Markenfarbe haben, die Sie für Ihre Formulare verwenden möchten, fügen Sie den Hex-Farbcode in das Hex-Feld ein.
Etikett Stile
Im Abschnitt Beschriftungsstile finden Sie die Option, die Größe und die Farben Ihrer Formularbeschriftungen zu aktualisieren. Zu den verfügbaren Größenoptionen gehören Klein, Mittel und Groß.
Unter dem Abschnitt Farben finden Sie die Option, die Farben für Etiketten, Unteretiketten und Fehlermeldungen zu aktualisieren. Im Folgenden werden die verfügbaren Farboptionen für Etiketten erläutert.
- Beschriftung: Diese Option steuert die Textfarbe der Beschriftung Ihres Hauptfeldes.
- Sublabel & Hint: Diese Option steuert die Farbe des Feldes sublabels und Hinweise, die angezeigt werden, wenn WPForms schlägt vor, Werte für die Benutzer im Frontend.
- Fehlermeldung: Die Farbe des Textes, der angezeigt wird, wenn beim Ausfüllen Ihres Formulars ein Fehler auftritt.
Schaltfläche Stile
Mit den Einstellungen für die Schaltflächenstile können Sie die Größe, den Rahmen, die Rahmengröße, den Rahmenradius und die Farben für Ihre Schaltflächen ändern. Im Folgenden werden die verfügbaren Schaltflächenoptionen erläutert.
- Größe: Mit dieser Option wird die Größe der Schaltfläche festgelegt. Die Optionen sind Klein, Mittel und Groß.
- Umrandung: Mit dieser Einstellung können Sie Ihre Schaltflächen mit einem durchgehenden, gestrichelten oder gepunkteten Rahmen versehen.
- Größe der Umrandung: Legt die Dicke der Ränder Ihrer Schaltflächen fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
- Radius der Umrandung: Hiermit wird die Rundung der Schaltflächenecken für ein weicheres oder schärferes Aussehen eingestellt. Pixel (px) sind die Standardeinheit, mit Optionen, die Sie je nach Ihren Designvorlieben ändern können.
Im Bereich Farben finden Sie die Option, die Hintergrund- und Textfarben Ihrer Schaltfläche zu aktualisieren.
Container-Stile
Mit den Einstellungen für die Containerstile können Sie die Polsterung, den Rahmenstil, die Rahmengröße, den Rahmenradius, den Schatten und die Farben für den Container Ihres Formulars anpassen. Im Folgenden werden die verfügbaren Container-Optionen detailliert beschrieben.
- Auffüllung: Mit dieser Option wird der Abstand innerhalb der Ränder des Formular-Containers festgelegt. Sie können diesen Wert erhöhen oder verringern, um den Abstand um den Inhalt Ihres Formulars anzupassen.
- Stil der Umrandung: Mit dieser Einstellung können Sie den Umriss Ihres Containers wählen, mit Optionen für einen durchgehenden, gestrichelten oder gepunkteten Rahmen.
- Größe des Randes: Bestimmt die Dicke des Rahmens Ihres Containers. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
- Radius des Rahmens: Hiermit wird eingestellt, wie abgerundet die Ecken Ihres Containers sind, wodurch das Erscheinungsbild Ihres Formulars weicher oder definierter wird. Das Standardmaß ist in Pixeln (px), kann aber an Ihren Stil angepasst werden.
- Schatten: Wählen Sie die Größe des Schatteneffekts für Ihren Container, um dem Design Ihres Formulars Tiefe zu verleihen. Die Optionen reichen von keinem bis zu großem Schatten.
- Farben: Aktualisieren Sie die Rahmenfarbe Ihres Containers, um sie an Ihr visuelles Thema anzupassen und die Gesamtästhetik des Formulars zu verbessern.
Hintergrund Stile
Die Einstellungen für die Hintergrundstile geben Ihnen die Kontrolle über das Hintergrundbild und die Farbe Ihres Formulars.
Wählen Sie zunächst eine Bildquelle aus dem Dropdown-Menü Bild. Wenn Sie bereits Bilder auf Ihre Website hochgeladen haben oder neue Bilder hochladen möchten, wählen Sie die Option Medienbibliothek. Wenn Sie eine größere Auswahl an professionellen Bildern suchen, wählen Sie die Option Archivfotos .
Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche Bild auswählen, um fortzufahren.
Wenn Sie in der Dropdown-Liste Bild die Option Medienbibliothek wählen, wird die Mediengalerie Ihrer Website geöffnet, in der Sie ein Bild auswählen oder ein neues hochladen können. Wenn Sie Stockfotos auswählen, wird Ihnen eine Auswahl an Stockfotos für den Hintergrund Ihres Formulars angezeigt.
Nachdem Sie Ihr Bild ausgewählt haben, bietet der Bereich Hintergrundstile weitere Anpassungsmöglichkeiten:
- Position: Mit dieser Einstellung können Sie Ihr Hintergrundbild innerhalb des Formulars ausrichten, indem Sie Optionen wie Oben Mitte, Unten Mitte usw. auswählen, um die perfekte Platzierung zu erreichen.
- Wiederholen: Wählen Sie, wie Ihr Hintergrundbild wiederholt wird. Die Optionen sind Keine Wiederholung für ein einzelnes Bild, Kachel, um das Bild über den gesamten Hintergrund zu wiederholen, Horizontal wiederholen für die Wiederholung über die Breite und Vertikal wiederholen für die Wiederholung über die Länge.
- Größe: Hiermit wird eingestellt, wie Ihr Hintergrundbild in das Formular passt. Cover stellt sicher, dass das Bild den gesamten Hintergrund abdeckt und sich an die Größe des Formulars anpasst. Wenn Abmessungen ausgewählt ist, können Sie die genaue Breite und Höhe für Ihr Bild angeben.
- Farben: Mit dieser Option können Sie eine Hintergrundfarbe auswählen, die sichtbar ist, wenn kein Bild verwendet wird.
Fortgeschrittenes Styling
Im Abschnitt " Erweitert" sehen Sie den CSS-Code, der alle Stile enthält, die Sie dem Formular unter " Stileinstellungen kopieren/einfügen" hinzugefügt haben.
Mit dieser Option können Sie Stile von einem Formular in ein anderes kopieren.
Wenn Sie die Stileinstellungen aus einem anderen Formular kopiert haben, können Sie sie hier schnell einfügen. Nach dem Einfügen des Codeschnipsels verwendet das Formular die Stile aus dem vorherigen Formular.
Wenn Sie alle Anpassungen, die Sie Ihrem Formular hinzugefügt haben, zurücksetzen möchten, klicken Sie auf die Schaltfläche Stil-Einstellungen zurücksetzen. Dadurch wird Ihr Formular in seinen ursprünglichen Zustand ohne benutzerdefiniertes Styling zurückversetzt.
Sie können optional benutzerdefinierte CSS-Klassen hinzufügen, die Sie im Feld ZUSÄTZLICHE CSS-KLASSEN(ES) erstellt haben. Weitere Informationen finden Sie in unserem Tutorial zum Hinzufügen benutzerdefinierter CSS-Klassen.
Nachdem Sie Ihr Formular gestaltet haben, müssen Sie Ihre Änderungen speichern, indem Sie die Seite entweder veröffentlichen oder als Entwurf speichern.
Testen Ihrer Formulare
Als letzten Schritt führen Sie einen kurzen Test durch, um sicherzustellen, dass Ihr Formular so aussieht und funktioniert, wie Sie es erwarten.
Um es zu testen, müssen Sie lediglich einen Eintrag in Ihr Formular einreichen. Weitere Informationen finden Sie in unserer vollständigen Checkliste für Formular-Tests.
Häufig gestellte Fragen
Im Folgenden beantworten wir einige der häufigsten Fragen, die wir zur Gestaltung Ihrer Formulare im Block-Editor erhalten.
Achtung! Einige der FAQs in diesem Dokument enthalten PHP-Code und sind für Entwickler gedacht. Wir stellen diesen Code aus Höflichkeit zur Verfügung, bieten aber keinen Support für Code-Anpassungen oder Entwicklungen von Drittanbietern.
Wenn Sie einen einfacheren Ansatz für das Hinzufügen von benutzerdefiniertem Code zu Ihrer Website bevorzugen, lesen Sie bitte die WPBeginner-Anleitung zur Verwendung von WPCode.
Ich kann die Option "Modern Markup verwenden" nicht finden. Wie kann ich Modern Markup in WPForms aktivieren?
Benutzer mit mindestens einem Formular auf ihrer Website vor der Aktualisierung der WPForms-Plugin auf Version 1.8.1 wird die moderne Markup-Option zu sehen.
Wenn Sie gerade das WPForms-Plugin auf Ihrer WordPress-Website installiert haben, werden Sie die Option Modernes Markup verwenden auf Ihrer Einstellungsseite nicht sehen. Ihre Website wird standardmäßig auf die Verwendung des modernen Markups eingestellt.
Wenn Sie diese Option auf Ihrer Einstellungsseite anzeigen möchten, müssen Sie den folgenden Codeschnipsel in Ihre Website einfügen.
Wie kann ich WPForms zwingen, modernes Markup zu verwenden?
Wenn die Verwendung des veralteten Kreditkartenfeldes Sie daran hindert, modernes Markup zu aktivieren, können Sie diese Einschränkung durch Hinzufügen eines benutzerdefinierten Filters umgehen. Um WPForms zu zwingen, die moderne Markup-Option zu aktivieren, fügen Sie das folgende Code-Snippet auf Ihrer Website.
Nach dem Hinzufügen des Codes können Sie das moderne Markup auf Ihrer WPForms-Einstellungsseite aktivieren/deaktivieren.
Wie kann ich Stiländerungen vornehmen, die im Blockeditor nicht verfügbar sind?
Wenn Sie andere Änderungen an den Stilen Ihrer Formulare vornehmen möchten, die nicht als Optionen im Block-Editor verfügbar sind, können Sie CSS Hero verwenden. Dieses Plugin ermöglicht es Ihnen, das Erscheinungsbild Ihrer Website im Frontend zu ändern, ohne Code schreiben zu müssen.
Wenn Sie Ihre Formulare mit CSS gestalten möchten, empfehlen wir Ihnen die Verwendung von WPCode, um Ihre benutzerdefinierten Stile zu Ihrer Website hinzuzufügen.
Das war's! Jetzt wissen Sie, wie Sie das Aussehen Ihrer WordPress-Formulare mit WPForms und dem Block-Editor anpassen können.
Möchten Sie als Nächstes Icons verwenden, um die Anzeige Ihres Formulars zu verbessern? In unserem Tutorial über die Verwendung von Symbolen erfahren Sie, wie das geht.