So passen Sie ein Formular im WordPress-Blockeditor an [2024]

Veröffentlicht: 2024-07-31

Wenn Sie eine Website besitzen, unabhängig von ihrem Zweck – geschäftlich, persönlich, Affiliate oder anderweitig –, müssen Sie unbedingt über ein Formular für Abonnenten, eine Kontaktseite usw. verfügen . Formulare im Allgemeinen oder Kontaktformulare im Besonderen verbessern die Konnektivität, die Interaktion mit Website-Besuchern, Leads erstellen und so weiter. Da der Gutenberg-Editor in der WordPress-Community immer beliebter wird, lautet die häufigste Frage: Ist es möglich, mit dem Blockeditor ein Formular in WordPress zu erstellen und anzupassen ? Wenn Sie die Antwort herausfinden möchten, beginnen wir mit der Lektüre dieses Blogs.

Customize a Form in WordPress Block Editor

Verfügt der Gutenberg-Editor über einen Standardformularblock?

Bevor wir mit dem Tutorial zum Anpassen eines Formulars beginnen, wollen wir zunächst herausfinden, ob der Gutenberg- Editor über einen Standard-Formularblock verfügt oder nicht. Die Antwort ist nein.

Daher müssen Sie Gutenberg-Blockbibliotheken von Drittanbietern verwenden, um Formulare im WordPress-Blockeditor zu erstellen und zu ändern. Es stehen mittlerweile unzählige Optionen zum Erstellen und Anpassen eines Formulars zur Verfügung. Treffen Sie eine Auswahl basierend auf dem Grund für die Erstellung und Personalisierung des Formulars.

Die 3 besten Gutenberg-Plugins zum Anpassen von Formularen für den WordPress-Blockeditor

Um Ihnen bei der Anpassung eines Formulars zu helfen, haben wir die drei besten Gutenberg-Plugins sorgfältig ausgewählt. Hier sind die Plugins mit vielseitigen Formularlayouts. Schauen Sie sich diese an und wählen Sie die am besten geeignete aus.

1. Bilden Sie einen Block aus wesentlichen Blöcken

Mit über 50 kreativen Blöcken entwickelt sich Essential Blocks für Gutenberg schnell zu einem der beliebtesten Gutenberg-Block-Plugins. Unter ihnen ist der Formularblock derjenige, der Ihnen dabei hilft, Formulare für jeden Zweck zu erstellen und vollständig anzupassen: Abonnement, Kontakt, Zahlung, Spende und die Liste geht weiter.

Mit dem Essential Blocks Form-Block stehen Ihnen unbegrenzte Anpassungs- und Gestaltungsmöglichkeiten zur Verfügung. Der Formularblock ermöglicht die Integration mit reCAPTCHA und Mailchimp und ermöglicht Ihnen den Zugriff auf eine Vielzahl von Funktionen. Der Formularblock hat insgesamt neun innere Blöcke eingeführt, um benutzerdefinierte Felder hinzuzufügen und Ihre Formulare anzupassen, um Ihr Benutzererlebnis zu maximieren. Andere bemerkenswerte innere Blöcke sind Textfeld, Textbereichsfeld, E-Mail-Feld, Zahlenfeld, Auswahlfeld, Kontrollkästchenfeld, Radiofeld, Datum-/Uhrzeitauswahl usw.

Es gibt noch mehr im Essential Addons Form-Block. Sie können Formularblock-Antworten ganz einfach über das Dashboard sammeln und analysieren , vom Backend aus antworten usw. Außerdem können Sie Ihre Formularblock-Antworten ganz einfach als CSV-Dateien exportieren, um sie gründlich zu analysieren.

Customize a Form in WordPress Block Editor

2. Forminator Custom Form Builder

Für jede Art von Website und jeden Anlass ist Forminator ein benutzerfreundliches, spezielles WordPress-Formularerstellungs-Plugin. Sie können jede Art von Formular erstellen, einschließlich Bestellung, Zahlung, Kontakt, E-Mail, Feedback, interaktive Umfragen usw. Beliebtere Anwendungen davon sind Quizze mit Echtzeitergebnissen, „Keine falschen Antworten“-Fragen im BuzzFeed-Stil, Service-Schätzer usw Anmeldeformulare mit PayPal und Stripe als Zahlungsoptionen.

Das Einrichten und Anpassen von Formularen für Ihre WordPress-Website ist mit dem visuellen Drag-and-Drop-Builder von Forminator ganz einfach. Sammeln Sie Informationen, gestalten Sie Ihre Inhalte interaktiv und generieren Sie mehr Conversions mit Forminator.

Customize a Form in WordPress Block Editor

3. Bilden Sie den Otterblock

Otter ist eine weitere beliebte Gutenberg-Bibliothek, die über einen eigenen Formularblock verfügt. Mit dem Otter Blocks Form Block für WordPress können Benutzer ganz einfach anpassbare Kontaktformulare zu ihren Websites hinzufügen. Es lässt sich zur Lead-Generierung in Marketing-Tools wie SendinBlue und Mailchimp integrieren, bietet Bot-Schutz mit CAPTCHA und bietet erweiterte Styling-Optionen. Formulare können in Bezug auf Textfarbe, Größe, Elementabstände und mehr angepasst werden, was sie zu einem vielseitigen Werkzeug zur Verbesserung der Website-Interaktion und -Funktionalität macht.

Customize a Form in WordPress Block Editor

Wie passe ich ein Formular im WordPress-Blockeditor mithilfe wesentlicher Blöcke an?

Jetzt wissen wir: Ja, wir können mithilfe eines Gutenberg-Plugins ein Formular im WordPress-Blockeditor anpassen . Schauen wir uns die Schritt-für-Schritt-Anleitungen zum Erstellen und Anpassen eines Formulars in Gutenberg an. Für das Tutorial verwenden wir dieses Mal das Essential Blocks-Plugin .

Schritt 1: Installieren und aktivieren Sie das Essential Blocks Plugin

Um ein Formular in WordPress zu erstellen und anzupassen, müssen Sie das Plugin in Ihrem WordPress-Dashboard installieren und aktivieren . Navigieren Sie also zu Plugins → Neu hinzufügen , suchen Sie nach Essential Blocks und installieren Sie sie dann. Anschließend aktivieren Sie auch das Plugin.


Sie finden den Formularblock im Reiter „Blöcke“ im Plugin-Dashboard. Aktivieren Sie den Block von dort aus. Jetzt können Sie ein Formular in Gutenberg erstellen und anpassen.

Schritt 2: Passen Sie ein Formular in Gutenberg an

Öffnen Sie im Gutenberg-Editor eine Seite, auf der Sie ein Formular anpassen möchten. Klicken Sie anschließend auf das „+“-Symbol und suchen Sie nach dem Formularblock. Klicken Sie in den Vorschlägen darauf und es wird sofort zu Ihrer Seite hinzugefügt. Oder Sie können es direkt per Drag & Drop an die gewünschte Stelle ziehen.

Customize a Form in WordPress Block Editor

Sobald Sie den Block zu Ihrer Webseite oder Ihrem Beitrag hinzugefügt haben, werden Sie aufgefordert, einen Formulartyp auszuwählen. Im Formularblock stehen drei Standardformulartypen zur Verfügung: Kontaktformular, Abonnementformular und RSVP-Formular. Darüber hinaus besteht die Möglichkeit, ein leeres Formular hinzuzufügen und es nach Bedarf anzupassen.

Wir werden ein Kontaktformular erstellen und es dann anpassen. Das Kontaktformular verfügt über zwei Vorlagen zur Auswahl und Formularstile. Sie können alles auswählen, was Ihren Vorlieben entspricht. Darüber hinaus können Sie mit einer Umschalttaste Feldbeschriftungen und Feldsymbole hinzufügen.

Customize a Form in WordPress Block Editor

Sie können auch MailChimp integrieren, um auf E-Mail-Funktionen zuzugreifen. Sie müssen jedoch ein Upgrade auf Premium durchführen, um dies nutzen zu können. Jedes Kontaktformularfeld verfügt über Optionen zum Anzeigen einer Beschriftung, zum Ändern des Platzhaltertexts, zum Erforderlichmachen des Felds mit einer Schaltfläche mit nur einem Tastendruck, zum Hinzufügen oder Entfernen eines Symbols und mehr, um das Formular noch individueller anzupassen.

Customize a Form in WordPress Block Editor

Auf der Registerkarte „Stil“ finden Sie Optionen, mit denen Sie das Aussehen Ihres Kontaktformulars ändern können, um ein individuelleres Erscheinungsbild zu erzielen. Es besteht die Möglichkeit, Ausrichtung, Abstände, Farbe, Typografie und mehr für jedes Feld, jedes Symbol und sogar für innere Blöcke anzupassen.

Customize a Form in WordPress Block Editor

Schritt 3: Veröffentlichen Sie das neu erstellte Formular

Nachdem Sie das Formular an Ihre Bedürfnisse angepasst haben, veröffentlichen Sie Ihre Seite/Ihren Beitrag. Wenn Sie also die einfachen Schritte befolgen, können Sie mit dem Essential Blocks-Formular in Gutenberg schnell ein Formular hinzufügen und anpassen.

Hier ist das Video-Tutorial, das Sie sich mit ausführlichen Richtlinien ansehen können.

Erstellen Sie herausragende Formulare und generieren Sie Leads

Ein Formular ist für Ihre Website wichtig. Und mit dem richtigen Tool können Sie ein Formular ohne Codierung im WordPress-Blockeditor in weniger als 5 Minuten anpassen. Fanden Sie diesen Blog nützlich? Dann teilen Sie es mit anderen und abonnieren Sie unseren Blog für kommende Updates und Tutorials.