Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Der Einsatz eines Drag-and-Drop-Formularerstellers für WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

Formulare waren schon immer ein integraler Bestandteil des Internets. Als Inhaber einer WordPress-Website haben Sie keine andere Wahl, als sie zu verwenden, wenn Sie möchten, dass Ihre Benutzer mit Ihnen kommunizieren. Die Erstellung eines modernen Formulars, das den besten Praktiken folgt und dem Erscheinungsbild Ihrer Website entspricht, kann jedoch eine gewaltige Aufgabe sein, besonders wenn Sie sich nicht wohl dabei fühlen, Code zu schreiben.

Glücklicherweise gibt es mehrere leistungsstarke WordPress-Formularersteller—mit intuitiven WYSIWYG-Schnittstellen mit Drag-and-Drop-Unterstützung—die heute auf CodeCanyon zur Verfügung stehen. FormCraft, das von der CodeCanyon Elite-Autorin nCrafts entwickelt wurde, ist ein solcher Formularersteller.

FormCraft ist ein GDPR-fähiges, erstklassiges WordPress-Plugin, mit dem Sie in wenigen Minuten schöne Formulare für Ihre Website erstellen können. Es verfügt über fortgeschrittene Funktionen, darunter Unterstützung für AJAX-Anfragen, Trigger, Popup-Meldungen und sogar bedingte Logik. Durch Add-Ons bietet es zusätzliche Funktionen wie die Integration mit MailChimp und reCAPTCHA.

In diesem Tutorial zeige ich Ihnen, wie Sie das Plugin installieren und einige seiner wichtigsten Funktionen nutzen können.

1. Installation von FormCraft

Loggen Sie sich in Ihr Envato-Konto ein und gehen Sie zu CodeCanyon, damit Sie eine Lizenz zur Nutzung von FormCraft erwerben können. Mit über 16.000 Verkäufen ist es dort einer der beliebtesten Artikel.

FormCraft on CodeCanyonFormCraft on CodeCanyonFormCraft on CodeCanyon

Nach einem erfolgreichen Kauf haben Sie Zugang zu einer ZIP-Datei, die Sie zur Installation des Plugins verwenden können.

Melden Sie sich im Admin-Panel Ihrer WordPress-Instanz an und navigieren Sie zu Plugins > Neu hinzufügen. Klicken Sie dann auf die Schaltfläche Plugin hochladen. Auf dem nächsten Bildschirm drücken Sie zuerst die Schaltfläche Durchsuchen..., um die ZIP-Datei auszuwählen, und drücken Sie dann die Schaltfläche Jetzt installieren, um die Installation zu starten.

FormCraft installationFormCraft installationFormCraft installation

Beachten Sie, dass die Größe des Plugins 2,3 MB beträgt. Wenn sich Ihre WordPress-Instanz beschwert, dass die Größe des Plugins die maximal zulässige Größe für hochgeladene Dateien überschreitet, müssen Sie den Wert der Variable upload_max_filesize in Ihrer php.ini-Datei erhöhen.

Sobald das Plugin installiert ist, klicken Sie auf die Schaltfläche Plugin aktivieren, um es zu verwenden.

2. Ein Formular mit einer Vorlage erstellen

Ihr WordPress-Adminmenü sollte jetzt einen neuen Abschnitt mit dem Namen FormCraft haben. Öffnen Sie ihn und drücken Sie die Schaltfläche Neues Formular, damit Sie mit der Erstellung Ihres ersten Formulars beginnen können.

FormCraft home screenFormCraft home screenFormCraft home screen

In dem Popup-Fenster wählen Sie die Option Vorlage. Da FormCraft mit fast einem Dutzend gut gestalteter Vorlagen für gängige Formulartypen geliefert wird, ist die Verwendung einer solchen Vorlage der einfachste und schnellste Weg zur Erstellung Ihres Formulars.

Zunächst lassen wir uns ein Kontaktformular erstellen. Wählen Sie also eine beliebige Kontaktvorlage, geben Sie dem Formular einen Namen und drücken Sie die Schaltfläche Formular erstellen. Ich werde die Vorlage Kontakt (2) verwenden.

Creating a form from a templateCreating a form from a templateCreating a form from a template

Sobald das Formular fertig ist, werden Sie automatisch zu einer Schnittstelle weitergeleitet, wo Sie es bearbeiten können.

Die Bearbeitung eines Formulars mit FormCraft ist extrem einfach. Normalerweise müssen Sie nur auf das Formularfeld klicken, das Sie ändern möchten, und seine Eigenschaften aktualisieren. Beispielsweise, wenn Sie das Beschriftungsfeld Name ändern möchten, klicken Sie darauf und in dem Popup-Fenster den Wert der Eigenschaft Beschriftung aktualisieren

Editing a form fieldEditing a form fieldEditing a form field

Um den Popup-Dialog zu schließen, klicken Sie irgendwo außerhalb des Fensters.

Wenn Sie mit all Ihren Änderungen zufrieden sind, können Sie sie dauerhaft machen, indem Sie auf die Schaltfläche Speichern klicken.

3. Anzeigen des Formulars

Es gibt zwei verschiedene Vorgehensweisen, die Sie verfolgen können, um ein mit FormCraft erstelltes Formular anzuzeigen. Die erste Vorgehensweise besteht in der Verwendung einer speziellen Formularseite, die eine eigene eindeutige URL hat und nichts anderes als das Formular anzeigt. Dieses Vorgehen benötigt einen minimalen Aufwand und macht es Ihnen außerdem leicht, das Formular weiter mitzuteilen.

Standardmäßig erstellt FormCraft automatisch für jedes Formular eine eigene Formularseite. Um die URL des Formulars zu ermitteln, das Sie im vorherigen Schritt erstellt haben, klicken Sie auf die Schaltfläche Einstellungen und wechseln Sie auf die Registerkarte Allgemein.

General tab showing the URL of the form pageGeneral tab showing the URL of the form pageGeneral tab showing the URL of the form page

Die zweite Vorgehensweise besteht darin, das Formular in einem Beitrag oder einer Seite einzubetten. Dieses Vorgehen ist flexibler, da es Ihnen erlaubt, zuzüglich Text oder Bilder zusammen mit dem Formular anzuzeigen.

Um ein FormCraft-Formular einzubetten, benötigen Sie dessen Shortcode. Um zu wissen, welcher das ist, gehen Sie zu Einstellungen > Einbetten > Shortcode.

Embed tab showing the shortcodeEmbed tab showing the shortcodeEmbed tab showing the shortcode

Jedes Formular, das Sie mit FormCraft erstellen, hat seinen eigenen, einzigartigen und leicht zu merkenden Shortcode.

An diesem Punkt können Sie einen neuen Beitrag erstellen und den Shortcode eingeben, um das Formular einzubetten. Hier ist ein Beispiel für einen Beitrag, der ein FormCraft-Formular enthält:

WordPress post with an embedded formWordPress post with an embedded formWordPress post with an embedded form

4. Behandlung von Formulareingaben

Nachdem ein Benutzer Ihr Formular ausgefüllt hat, wird er oder sie es natürlich abschicken. Es gibt zwei verschiedene Möglichkeiten, wie Sie das ausgefüllte Formular erhalten können. Die erste Möglichkeit besteht darin, es als E-Mail von Ihrem WordPress-Server zu erhalten. Dies erfordert keine Programmierung und ist ideal für die Bearbeitung einer kleinen Anzahl von Formulareingaben.

Um ein eingereichtes Formular als E-Mail zu erhalten, gehen Sie zu Einstellungen > E-Mail > E-Mail-Setup.

FormCraft kann E-Mails mit Ihren Standard-Einstellungen für WordPress oder mit einer benutzerdefinierten SMTP-Konfiguration versenden. In der Regel sind die Standardeinstellungen ausreichend. Wechseln Sie also zur Registerkarte WP-Mail und füllen Sie die Felder Absendername und Absender-E-Mail nach Ihren Präferenzen aus. Wie Sie vielleicht schon vermutet haben, wird die E-Mail-Adresse, die Sie hier angeben, diejenige sein, von der Sie alle Formulareingaben erhalten werden.

Email setup screenEmail setup screenEmail setup screen

Erweitern Sie als nächstes den Abschnitt E-Mail-Benachrichtigungen. Hier müssen Sie die E-Mail-Adresse angeben, an die alle ausgefüllten Formulare gesendet werden müssen. Sie können dieselbe E-Mail-Adresse verwenden, die Sie zuvor eingegeben haben.

Lassen Sie den Rest der Konfiguration unverändert und drücken Sie die Schaltfläche Speichern.

Ihr erstes Übermittlungsformular ist bereit. Wenn ein Benutzer Ihr Formular abschickt, werden Sie es von nun an als E-Mail erhalten.

Wenn Sie glauben, dass Sie Tausende von Formulareingaben erhalten werden, ist es besser, ein automatisches Vorgehen zu verfolgen. FormCraft kann die eingereichten Formulardaten an jede von Ihnen angegebene benutzerdefinierte URL senden. Wenn Sie diesen Ansatz verfolgen möchten, gehen Sie zu Einstellungen > Allgemein und geben Sie Ihre benutzerdefinierte URL ein. Wenn Sie außerdem das eingereichte Formular als JSON-Dokument erhalten möchten, aktivieren Sie die Option POST (JSON).

Configuring a custom URLConfiguring a custom URLConfiguring a custom URL

Welche Logik Sie verwenden, um das ausgefüllte Formular unter der benutzerdefinierten URL zu handhaben, bleibt Ihnen überlassen. Der folgende Beispielcode zeigt Ihnen, wie Sie jede Dateneingabe als Datei mit einem speziellen Namen auf dem Dateisystem Ihres Servers speichern können:

Mit dem obigen Code wird jedes eingereichte Formular in einer Datei gespeichert, deren Inhalt wie folgt aussieht:

5. Erstellen eines benutzerdefinierten Formulars

Wenn Sie der Meinung sind, dass keine der vorbereiteten Vorlagen Ihren Anforderungen entspricht, können Sie ein neues Formular von Grund auf neu erstellen. Um ein realistisches Beispiel zu geben, lassen wir uns jetzt ein Formular erstellen, mit dem Benutzer Filmrezensionen einreichen können.

Als Erstes gehen Sie zum FormCraft Dashboard und die Schaltfläche Neues Formular erneut drücken.

Wählen Sie diesmal die Option Leer, geben Sie dem Formular einen Namen und drücken Sie die Schaltfläche Formular erstellen.

Sie sehen nun eine leere Seite ohne Formularfelder. Seine Breite ist standardmäßig auf 420 px eingestellt. Es steht Ihnen frei, sie in einen Prozentwert zu ändern, wenn Sie nicht möchten, dass es eine feste Breite hat.

Klicken Sie dann auf die Schaltfläche Feld hinzufügen, um Ihr erstes Formularfeld hinzuzufügen.

Types of fields availableTypes of fields availableTypes of fields available

Wie Sie sehen, bietet Ihnen FormCraft über 15 verschiedene Arten von Formularfeldern zur Auswahl.

Um dem Formular eine Überschrift hinzuzufügen, klicken Sie auf das Feld Überschrift. Sobald die Überschrift hinzugefügt wurde, klicken Sie auf das Feld, um seine Eigenschaften zu ändern.

In dem Popup-Fenster können Sie den Text ändern, den das Feld anzeigt, die Randabstände anpassen, die Schriftart ändern und ihm sogar eine Hintergrundfarbe geben.

Um den Namen des Films zu akzeptieren, klicken Sie auf die Schaltfläche Feld hinzufügen und wählen Sie die Eingabemöglichkeit Eine Zeile.

Klicken Sie auf das neu hinzugefügte Feld, um seinen Eigenschaftendialog zu öffnen. Geben Sie dem Feld hier ein entsprechendes Label und Unteretikett. Wenn Sie möchten, können Sie auf die Eigenschaft Icon klicken, um ein Icon neben dem Feld anzuzeigen.

Um sicherzustellen, dass Ihre Benutzer das Feld nicht leer lassen, markieren Sie die Eigenschaft Erforderliches Feld. Da Filmnamen Leerzeichen enthalten können, kreuzen Sie zusätzlich das Feld Leerzeichen erlauben an.

Mit den Eigenschaften Min-Zeichen und Max-Zeichen können Sie auch die Länge des vom Benutzer eingegebenen Textes steuern.

Creating and configuring a one line input fieldCreating and configuring a one line input fieldCreating and configuring a one line input field

Klicken Sie irgendwo außerhalb des Eigenschaftsdialog, um ihn zu schließen. Wählen Sie dann Feld hinzufügen > Umfrage > Sternebewertung. Wie der Name schon sagt, ermöglicht dieses Feld Ihren Benutzern, dem Film eine Sternebewertung zu geben.

Configuring a star rating fieldConfiguring a star rating fieldConfiguring a star rating field

In ähnlicher Weise können Benutzer ihre Meinung über den Film schreiben, indem sie dem Formular eine Textarea hinzufügen.

Wählen Sie schließlich Feld hinzufügen > Abschicken, um dem Formular eine Schaltfläche zum Abschicken hinzuzufügen. Wenn Sie möchten, dass die Schaltfläche breit ist, markieren Sie die Option Wide Button (breite Schaltfläche).

An diesem Punkt ist Ihr benutzerdefiniertes Formular fertig. Klicken Sie auf die Schaltfläche Speichern, um es zu speichern.

Um einen Blick darauf zu werfen, können Sie direkt die entsprechende Formularseite besuchen, deren URL Sie unter Einstellungen > Allgemein festlegen können.

So sieht das Formular aus:

Custom formCustom formCustom form

Schlussfolgerung

In diesem Tutorial haben Sie gelernt, wie Sie das FormCraft WordPress-Plugin verwenden können, um sowohl vorlagenbasierte als auch benutzerdefinierte Formulare für Ihre WordPress-Site zu erstellen. Mit ein wenig Kreativität können Sie nun schnell Formulare erstellen, um wesentliche Aufgaben wie das Sammeln von E-Mail-Adressen, die Durchführung von Umfragen oder Quizfragen und die Annahme von Buchungen durchzuführen.

FormCraft wird mit sechs Monaten kostenloser Unterstützung durch den Autor geliefert. Wenn Sie Probleme bei der Benutzung haben, nutzen Sie die Kommentarseite auf CodeCanyon, um Hilfe zu erhalten.

Wenn Sie mehr über Formular-Plugins erfahren möchten, sehen Sie sich einige dieser anderen Beiträge über WordPress-Formular-Plugins hier auf Envato Tuts+ an.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.