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.

1. WPForms installieren und aktivieren

WPForms vereinfacht den Prozess der Erstellung und Verwaltung von Formularen auf Ihrer Website. Das Plugin erstellt mühelos verschiedene Formulare, darunter Kontaktformulare, Umfragen, Abstimmungen und Registrierungsformulare, ohne Programmierkenntnisse.

Auch die Gestaltung von Formularen mit WPForms ist dank seiner benutzerfreundlichen Oberfläche, der umfangreichen Anpassungsoptionen und der Fähigkeit, visuell ansprechende und responsive Formulare mit dem Block-Editor zu erstellen, ein Kinderspiel.

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.

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.

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, navigieren Sie zum Abschnitt Einstellungen in WPForms und wählen Sie die Registerkarte Allgemein.

Scrollen Sie zum Abschnitt Allgemein, um die Option Modern Markup verwenden zu aktivieren. Wenn diese Option aktiviert ist, sind Sie bereit, Ihr Formular über den Block-Editor zu gestalten.

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!

4. Das 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!

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 finden eine Vielzahl von Optionen für die Gestaltung von Formularfeldern, Label-Stilen und Button-Stilen, die zu Ihrer Markenästhetik passen.

Zusätzlich bietet der Abschnitt Erweitert die Möglichkeit, Stileinstellungen zwischen Formularen zu kopieren, was den Styling-Prozess noch weiter vereinfacht.

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

Feldstile

Navigieren Sie zu den Optionen Feldstile in den WPForms-Blockeinstellungen. Suchen Sie die Einstellungen für Größe, Randradius und Farbe.

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.

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.

6. Das 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.

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.

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.