Erstellen eines Kontaktformulars in WordPress mit einem kostenlosen Plugin

() translation by (you can also view the original English article)

Heute werden wir das Formidable Forms-Plugin für WordPress besprechen, mit dem Sie auf einfache Weise verschiedene Arten von Formularen erstellen können. Insbesondere werden wir uns ansehen, wie Sie dieses Plugin verwenden können, um ein Kontaktformular für Ihre Website zu erstellen. Wir beginnen mit der Untersuchung der grundlegenden Einstellungen, die dieses Plugin bietet, und später gehen wir ein Beispiel aus der Praxis durch, wie Sie mit diesem Plugin ein Kontaktformular erstellen können.

Als Website-Besitzer möchten Sie vielleicht Feedback von Ihren Benutzern und Kunden zu Ihren Dienstleistungen erhalten—das hilft Ihnen, sie besser zu bedienen. Daher ist ein Kontaktformular auf Ihrer Website eine der unverzichtbaren Funktionen, um Feedback von Ihren Benutzern einzusammeln.

Wenn Sie ein WordPress-Entwickler sind oder es Ihr Hobby ist, Websites mit WordPress zu erstellen, wissen Sie bereits, dass WordPress eine Menge Plugins für fast jede erdenkliche Funktion bietet, und es kann schwierig sein, sich für eine davon zu entscheiden. Für diesen Beitrag habe ich eines der besten in der Kategorie Formidable Forms ausgewählt, und ich werde Ihnen im Laufe dieses Tutorials zeigen, wie man es benutzt.

Für diesen Beitrag habe ich WordPress 5.1 verwendet, und die Plugin-Version von Formidable Forms ist 3.06. Ich würde Ihnen empfehlen, es zu installieren, wenn Sie diesem Beitrag folgen wollen. Um das Formidable Forms-Plugin zu installieren, müssen Sie nur dem Standard-Installationsprozess folgen.

In den nächsten beiden Abschnitten werden wir die Grundlagen des Formidable Forms-Plugins zusammen mit dem Installationsprozess untersuchen. Dann werden wir ein Beispiel aus der realen Welt erstellen, das die Verwendung dieses Plugins demonstriert. In der Zwischenzeit gehen wir auch einige wichtige Aspekte dieses Plugins durch, mit dem Sie verschiedene Arten von Formularen erstellen können, die Daten erfassen können—nicht nur Kontaktformulare.

Was ist Formidable Forms?

Das Formidable Forms-Plugin ist ein leistungsstarkes Formularbuilder-Plugin, mit dem Sie verschiedene Arten von Formularen erstellen können, um Informationen von Benutzern einzusammeln. Es bietet eine Drag-and-Drop-Schnittstelle auf dem Back-End, die den gesamten Prozess zu einem Kinderspiel macht. Tatsächlich können Sie dieses Plugin verwenden, um jede Art von Formularen zu erstellen, die Sie sich vorstellen können, nicht nur Kontaktformulare.

Werfen wir einen kurzen Blick auf die Funktionen, die es bietet:

Drag-and-Drop-Kontaktformular-Maker und Formularbuilder
Unterstützung für E-Mail-Benachrichtigungen und Autoresponder
Anpassen des Aussehens und der Gestaltung Ihrer Kontaktformulare mit einem integrierten Styler
Integration mit MailChimp, Constant Contact, Salesforce und mehr
Mobilfreundlich und responsive
Spam-Schutz
und mehr

Wie Sie sehen können, bietet das Plugin eine Menge aufregender Funktionen, die Sie für die Erstellung großartiger Formulare auf Ihrer Website verwenden könnten. Und es ist auch erweiterbar, was ein wichtiges Merkmal ist, da es Entwicklern die Möglichkeit bietet, bestimmte Aspekte und das Kernverhalten des Plugins zu verändern.

Im nächsten Abschnitt werden wir ein paar Kernelemente dieses Plugins besprechen, die wichtig zu verstehen sind, wenn Sie dieses Plugin effektiv einsetzen wollen.

Einstellungen erforschen

Sobald Sie das Formidable Forms-Plugin installiert haben, fügt es einen Link in der linken Sidebar hinzu. Lassen Sie uns jeden Abschnitt kurz durchgehen.

Formulare

In diesem Abschnitt können Sie neue Formulare erstellen, vorhandene Formulare bearbeiten und eine Liste der bereits erstellten Formulare anzeigen.

Er bietet drei verschiedene Möglichkeiten, ein neues Formular zu erstellen. Sie können ein Formular von Grund auf neu erstellen, indem Sie die Drag-and-Drop-Schnittstelle verwenden. Oder Sie können aus den integrierten Formularvorlagen wählen, um mit der Erstellung Ihres neuen Formulars zu beginnen. Und schließlich können Sie ein Formular auch aus einer XML-Datei importieren. In jedem Fall werden Sie am Ende ein Formular erstellen, das am Front-End angezeigt wird, indem Sie den Shortcode verwenden.

Einträge

Hierbei handelt es sich um eine Seite, auf der alle über das Front-End eingereichten Datensätze aufgelistet werden. Es gibt einen Filter, mit dem Sie Datensätze nach Formulartyp filtern können. Zusätzlich zur Auflistung können Sie einen Eintrag auch in der Formulardetailansicht im Detail betrachten. Und schließlich gibt es eine Option zum Löschen, die Sie verwenden können, wenn Sie die alten Datensätze bereinigen möchten.

Stile

In diesem Abschnitt können Sie die verschiedenen Formularstile verwalten, die zur Gestaltung eines Formulars verwendet werden können, wenn es im Front-End angezeigt wird.

Mit einem Formularstil können Sie konfigurieren und anpassen, wie die verschiedenen Elemente Ihres Formulars—wie z. B. Formulartitel, Feldbeschriftungen oder Schaltflächen—angezeigt werden sollen. Es ist bereits ein Standardstil verfügbar, den Sie nach Ihren Anforderungen verwenden und anpassen können. Wenn Sie außerdem keinen Formularstil verwenden möchten, können Sie das Styling deaktivieren und auch benutzerdefiniertes CSS verwenden.

Importieren/Exportieren

In diesem Abschnitt können Sie mit diesem Plugin erstellte Formulare importieren und exportieren. Es ist eine wirklich nützliche Funktion, wenn Sie Ihre Formulare zwischen verschiedenen WordPress-Installationen verschieben möchten.

Wenn Sie beispielsweise einige Formulare in Ihrer lokalen Einrichtung erstellt haben und diese Formulare auf Ihre Live-Site verschieben möchten, würden Sie sie dann erneut auf der Live-Site erstellen? Tatsächlich könnten Sie diese Formulare einfach entweder im XML- oder CSV-Format exportieren und sie mit dieser Funktion in die Live-Installation importieren. Ich würde sagen, diese Funktion ist ein Muss!

Globale Einstellungen

In diesem Abschnitt können Sie Einstellungen konfigurieren, die global auf alle Formulare anwendbar sind. Sie können verschiedene Aspekte dieses Plugins konfigurieren, wie:

Benutzerrechte
reCAPTCHA-Einstellungen
Standard-Front-End-Nachrichten
IP-Speicherung

Im nächsten Abschnitt werden wir ein Beispiel aus der realen Welt als Demo aufbauen.

Erstellen eines Kontaktformulars mit Formidable Forms

In diesem Abschnitt erstellen wir ein Beispiel aus der Praxis, um zu zeigen, wie Sie das Formidable Forms-Plugin verwenden können, um ein Kontaktformular auf Ihrer Website zu erstellen.

Bevor wir fortfahren, stellen Sie sicher, dass Sie das Formidable Forms-Plugin auf Ihrer WordPress-Site installiert haben, wenn Sie mitmachen möchten.

Sie könnten das integrierte Kontaktformular verwenden, das mit diesem Plugin geliefert wird, aber wir werden ein neues Formular von Grund auf erstellen, um den gesamten Prozess zu verstehen. Gehen Sie voran und rufen Sie den Link Formidable > Forms in der linken Seitenleiste im Backend auf. Dort sollten alle in Ihrem System vorhandenen Formulare aufgelistet sein. Klicken Sie auf die Schaltfläche Neu hinzufügen, um ein neues Formular zu erstellen, und wählen Sie dann eine der folgenden drei Optionen.

Sie sollten mit diesen drei Optionen vertraut sein—wir haben sie gerade im vorigen Abschnitt diskutiert. Klicken Sie auf Leeres Formular erstellen, um ein Formular von Grund auf neu zu erstellen, und das sollte Ihnen die folgende Schnittstelle bieten.

Wie Sie sehen können, ist die Oberfläche des Form Builder recht intuitiv. Sie können Ihrem Formular beliebig viele Felder aus der Liste in der rechten Sidebar hinzufügen.

Zuerst geben wir den Namen unseres Formulars ein. Geben Sie Contact Us in das Feld Enter title here ein.

In unserem Beispiel werden wir Felder für die folgenden Daten hinzufügen:

Name
E-Mail
Telefon
Betreff
Nachricht
reCAPTCHA

Ziehen Sie das Feld Text aus der Feldliste in der rechten Seitenleiste und legen Sie es im Inhaltsbereich mit dem Titel Hier Felder hinzufügen ab. Dadurch wird ein neues Feld in Ihrem Formular hinzugefügt.

Sobald Sie ein Feld hinzugefügt haben, müssen Sie bestimmte Einstellungen für dieses Feld konfigurieren. Da wir gerade ein neues Textfeld hinzugefügt haben, sehen wir uns an, wie Sie es so konfigurieren, dass es zum Namensfeld wird.

Wie Sie sehen können, können wir im Abschnitt Feldeinstellungen die verschiedenen Aspekte des Feldes konfigurieren, wie z.B. ob es erforderlich ist, die Etikettenposition oder die Feldgröße. Fahren Sie fort und konfigurieren Sie das Namensfeld.

Als nächstes fügen Sie die Felder E-Mail, Telefon und Betreff über dieselbe Drag-and-Drop-Oberfläche hinzu. Die Felder, die wir bisher hinzugefügt haben, sind alle Textfelder.

Fügen Sie als nächstes das Absatzfeld hinzu, das in unserem Formular als Nachrichtenfeld fungiert. Dieses wird vom Typ Absatz sein.

Und schließlich fügen Sie ein reCAPTCHA-Feld zur Spam-Abwehr hinzu. Um den reCAPTCHA-Spamschutz zu aktivieren, müssen Sie den Site Key und den Secret Key unter Formidable > Global Settings > reCAPTCHA konfigurieren, wie im folgenden Screenshot gezeigt.

Nachdem alle Felder hinzugefügt wurden, sollte das Formular wie im folgenden Screenshot dargestellt aussehen:

Natürlich ist dies nur eine Back-End-Vorschau. Sie müssen den Kurzcode verwenden, um das Formular im Front-End anzuzeigen. Sie können den Shortcode Ihres Formulars von der Formularauflistungsseite kopieren.

Holen Sie sich den Shortcode des Formulars, das Sie gerade erstellt haben. Sie können dieses Kürzel in einem Beitrag oder in der Seitenleiste verwenden—wo immer Sie dieses Formular anzeigen möchten.

Es wird ungefähr so aussehen:

Fahren Sie fort und reichen Sie das Formular ein, um es zu testen. Sie können die eingereichten Einträge im Abschnitt Formidable > Einträge überprüfen.

Auf diese Weise könnten Sie ein Formular erstellen, Felder hinzufügen und es schließlich mit Hilfe eines Kurzwahlcodes am Front-End anzeigen. Tatsächlich können Sie viel mehr tun, da Formidable Forms eine Menge Funktionen bietet. Ich möchte Sie dazu ermutigen, andere Einstellungen zu erforschen, die dieses Plugin bietet—das sollte Spaß machen!

Advanced Formular-Plugins

Wie ich oben gezeigt habe, ist Formidable Forms ein ausgezeichnetes kostenloses Paket zum Erstellen von WordPress-Formularen. Wenn Sie jedoch fortgeschrittenere Funktionen für Ihre Website benötigen, sollten Sie sich einige der professionellen Formular-Ersteller ansehen, die bei CodeCanyon erhältlich sind. Für einen geringen Preis können Ihnen diese Plugins viel Arbeit ersparen und Ihre WordPress-Site auf die nächste Stufe bringen.

Verwenden Sie einen Drag-and-Drop-Formular-Ersteller für WordPress
FormCraft ist ein GDPR-fähiges, hochwertiges WordPress-Plugin, mit dem Sie in wenigen Minuten schöne Formulare für Ihre Website erstellen können. In diesem Tutorial werde ich...

Ashraff Hathibelagal
22. März 2019

WordPress
Quform vs. FormCraft: Top WordPress Form Builder Plugins im Vergleich
Quform und FormCraft sind zwei der besten WordPress-Formular-Plugins, die heute erhältlich sind. Schauen wir uns an, wie sie zusammenpassen.

Nona Blackman
14. Januar 2019

WordPress
Wählen Sie einen Form Builder: Die 7 besten WordPress-Formularbuilder im Vergleich
Wenn Sie eine WordPress-Site besitzen, werden Sie irgendwann ein Webformular benötigen. Wenn diese Zeit kommt, wird ein WordPress Form Builder Plugin Ihr bester...

Nona Blackman
21. Februar 2019

WordPress

Schlussfolgerung

Heute haben wir besprochen, wie man ein Kontaktformular mit Hilfe des Formidable Forms-Plugins in WordPress erstellt. Wir haben uns auch einen ausführlichen Überblick über dieses Plugin verschafft und verschiedene Aspekte diskutiert.

Fühlen Sie sich frei, Ihre Gedanken und Ihr Feedback mit Hilfe des untenstehenden Feeds mitzuteilen! Ich würde mich freuen, von Ihnen zu hören, wenn Sie mir Ihre Erfahrungen mit anderen Kontaktformular-Plugins mitteilen möchten, die Sie auf Ihrer Website verwendet haben.