WPForms Anleitung: Kontaktformulare mit Formbuilder

Mit WPForms kannst du schnell und komfortabel ein einfaches Kontaktformular für deine Seite erstellen. Dabei ist auch sehr gut für WP-Einsteiger geeignet – ein Grund, es hier etwas genauer vorzustellen. Wenn du das Plugin selbst ausprobieren möchtest, wird dir meine Anleitung dazu hoffentlich weiterhelfen.

Über WPForms

Wenn du häufig WordPress-Tutorials liest, bist du sicher schon über den WPBeginner-Blog gestolpert. Und genau diese Blog-Betreiber haben auch WPForms entwickelt. Und noch weitere nützliche Plugins wie MonsterInsights oder WP Mail SMTP.

We believe that you shouldn’t have to hire a developer to create a WordPress contact form. That’s why we built WPForms, a drag & drop WordPress form builder that’s EASY and POWERFUL.

WPForms

Inzwischen ist das Formular-Plugin mit über 1 Million Installationen und einem 5-Sterne-Rating fast genau so verbreitet wie Contact Form 7. Allerdings ist es leichter zu bedienen und bietet nicht nur in der Premium-Version viele nützliche Features.

Welche Features bietet das Formular-Plugin?

Die kostenlose Version von WPForms ist ideal für das schnelle Anlegen von einfachen Formularen. Im Vergleich zu Contact Form 7 ist es wesentlich einfacher und angenehmer zu bedienen. Und auch das Formular-Design kannst du ohne Code-Anpassung regeln.

Hier die Hauptfunktionen der Light-Version im Überblick:

  • Form-Builder
  • Responsive
  • DSGVO-Features
  • Formular-Vorlagen
  • Anti-Spam
  • Text-Felder
  • Dropdown
  • Checkboxen

In der Pro-Version gibt es natürlich noch weitere Features:

  • Conditional Logic
  • Datei-Upload
  • Zeit- / Datum-Feld
  • Einbindung E-Mail-Marketing, wie z.B. MailChimp
  • Integration von Bezahldiensten (PayPal, Stripe)
  • Umfragen
  • Multi-Step Formulare
  • Premium-Vorlagen
wpforms banner
Werbung

Für ein einfaches Kontaktformular sollte aber die Light-Version völlig ausreichen!

Für wen eignet sich WPForms?

Mit der kostenlosen Version von WPForms kannst du simple Formulare schnell und unkompliziert erstellen. Gerade für Anfänger finde ich das Plugin besser geeignet als Contact Form 7.
Dieses bietet zwar sehr viele Möglichkeiten und viele AddOns, ist aber in der Bedienung etwas schwerfällig. Daher ist es eher ein Plugin für Fortgeschrittene. Auch die Performance ist nicht gerade die beste – vor allem wenn man viele  CF7-Erweiterungen einsetzt.

Wenn du weitere Features wie z.B. Datumswähler oder Datei-Upload benötigst, empfehle ich auf jeden Fall Caldera Forms. Ebenfalls kostenlos und gut zu bedienen. Eine Übersicht der Funktionen findest du in meinem Tutorial zu Caldera.
Wenn du noch mehr Funktionen und Support benötigst, ist WPForms Pro eine sehr gute Wahl. Leider nicht kostenlos, aber günstiger als die Konkurrenz.

WPForms Anleitung

Plugin installieren

Wenn du WPForms ausprobieren möchtest, kannst du es direkt im Dashboard über >Plugins >installieren suchen und dann installieren.

wpforms installieren
wpforms neu

Danach findest du im Menü einen neuen Unterpunkt WPForms. Hier kannst du gleich ein neues Formular erstellen.

1. Einfaches Kontaktformular einrichten

Für dieses Tutorial nutze ich die bestehende Vorlage von WPForms: Einfaches Kontaktformular.

wpforms vorlage
Auswahl von fertigen Vorlagen
wpforms formular bearbeiten
Standard-Formular mit den wichtigsten Feldern

Die Vorlage enthält schon mal die wichtigsten Felder und ist ein guter Start.

2. Formular in die Seite einfügen

Wenn du dir das Formular schon mal ansehen möchtest, kannst du es mit einem Shortcode in die gewünschte Seite einbauen. Dazu klickst du ganz oben in der Leiste auf den Button Einbetten.

wpforms-shortcode

Danach öffnet sich ein Popup-Fenster mit dem Shortcode für das Formular.

wpforms shortcode kopieren
Formular Shortcode zum Einbetten

Diesen Shortcode kopierst du und fügst ihn auf der entsprechenden Seite ein.

Wenn Du Gutenberg nutzt, kannst du zum Einbetten natürlich auch den entsprechenden Block dafür nutzen.

wpforms gutenberg block
Für Gutenberg gibt es einen WPForms Block

Das aktuelle Formular sieht dann ungefähr so aus:

formularansicht
Das Design des Formulars hängt immer ein wenig von deinen Theme-Einstellungen ab.

3. Weitere Formular-Felder einfügen

Wenn du weitere Felder benötigst, kannst du diese per Klick oder Drag & Drop einfach in das Formular einfügen.
Für diese Anleitung füge ich noch ein Feld für die Telefonnummer ein. Das geht ganz einfach per Drag & Drop. Anschließend solltest du noch ganz oben in der Leiste auf den Button Speichern klicken.

wpforms felder einfügen

Aber wie kann man die Felder E-Mail und Telefon nebeneinander, also 2-spaltig anzeigen lassen?

 
Speichern nicht vergessen! Nach deinen Anpassungen solltest du in der oberen Leiste auf den Speichern-Button klicken.

4. 2-spaltiges Layout einrichten

Bei Contact Form 7 musst du dafür umständlich den Code anpassen. Bei WPForms gibt es dafür eine einfachere Lösung.

Dazu wählst du zunächst das Feld aus und gehst dann bei den Feld-Optionen auf die Erweiterten Einstellungen. Bei CSS-Klassen kannst du dann die Layouts auswählen.
Zusätzlich habe ich hier noch die Feldgröße auf Groß gestellt, damit die Felder über die ganze Breite gehen.

wpforms 2 spaltiges layout
Hier kannst du die Spalten festlegen wie z.B. 1/2 + 1/2 oder 1/3 + 2/3.
wpforms layout animation

Nachdem ich den Feldern E-Mail und Telefon jeweils ein One-Half-Layout zugewiesen habe, sieht das Formular jetzt so aus:

wpforms 2spaltig

Möchtest du die beiden Felder E-Mail und Telefon auf dem Handy lieber untereinander statt nebeneinander anordnen? Dann kannst du die CSS-Klasse manuell ergänzen:

wpforms-mobile-full
wpforms responsive

5. Checkboxen mit Bildern

Normalerweise gibt man bei Checkboxen einfach die verschiedenen Auswahlmöglichkeiten als Text an. WPForms bietet hier ein Feature, dass mir sehr gut gefallen hat: die Auswahlmöglichkeit kann als Bilder dargestellt werden. So sieht das dann aus:

wpforms checkbox bild

Hier die Formularansicht dazu:

vorschau wpforms

6. Formular-Einstellungen

Für jedes Formular kannst du individuelle Einstellungen festlegen. Dafür gibt es die 3 Abschnitte Allgemein, Mitteilungen, Bestätigung.

Allgemein

In den allgemeinen Einstellungen kannst du das grundlegende Design und die Beschriftung des Formulars festlegen.

wpforms einstellungen allgemein
  • Formularname
  • CSS-Klassen
  • Beschriftung der Buttons
  • Anti-Spam (Honigtopf)
  • Dynamic Fields (Übergabe von dynamischen Parametern)

Mitteilungen

In diesem Abschnitt kannst du die Formularmitteilung aktivieren und einstellen. Also an wen das Formular mit welchem Betreff gesendet wird.
Im Standard werden alle Formular-Felder übergeben. Wenn du nur einzelne Felder benötigst, kannst du das hier einstellen. Dazu klickst du einfach auf Smart Tags und bekommst alle verfügbaren Felder angezeigt.

wpforms mitteilungen

Bestätigung

Hier kannst du einstellen, was nach dem Abschicken des Formulars passieren soll. Im Standard wird ein kurzer Bestätigungstext angezeigt, den du hier anpassen kannst.

Alternativ kannst du auch eine Seite (Danke-Seite) anzeigen lassen oder eine Weiterleitung nutzen.

wpforms confirmation

Neben dem Tab Einstellungen gibt es noch 2 weitere Reiter, die aber nur in der Pro-Version voll nutzbar sind: Marketing (Newsletter-Integration) und Zahlung (Einbindung von Zahlungsdiensten).

7. Plugin-Einstellungen

Unter  > WPForms > Einstellungen kannst du noch weitere Optionen einstellen. Diese sind dann für alle Formulare gültig.

Allgemein

Hier kannst du festlegen, ob und welche Stile für die Formulare geladen werden sollen. Auch können diese global (auf jeder Seite) geladen werden, was aber nicht zu empfehlen ist. Im Standard werden die Plugin-Dateien nur dann geladen, wenn sie benötigt werden. Ein großer Vorteil für die Performance!

Immer noch ein Thema: die DSGVO. Mit einem Klick auf GDPR Enhancements kannst du einige Datenschutz-Features freischalten. Wie z.B. eine DSGVO-Checkbox, die du dann per Klick in dein Formular einfügen kannst.

wpforms plugin einstellungen

E-Mail

Wie sollen deine E-Mails versendet werden? HTML oder Plain Text? Hier kannst du das einstellen und auch die HTML-Vorlage formatieren.
Bei der HTML-Vorlage kannst du zusätzlich noch ein Logo hochladen und die Hintergrundfarbe einstellen.

wpforms mail einstellungen

reCaptcha

Wenn du den Google-Service reCaptcha nutzt, kannst du hier alle nötigen Infos eingeben.

Validation

Hier kannst du die Texte der Fehlermeldungen anpassen.

Integration

In der Pro-Version kannst du in diesem Tab die Verbindung zu Mailchimp, PayPal usw. einrichten.

Misc

Unter Misc findest du die Plugin-Einstellung für Benachrichtigungen und die Deinstallation von WPForms.

Weiterhin kannst du hier auch einstellen, ob du eine wöchentliche Zusammenfassung erhalten möchtest. Mich persönlich hat das irgendwann genervt, aber mit einem einfachen Häkchen kannst du das hier deaktivieren.

wpforms email report
Email Report deaktivieren

Ansonsten bekommst du regelmäßg eine Nachricht, wie oft deine jeweiligen Formulare genutzt wurden.

performance report
Wöchentlicher Performance Report per eMail.

8. WPForms Tools

Im WPForms-Menü findest du unter Tools einige nützliche Features wie z.B. das Importieren und Exportieren von Formularen. Mit der Import-Funktion kannst du zudem bestehende Formulare von Contact Form 7 importieren.

CF7-Formular importieren

Du möchtest von Contact Form 7 auf WPForms umsteigen?
Dazu wählst du einfach unter Import from Other Form Plugins Contact Form 7 aus.

wpforms import
Hier kannst du bestehende Formular von CF7 in WPForms importieren

Im nächsten Schritt markierst du den Namen des gewünschten Formulars aus und klickst auf Import.

wpforms import 2

Sobald der Import abgeschlossen ist, erhältst du eine Bestätigung. Jetzt kannst du das Formular mit WPForms bearbeiten oder anschauen.

wpforms import abgeschlossen
Wie hat Dir dieser Beitrag gefallen? Gar nichtNa jaOKGutSehr gut
(14 Stimmen, Ø: 4,64 von 5)

Fazit:

Für mich ist WPForms aktuell das beste Plugin für einfache Kontaktformulare. Früher habe ich fast immer Contact Form 7 genutzt. Aber inzwischen finde ich das Handling von CF7 viel zu umständlich. WPForms hingegen ist wesentlich leichter und angenehmer zu bedienen. Auch für WordPress-Einsteiger.

Eine weitere kostenlose Alternative bietet Caldera Forms. Hier gibt es bereits in der kostenlosen Version sehr viele Features wie z.B. Conditional Logic. Falls du noch mehr Funktionen benötigst, solltest du einen Blick auf die Pro-Version von WPForms werfen. Mit $ 79,- ist diese deutlich günstiger als die von Caldera Forms oder GravityForms.

Schreibe einen Kommentar

Menü schließen