Gestalten Sie Ihre Formulare im Block-Editor

Möchten Sie das Erscheinungsbild Ihrer WordPress-Formulare einfach anpassen? Mit unserer Formular-Styling-Funktion können Sie Ihre Formulare gestalten, ohne CSS schreiben zu müssen.

Dieses Tutorial zeigt Ihnen, wie Sie Ihre Formulare mit dem visuellen Builder von WPForms im Block-Editor gestalten können.

---

Stellen Sie vor Beginn sicher, dass WPForms auf Ihrer WordPress-Seite installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben.

Modernes Markup aktivieren

Modernes Markup in WPForms beinhaltet erhöhte Barrierefreiheit und ermöglicht es Ihnen, Ihre Formulare im Block-Editor visuell anzupassen.

Um die Formulargestaltung zu aktivieren, müssen Sie das moderne Markup auf Ihrer WPForms-Einstellungsseite aktivieren. Gehen Sie dazu zu WPForms » Einstellungen und wählen Sie die Registerkarte Allgemein.

Scrollen Sie als Nächstes zum Abschnitt Allgemein und stellen Sie sicher, dass die Option Formular-Styling einschließen auf Basis- und Formular-Theme-Styling eingestellt ist.

Aktivieren Sie anschließend das Kontrollkästchen Modernes Markup verwenden, um es zu aktivieren.

Stellen Sie sicher, dass Sie Ihre Änderungen speichern, nachdem Sie diese Option aktiviert haben.

Ihre Formulare anpassen

Nachdem Sie die Option für modernes Markup aktiviert haben, erstellen Sie ein neues Formular und fügen Sie das Formular zu einer Seite oder einem Beitrag hinzu.

Klicken Sie im Block-Editor auf das Formular, um zusätzliche Optionen für den WPForms-Block zu öffnen.

In den WPForms-Blockeinstellungen finden Sie Optionen zur Anpassung von Farbthema, Formularfeldern, Beschriftungen, Schaltflächen sowie Container- und Hintergrundstilen, ohne CSS schreiben zu müssen. Im Abschnitt Erweitert finden Sie auch zusätzliche Optionen zum Kopieren von Stileinstellungen von einem Formular auf ein anderes.

Wir werden jede dieser Optionen im Folgenden detaillierter behandeln.

Designs

Die Einstellung Designs ermöglicht es Ihnen, ein vordefiniertes Farbdesign auszuwählen, um den Stil der Felder, Beschriftungen, Schaltflächen, des Containers und des Hintergrunds Ihres Formulars automatisch zu aktualisieren.

Um es anzuwenden, klicken Sie einfach auf Ihr bevorzugtes Design, und es werden sofort die Farben der Felder, Beschriftungen, Schaltflächen, des Containers oder des Hintergrunds Ihres Formulars angepasst.

Wenn Sie nach der Auswahl eines Designs einzelne Einstellungen anpassen, werden diese Änderungen als neues benutzerdefiniertes Formular-Design gespeichert. Dieses neue Design wird Ihrer Liste der verfügbaren Designs hinzugefügt und kann wie jedes andere Formular-Design auf jedes Formular angewendet werden.

Sie können dieses Thema auch umbenennen, um es im Feld Themenname leicht identifizieren zu können.

Um ein benutzerdefiniertes Formular-Theme zu löschen, klicken Sie einfach auf den Text Theme löschen neben dem Namen des Themes.

Feldstile

Unter dem Abschnitt Feldstile finden Sie Optionen zur Anpassung von Größe, Rahmen, Rahmenbreite, Radius und Farben für Ihre Formularfelder. Nachfolgend haben wir die verfügbaren Feldoptionen erläutert.

• Größe: Passt die Gesamtgröße Ihrer Formularfelder an. Optionen sind Klein, Mittel und Groß.
• Rahmen: Mit dieser Einstellung können Sie Ihren Formularfeldern einen Rahmen hinzufügen oder entfernen. Optionen sind durchgezogene, gestrichelte oder gepunktete Rahmen.
• Randgröße: Legt die Dicke der Ränder Ihres Feldes fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit auswählen, die am besten zu Ihren Designanforderungen passt.
• Abgerundete Ecken: Verwenden Sie diese Option, um abgerundete Ecken auf Ihre Formularfelder anzuwenden, für ein weicheres, moderneres Aussehen. Die Standardeinheit ist Pixel (px), aber Sie können sie in die von Ihnen bevorzugte Einheit ändern.

Als Nächstes finden Sie die Einstellungen Farben. Damit können Sie die Hintergrund-, Rahmen- und Textfarben sowie die Farben der Dropdown-Menüs Ihrer Felder aktualisieren.

Wenn Sie auf eine bestimmte Farboption klicken, erscheint eine Überlagerung mit verfügbaren Theme-Farben.

Klicken Sie auf die 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 einfach in das Feld Hex ein.

Label-Stile

Im Abschnitt Label-Stile finden Sie die Option zur Aktualisierung der Größe und Farben Ihrer Formular-Labels. Verfügbare Größenoptionen sind Klein, Mittel und Groß.

Im Abschnitt Farben finden Sie die Option zur Aktualisierung der Farben für Labels, Sublabels und Fehlermeldungen. Nachfolgend haben wir die verfügbaren Label-Farboptionen erläutert.

• Bezeichnung: Diese Option steuert die Textfarbe Ihrer Hauptfeldbezeichnung.
• Unterbezeichnung & Hinweis: Diese Option steuert die Farbe von Feldunterbezeichnungen und Hinweisen, die angezeigt werden, wenn WPForms Benutzern im Frontend Werte vorschlägt.
• Fehlermeldung: Die Textfarbe, die angezeigt wird, wenn beim Ausfüllen Ihres Formulars durch Benutzer ein Fehler auftritt.

Schaltflächenstile

Die Einstellungen für Schaltflächenstile ermöglichen es Ihnen, Größe, Rand, Randgröße, abgerundete Ecken und Farben für Ihre Schaltflächen zu ändern. Nachfolgend haben wir die verfügbaren Schaltflächenoptionen erläutert.

• Größe: Diese Option legt die Größe der Schaltfläche fest. Optionen sind Klein, Mittel und Groß.
• Rand: Diese Einstellung ermöglicht es Ihnen, Ihre Schaltflächen mit einem durchgezogenen, gestrichelten oder gepunkteten Rand zu umranden.
• Randgröße: Legt die Dicke der Ränder Ihrer Schaltflächen fest. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit auswählen, die am besten zu Ihren Designanforderungen passt.
• Abgerundete Ecken: Dies passt die Rundung Ihrer Schaltflächenecken für ein weicheres oder schärferes Aussehen an. Pixel (px) sind die Standardeinheit, mit Optionen zum Wechseln je nach Ihren Designpräferenzen.

Im Bereich Farben finden Sie die Option zur Aktualisierung der Vorder- und Hintergrundfarben Ihrer Schaltfläche.

Container-Stile

Die Einstellungen für Containerstile ermöglichen es Ihnen, den Innenabstand, den Randstil, die Randgröße, die abgerundeten Ecken, den Schatten und die Farben für den Container Ihres Formulars anzupassen. Nachfolgend haben wir die verfügbaren Containeroptionen detailliert beschrieben.

• Innenabstand: Diese Option legt den Abstand innerhalb der Ränder des Formularcontainers fest. Sie können diesen Wert erhöhen oder verringern, um den Abstand um Ihre Formularinhalte anzupassen.
• Randstil: Mit dieser Einstellung wählen Sie den Umriss Ihres Containers aus, mit Optionen für einen durchgehenden, gestrichelten oder gepunkteten Rand.
• Randgröße: Bestimmt die Dicke des Randes Ihres Containers. Die Standardeinheit ist Pixel (px), aber Sie können die Einheit wählen, die Ihren Designanforderungen am besten entspricht.
• Radius: Dies passt an, wie abgerundet die Ecken Ihres Containers sind, und verleiht dem Erscheinungsbild Ihres Formulars eine weichere oder definiertere Kante. Die Standardmessung erfolgt in Pixeln (px), kann aber geändert werden, um Ihrem Stil zu entsprechen.
• Schatten: Wählen Sie die Größe des Schatteneffekts für Ihren Container, um Ihrem Formular-Design Tiefe zu verleihen, mit Optionen von keiner bis zu großer Größe.
• Farben: Aktualisieren Sie die Randfarbe Ihres Containers, um sie an Ihr visuelles Thema anzupassen und die Gesamtästhetik des Formulars zu verbessern.

Hintergrundstile

Die Einstellungen für Hintergrundstile geben Ihnen die Kontrolle über das Hintergrundbild und die Hintergrundfarbe Ihres Formulars.

Wählen Sie zunächst eine Bildquelle aus dem Dropdown-Menü Bild. Für Bilder, die bereits auf Ihre Website hochgeladen wurden, oder um neue hochzuladen, wählen Sie die Option Mediathek. Um eine größere Auswahl an professionellen Bildern zu erkunden, wählen Sie die Option Stockfotos.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche Bild auswählen, um fortzufahren.

Wenn Sie Mediathek aus dem Dropdown-Menü Bild auswählen, öffnet sich die Mediathek Ihrer Website, sodass Sie ein Bild auswählen oder ein neues hochladen können. Wenn Stockfotos ausgewählt ist, wird Ihnen eine Auswahl an Stockfotos für den Hintergrund Ihres Formulars angezeigt.

Sobald Sie Ihr Bild ausgewählt haben, bietet der Abschnitt Hintergrundstile zusätzliche Anpassungsoptionen:

• Position: Mit dieser Einstellung können Sie Ihr Hintergrundbild innerhalb des Formulars ausrichten, indem Sie Optionen wie Oben Mitte, Unten Mitte und mehr auswählen, um die perfekte Platzierung zu erzielen.
• Wiederholung: 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: Dies passt an, wie Ihr Hintergrundbild in das Formular passt. Abdecken 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: Diese Option ermöglicht es Ihnen, eine Hintergrundfarbe auszuwählen, die sichtbar ist, wenn kein Bild verwendet wird.

Erweiterte Stile

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.

Diese Option ermöglicht es Ihnen, Stile von einem Formular in ein anderes zu kopieren.

Wenn Sie Stileinstellungen von einem anderen Formular kopiert haben, können Sie sie hier schnell einfügen. Nach dem Einfügen des Code-Snippets verwendet das Formular die Stile des vorherigen Formulars.

Wenn Sie eine Anpassung, die Sie Ihrem Formular hinzugefügt haben, zurücksetzen möchten, klicken Sie auf die Schaltfläche Stileinstellungen zurücksetzen. Dadurch wird Ihr Formular ohne benutzerdefinierte Stile in seinen ursprünglichen Zustand zurückversetzt.

Sie können optional benutzerdefinierte CSS-Klassen hinzufügen, die Sie im Feld ZUSÄTZLICHE CSS-KLASSE(N) erstellt haben. Weitere Informationen finden Sie in unserem Tutorial zum Hinzufügen benutzerdefinierter CSS-Klassen.

Stellen Sie nach der Gestaltung Ihres Formulars sicher, dass Sie Ihre Änderungen speichern, indem Sie entweder die Seite veröffentlichen oder sie als Entwurf speichern.

Testen deiner Formulare

Der letzte Schritt ist ein kurzer Test, um sicherzustellen, dass Ihr Formular so aussieht und funktioniert, wie Sie es erwarten.

Um es auszuprobieren, müssen Sie einfach einen Eintrag an Ihr Formular senden. Um mehr zu erfahren, lesen Sie bitte unsere vollständige Checkliste für Formular-Tests.

Häufig gestellte Fragen

Nachfolgend beantworten wir einige der häufigsten Fragen, die wir zum Styling Ihrer Formulare im Block-Editor erhalten.

Ich kann die Option „Modernes Markup verwenden“ nicht finden. Wie aktiviere ich das moderne Markup in WPForms?

Benutzer, die vor dem Update des WPForms-Plugins auf Version 1.8.1 mindestens ein Formular auf ihrer Website hatten, sehen die Option für modernes Markup.

Wenn Sie das WPForms-Plugin gerade erst auf Ihrer WordPress-Website installiert haben, sehen Sie die Option „Modernes Markup verwenden“ nicht auf Ihrer Einstellungsseite. Ihre Website wird standardmäßig für die Verwendung des modernen Markups eingerichtet.

Wenn Sie diese Option auf Ihrer Einstellungsseite anzeigen lassen möchten, müssen Sie den folgenden Code-Schnipsel zu Ihrer Website hinzufügen.

Wie erzwinge ich, dass WPForms modernes Markup verwendet?

Wenn die veraltete Kreditkartenfeld-Option Sie daran hindert, modernes Markup zu aktivieren, können Sie diese Einschränkung umgehen, indem Sie einen benutzerdefinierten Filter hinzufügen. Um WPForms zu zwingen, die Option für modernes Markup zu aktivieren, fügen Sie den folgenden Code-Schnipsel zu Ihrer Website hinzu.

Nachdem Sie den Code hinzugefügt haben, können Sie modernes Markup auf Ihrer WPForms-Einstellungsseite aktivieren/deaktivieren.

Wie kann ich Stiländerungen vornehmen, die im Block-Editor 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.

Oder, wenn Sie Ihre Formulare mit CSS gestalten möchten, empfehlen wir die Verwendung von WPCode, um Ihre benutzerdefinierten Stile zu Ihrer Website hinzuzufügen.

Das ist alles! 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 Symbole verwenden, um die Anzeige Ihres Formulars zu verbessern? Lesen Sie unbedingt unser Tutorial zum Verwenden von Icon-Auswahlen, um zu erfahren, wie.