So stylen Sie WPForms mit dem Block-Editor

Möchten Sie WPForms mit dem Block-Editor gestalten, um optisch ansprechende, benutzerfreundliche Formulare auf Ihrer WordPress-Website zu erstellen?

WPForms ist ein intuitives Plugin, das die Erstellung und Verwaltung von Formularen vereinfacht und gleichzeitig umfangreiche Anpassungsoptionen bietet. Durch die Nutzung des Block-Editors können Sie Ihre Formulare mühelos gestalten, um Ihre Benutzererfahrung zu verbessern.

Folgen Sie diesem Schritt-für-Schritt-Tutorial, um das Styling von WPForms mit dem Block-Editor zu meistern und die Gesamtfunktionalität Ihrer Website zu verbessern.

Erstellen Sie jetzt Ihr WordPress-Formular

Warum Sie Ihre Formulare gestalten müssen

Durch die Gestaltung Ihrer Formulare können Sie die Ästhetik Ihrer Website verbessern und sicherstellen, dass sie zu einer positiven Benutzererfahrung beiträgt. Hier sind einige weitere wichtige Gründe, warum die Formulargestaltung für Ihre Website entscheidend ist:

• Konsistentes Branding: Das Erstellen eines gebrandeten Formulars, das zum Design und Farbschema Ihrer Website passt, sorgt für ein einheitliches Markenbild.
• Bessere Benutzererfahrung: Gut gestaltete Formulare erleichtern es den Benutzern, die erforderlichen Informationen zu navigieren/einzugeben, was zu höheren Abschlussraten führt.
• Responsives Design: Ein gut gestaltetes Formular passt sich mühelos an verschiedene Bildschirmgrößen und Geräte an und sorgt so für ein reibungsloses Benutzererlebnis für alle Besucher.
• Gesteigerte Conversions: Ein visuell ansprechendes Formular kann die Aufmerksamkeit eines Benutzers auf sich ziehen und ihn motivieren, die gewünschte Aktion auszuführen, sei es die Anmeldung für einen Newsletter, ein Kauf oder die Übermittlung einer Anfrage.
• Verbesserte Barrierefreiheit: Die Gestaltung Ihrer Formulare mit klaren Beschriftungen, ausreichendem Abstand und kontrastierenden Farben kann die Barrierefreiheit für sehbehinderte Benutzer verbessern und sicherstellen, dass Ihre Website einem breiteren Publikum gerecht wird.

Nachdem Sie nun die Bedeutung der Gestaltung Ihrer WPForms verstanden haben, ist es an der Zeit, sich mit dem Schritt-für-Schritt-Prozess zu befassen, um Ihre Formulare effektiv mit dem Block-Editor zu gestalten und das Beste aus dem WPForms-Plugin herauszuholen.

So stylen Sie WPForms mit dem Block-Editor

Befolgen Sie diese Schritte, um zu lernen, wie Sie Ihre WPForms mit dem Gutenberg-Block-Editor gestalten können, ohne benutzerdefiniertes CSS schreiben zu müssen.

Schritt 1: WPForms installieren und aktivieren

WPForms vereinfacht die Erstellung und Verwaltung von Formularen auf Ihrer Website. Das Plugin erstellt mühelos verschiedene Formulare, darunter Kontaktformulare, Umfragen, Abstimmungen und Registrierungsformulare, ohne Programmierkenntnisse, und bietet Ihnen über 2.100 fertige Vorlagen für den Einstieg.

Was mir am Styling von WPForms am besten gefällt, ist, dass jede Steuerung in der Block-Seitenleiste sitzt, direkt neben dem Formular, das Sie bearbeiten. Ändern Sie einen Randradius oder eine Button-Farbe und das Formular aktualisiert sich, während Sie zusehen. So stecken Sie nie in einer Schleife aus Speichern, Aktualisieren und Überprüfen fest.

Sie benötigen auch keine kostenpflichtige Lizenz für all das. Formular-Styling und die vollständige Bibliothek von über 40 Themes sind in WPForms Lite, der kostenlosen Version, verfügbar. Jeder Schritt in dieser Anleitung funktioniert also gleich, egal ob Sie Lite oder Pro verwenden.

Um mit WPForms zu beginnen, müssen Sie das Plugin auf Ihrer WordPress-Website installieren. Sobald Sie es aktiviert haben, folgen Sie den einfachen Schritten unten, um die Gestaltung Ihres Formulars zu erstellen und anzupassen.

WPForms jetzt kostenlos herunterladen

Schritt 2: Formular erstellen oder Vorlage verwenden

Lassen Sie uns mit der Erstellung Ihres Formulars beginnen! Navigieren Sie in Ihrem WordPress-Dashboard zu WPForms und klicken Sie auf die Schaltfläche Neu hinzufügen.

Wenn Sie dazu aufgefordert werden, geben Sie Ihrem Formular einen Namen, der seinen Zweck widerspiegelt. Dann haben Sie die Möglichkeit, eine vorhandene Vorlage auszuwählen oder Leeres Formular erstellen.

Als Nächstes öffnet WPForms seine intuitive Formular-Builder-Oberfläche, auf der Sie Ihr Formular anpassen können, indem Sie Felder hinzufügen, bearbeiten, löschen oder neu positionieren.

Nachdem Sie die Formularfelder konfiguriert haben, müssen Sie E-Mail-Benachrichtigungen einrichten, um benachrichtigt zu werden, wenn jemand das Formular ausfüllt und auf die Schaltfläche zum Absenden klickt.

Sie können auch die Bestätigungsnachricht, die Benutzer nach dem Absenden des Formulars sehen, konfigurieren, um die Benutzererfahrung zu verbessern.

Speichern Sie Ihre Formulareinstellungen, bevor Sie mit dem nächsten Schritt fortfahren, um zu vermeiden, dass Sie Ihren Fortschritt verlieren. Klicken Sie auf die Schaltfläche Speichern oben auf dem Bildschirm.

Schritt 3: Modernes Markup aktivieren

Um die Zugänglichkeit zu verbessern und die visuelle Anpassung von Formularen im Block-Editor zu ermöglichen, bietet WPForms Modern Markup.

Um Modern Markup in WPForms zu aktivieren, gehen Sie zu WPForms » Einstellungen und wählen Sie den Tab Allgemein.

Scrollen Sie nach unten zum Abschnitt Allgemein, wo zwei Einstellungen zusammenarbeiten, um das Styling des Block-Editors zu aktivieren. Beginnen Sie mit der Einstellung Formular-Styling einschließen und setzen Sie sie auf Basis- und Formular-Theme-Styling.

Dies ist die Option, die die CSS lädt, von der Ihre Styling-Steuerungen abhängen. Wenn sie auf etwas Engeres eingestellt ist, erscheinen Ihre Änderungen entweder nicht im Block-Editor oder werden nicht auf das Frontend übertragen.

Aktivieren Sie als Nächstes die Option Modern Markup verwenden. Wenn diese aktiviert ist, sind Sie bereit, Ihr Formular über den Block-Editor zu stylen. Speichern Sie Ihre Änderungen, bevor Sie die Seite verlassen.

WPForms Version 1.8.1 und höher aktivieren Modern Markup standardmäßig für neue Benutzer, und die Option zum Deaktivieren ist nicht verfügbar.

Wenn Sie also die neueste Version des Plugins verwenden und diese Einstellung nicht sehen, sind Sie bereits startklar und können mit der Gestaltung Ihrer Formulare beginnen.

Beginnen Sie mit der Anpassung Ihrer Formulare im Block-Editor, um die Vorteile der modernen Markup-Funktionen zu nutzen. Zuerst betten wir das Formular jedoch auf Ihrer Website ein!

Schritt 4: Formular auf Ihrer Website einbetten

Um das zuvor erstellte Formular einzubetten, öffnen Sie eine vorhandene Seite oder erstellen Sie eine neue. Suchen Sie nach der Schaltfläche Block hinzufügen und suchen Sie nach dem WPForms-Block.

Nachdem Sie den WPForms-Block in Ihre Seite oder Ihren Beitrag eingefügt haben, wählen Sie Ihr gewünschtes Formular aus dem Dropdown-Menü aus. Jetzt können wir mit der Gestaltung Ihres Formulars mit dem Block-Editor beginnen!

Schritt 5: Stile aus dem Block-Editor bearbeiten

Öffnen Sie die Seite oder den Beitrag, der Ihre WPForms enthält, im Block-Editor. Klicken Sie auf den WPForms-Block, um die zusätzlichen Optionen zu öffnen.

Sie werden eine Vielzahl von Optionen für Styling-Themes, Formularfelder, Labels, Buttons sowie den Container und Hintergrund, in dem sich Ihr Formular befindet, entdecken, um sie an die Ästhetik Ihrer Marke anzupassen.

Der Abschnitt Erweitert ermöglicht es Ihnen auch, Stileinstellungen zwischen Formularen zu kopieren, was Zeit spart, wenn mehrere Formulare die gleiche Behandlung benötigen.

Erfahren Sie unten, wie Sie diese verschiedenen Styling-Optionen verwenden, um das Erscheinungsbild Ihres Formulars im Handumdrehen an das Design Ihrer Website anzupassen:

Designs

Das Panel Themes ist der schnellste Weg zu einem neu gestalteten Formular. WPForms wird mit über 40 vorgefertigten Formular-Themes geliefert, und die Anwendung eines Themes erfordert einen einzigen Klick.

Jedes Theme bringt seine eigene Mischung aus Farben, Rändern, Hintergrund und Button-Styling mit, sodass die Auswahl eines Themes Ihre Felder, Labels, Buttons, Container und den Hintergrund gemeinsam neu einfärbt.

Wenn Sie lieber stöbern möchten, bevor Sie sich für eines entscheiden, können Sie alle Themes nebeneinander sehen. Sobald Sie ein Theme anwenden und dann eine einzelne Einstellung ändern, speichert WPForms Ihre Version als neues benutzerdefiniertes Theme und fügt es Ihrer Theme-Liste hinzu.

Verwenden Sie das Feld Theme Name, um ein benutzerdefiniertes Theme umzubenennen, damit Sie es später wiedererkennen. Um eines zu entfernen, das Sie nicht mehr benötigen, klicken Sie auf den Text Theme löschen neben dem Namen des Themes.

Feldstile

Öffnen Sie die Optionen Feldstile in den WPForms-Blockeinstellungen. Hier finden Sie Steuerelemente für Größe, Rahmen, Rahmengröße, Rahmenradius und Farben.

Größe

Um die Größe Ihrer Formularfelder anzupassen, wählen Sie die gewünschte Größe in der Einstellung Größe aus. Verfügbare Größen sind Klein, Mittel und Groß.

Randradius

Um den Rand Ihrer Formularfelder anzupassen, verwenden Sie die Einstellung Randradius, um den gewünschten Radiuswert festzulegen. Ihre Formulare können dank dessen jetzt schöne, abgerundete Ecken haben.

Standardmäßig ist die Einheit für die Größenänderung von Formularelementen in WPForms auf Pixel (px) eingestellt. Klicken Sie auf die Einheit, um ein Dropdown-Menü mit verschiedenen Optionen anzuzeigen, wie z. B.:

• Pixel (PX)
• Prozent (%)
• Em Quadrat (EM)
• Roentgen-Äquivalent-Mann (REM)
• Viewport-Breite (VW)
• Viewport-Höhe (VH)

Farben

Um die Hintergrund-, Rand- und Textfarbe Ihrer Formularfelder anzupassen, öffnen Sie die Einstellung Farben in den WPForms-Blockeinstellungen.

Klicken Sie auf die spezifische Farboption, die Sie aktualisieren möchten, z. B. die Hintergrundfarbe. Ein Overlay wird angezeigt, das die verfügbaren Themenfarben zur Auswahl anzeigt.

Klicken Sie dann auf die Farbprobe, um den Farbauswahl zu öffnen, wo Sie die Farbe weiter verfeinern können.

Ein Hex-Farrcode kann in das Hex-Feld eingefügt werden, wenn Sie bereits eine Markenfarbe für Ihre Formulare im Sinn haben.

Label-Stile

Sie können jetzt die Schriftgröße und -farbe Ihrer Formularbeschriftungen hier im Abschnitt Beschriftungsstile ändern. Die verfügbaren Größen reichen von Klein bis Groß.

Um die Farben für Beschriftungen, Unterbeschriftungen und Fehlermeldungen zu aktualisieren, navigieren Sie zum Abschnitt Farben. Im Folgenden finden Sie eine Beschreibung der verfügbaren Optionen für die Beschriftungsfarbe.

• Beschriftung: Diese Einstellung bestimmt die Farbe der primären Beschriftung für Ihr Feld.
• Unterbeschriftung & Hinweis: Diese Einstellung bestimmt den Farbton, der für Feldunterbeschriftungen und Hinweise verwendet wird, wenn WPForms Vorschläge für Frontend-Werte macht.
• Fehlermeldung:  Die Textfarbe, die angezeigt wird, wenn ein Benutzer einen Fehler beim Ausfüllen Ihres Formulars macht.

Schaltflächenstile

Um das Design Ihrer Formularschaltflächen in WPForms zu ändern, navigieren Sie zu Schaltflächenstile. Klicken Sie auf das Dropdown-Menü unter Größe, um es zu öffnen und die Schaltflächengröße auszuwählen.

Wenn Sie der Schaltfläche einen abgerundeten Rand geben möchten, müssen Sie nur den gewünschten Wert in das Feld mit der Bezeichnung Randradius eingeben.

Als Nächstes finden Sie im Abschnitt Farben die Möglichkeit, sowohl die Hintergrundfarbe als auch die Textfarbe Ihrer Schaltfläche zu ändern.

In den meisten Fällen dient die Hintergrundfarbe der Schaltfläche auch als Akzentfarbe. Daher wird die Hintergrundfarbe der Schaltfläche auch als Primärfarbe für Kontrollkästchen, Optionsfelder, Fortschrittsbalken und Felder verwendet.

Container-Stile

Containerstile regelt die Box, in der sich Ihr Formular befindet, anstatt der Felder darin. Hier geben Sie einem Formular etwas Freiraum, eine definierte Kante oder etwas Abstand vom darunter liegenden Seitenbereich.

• Abstand: Legt den Raum innerhalb der Ränder des Containers fest, zwischen dem Rand der Box und Ihrem Formularinhalt. Erhöhen Sie ihn, wenn die Felder an den Rändern eingeengt wirken.
• Rahmenstil: Umrandet den Container mit einem durchgezogenen, gestrichelten oder gepunkteten Rand.
• Rahmengröße: Bestimmt, wie dick diese Umrandung ist. Pixel sind hier ebenfalls die Standardeinstellung, und die gleichen Einheitenoptionen gelten.
• Rahmenradius: Rundet die Ecken des Containers ab. Höhere Werte ergeben eine weichere Kartenform, während niedrigere Werte die Kanten scharf halten.
• Schatten: Fügt Tiefe hinter dem Container hinzu, mit Größen von keiner bis groß. Ein kleiner Schatten reicht normalerweise aus, um ein Formular von einem schlichten Hintergrund abzuheben.
• Farben: Legt die Rahmenfarbe des Containers fest, damit sein Rand gut zum Rest Ihres Designs passt.

Hintergrundstile

Hintergrundstile geben Ihnen die Kontrolle darüber, was sich hinter Ihrem Formular befindet, entweder eine flache Farbe oder ein ganzes Bild. Um mit einem Bild zu beginnen, öffnen Sie das Dropdown-Menü Bild und wählen Sie aus, woher es stammen soll.

Mediathek öffnet Ihre eigenen Uploads, wählen Sie diese also, wenn das Bild bereits auf Ihrer Website vorhanden ist oder Sie ein neues hochladen möchten. Stockfotos öffnet stattdessen eine Bibliothek mit professionellen Bildern.

Wenn Sie zum ersten Mal Stockfotos auswählen, zeigt WPForms eine Überlagerung an, die Sie auffordert, die Stockfoto-Bibliothek herunterzuladen. Klicken Sie auf Fortfahren auf dieser Benachrichtigung, und die Fotos werden zum Durchsuchen verfügbar.

Sobald Sie Ihre Auswahl getroffen haben, klicken Sie auf Bild auswählen, um die eigentliche Datei auszuwählen. Wenn ein Bild vorhanden ist, erscheinen im Panel vier weitere Einstellungen:

• Position: Richtet das Bild innerhalb des Formulars mit Optionen wie Oben Mitte und Unten Mitte aus, sodass Sie steuern, welcher Teil des Fotos angezeigt wird.
• Wiederholen: Entscheidet, wie das Bild gekachelt wird. Keine Wiederholung zeigt es einmal an, Kachel wiederholt es über den gesamten Hintergrund, und Horizontal wiederholen und Vertikal wiederholen wiederholen es entlang einer einzelnen Achse.
• Größe: Steuert, wie das Bild passt. Abdecken skaliert es, um den Hintergrund zu füllen, unabhängig von der Größe des Formulars, und Abmessungen ermöglicht es Ihnen, eine genaue Breite und Höhe einzugeben.
• Farben: Legt eine einfarbige Hintergrundfarbe fest, die angezeigt wird, wenn kein Bild verwendet wird.

Erweiterte Stile

Unter den Erweiterten Einstellungen können Sie auf den CSS-Code zugreifen, der alle benutzerdefinierten Stile enthält, die Sie auf Ihr Formular angewendet haben.

Wenn Sie diese Stile einfach auf ein anderes Formular verschieben möchten, suchen Sie nach der Option, die Stileinstellungen zu kopieren und einzufügen.

Wenn Sie die Änderungen an Ihrem Formular rückgängig machen möchten, klicken Sie auf die Schaltfläche Stileinstellungen zurücksetzen. Dadurch wird Ihr Formular auf seinen Standardstil zurückgesetzt und alle vorherigen Anpassungen rückgängig gemacht.

Das Feld Zusätzliche CSS-KLASSEN ist der Ort, an dem Sie alle anderen von Ihnen entwickelten CSS-Klassen frei eingeben können. Lesen Sie unseren Leitfaden, wie Sie neue CSS-Klassen implementieren, um mehr zu erfahren.

Schritt 6: Formular testen und veröffentlichen

Jetzt ist es an der Zeit, Ihre Änderungen zu speichern, indem Sie die Seite veröffentlichen oder als Entwurf speichern. Führen Sie abschließend einen schnellen Test durch, um sicherzustellen, dass Ihr Formular so aussieht und funktioniert, wie Sie es erwarten.

Sobald die Seite gespeichert ist, klicken Sie auf Vorschau, um das tatsächliche Formular mit Ihren angewendeten Stilen zu sehen. Der Block-Editor kommt dem schon sehr nahe, aber die Vorschau zeigt, was Ihre Besucher tatsächlich sehen werden.

FAQs zum Gestalten von WPForms im Block-Editor

Hier finden Sie Antworten auf die am häufigsten gestellten Fragen zu WPForms-Formularstilen, modernem Markup und Formularvorlagen.

Warum sehe ich keine Styling-Optionen für meinen WPForms-Block?

Zwei Einstellungen steuern dies, und beide befinden sich unter WPForms » Einstellungen » Allgemein. Formular-Styling einschließen muss auf Basis- und Formularvorlagen-Styling gesetzt sein, und Modernes Markup verwenden muss aktiviert sein.

Wenn Sie WPForms ab Version 1.8.1 oder neuer installiert haben, ist das moderne Markup bereits aktiviert und das Kontrollkästchen wird gar nicht erst angezeigt. Überprüfen Sie daher zuerst die Styling-Einstellung.

Der einzige wirkliche Hinderungsgrund ist das veraltete Kreditkartenfeld, das nicht mit modernem Markup kompatibel ist. Ein Formular, das es noch verwendet, kann daher im Block-Editor nicht gestylt werden, bis dieses Feld ausgetauscht wurde.

Benötige ich WPForms Pro, um meine Formulare zu gestalten?

Nein. Formular-Styling und alle über 40 Formularvorlagen funktionieren mit WPForms Lite, der kostenlosen Version. Jeder Schritt in dieser Anleitung funktioniert also mit einer kostenlosen Installation.

Pro fügt Funktionen wie Zahlungs-Add-ons, Umfragen und bedingte Logik bei Zahlungen hinzu, obwohl nichts davon erforderlich ist, um das Aussehen Ihrer Formulare zu ändern.

Behält mein Formular seine Stile, wenn ich es auf einer anderen Seite einbetten?

Stile, die im WPForms-Builder unter Einstellungen » Vorlagen angewendet werden, werden mit dem Formular gespeichert und folgen ihm überall hin, einschließlich Shortcode-Einbettungen, dem WPForms-Block und dem Divi-Modul. Stile, die im Block-Editor angewendet werden, bleiben nur bei dieser einen Einbettung.

Sie können also ein Formular einmal im Builder stylen, um ein konsistentes Aussehen auf Ihrer gesamten Website zu erzielen, und dann die Farben auf einer einzelnen Landingpage überschreiben, ohne das Original zu verändern.

Kann ich WPForms ohne den Block-Editor gestalten?

Ja. Der WPForms-Builder hat die gleichen Bereiche unter Einstellungen » Vorlagen, und alles, was Sie dort einstellen, gilt für die gesamte Website.

Elementor hat eigene Styling-Steuerelemente, sodass Sie Ihre Formulare in Elementor anpassen können, und diese Änderungen bleiben auf dieser Seite.

Divi funktioniert anders, da sein WPForms-Modul nur die eigenen Größen- und Abstands-Einstellungen von Divi anzeigt. Stylen Sie das Formular also im Builder, und die Divi-Einbettung übernimmt es.

Wie nehme ich Stiländerungen vor, die der Block-Editor nicht anbietet?

Fügen Sie Ihre eigenen Klassen in das Feld Zusätzliche CSS-Klasse(n) unter dem Panel Erweitert ein und schreiben Sie dann das CSS, um sie abzugleichen.

Der Leitfaden für benutzerdefiniertes CSS, der im obigen Abschnitt für erweiterte Stile verlinkt ist, behandelt die Klassen, die WPForms bereits anwendet, was das ist, was Sie anvisieren möchten.

Erstellen Sie als Nächstes interaktive Formulare, die das Engagement steigern

Suchen Sie nach weiteren Möglichkeiten, Ihre WPForms anzupassen? Schauen Sie sich diese Tipps an, um Ihre Formulare auf die nächste Stufe zu heben. Egal, ob Sie das Erscheinungsbild oder die Funktionalität Ihres Formulars verbessern möchten, wir haben das Richtige für Sie.

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.