Kontaktformulare in WordPress mit WPForms erstellen: Der ultimative Guide (kostenloses Plugin)

Kontaktformulare gehören zum Standard-Repertoire der meisten Websites. WPForms ist ein kostenloses WordPress-Plugin, mit dem du einfach und schnell Kontaktformulare auf deiner Website einbauen kannst!

In diesem Guide lernst du, wie das funktioniert. Außerdem stell ich dir die wichtigsten Funktionen von WPForms Pro vor - damit kannst du dann weitaus mehr machen als simple Kontaktformulare: Bestellformulare, Umfragen, Newsletter-Anmeldungen...

Aber der Reihe nach. Wir starten ganz vorne und ich zeig dir erstmal, was WPForms eigentlich ausmacht.

[lasso badge="Auf einen Blick" id="6923" link_id="1680" ref="wp-forms" title_type="H2"]

Im Video kannst du dir direkt einen Eindruck von WPForms und den wichtigsten Funktionen verschaffen:

Die wichtigsten Funktionen von WPForms im Überblick

Schauen wir uns doch zuerst mal an, wie das Plugin überhaupt aufgebaut ist und wie du in WPForms dein Kontaktformular erstellen kannst, bevor wir zur Schritt-für-Schritt-Anleitung kommen!

Drag&Drop Form Builder

Wie gerade schon erwähnt erstellst du die Formulare in einem Drag&Drop Editor, den WPForms selbst "Form Builder" nennt. So sieht dieser Editor aus:

Auf der linken Seite findest du also alle Felder, die du zum Formular hinzufügen kannst. Wenn du ein Feld auswählst, werden ebenfalls dort im Reiter "Feldoptionen" die Bearbeitungsoptionen angezeigt.

Leider zeigt der Editor dein Formular nicht genauso an, wie es später auf deiner Website aussieht. Die Schriftart z.B. wird von deinen allgemeinen Website-Einstellungen übernommen, im Editor aber anders angezeigt.

Auch zwei Spalten, wenn du z.B. die Felder Name und E-Mail-Adresse nebeneinander positionieren möchtest, werden im Editor trotzdem untereinander angezeigt.

Das tut der Bedienbarkeit des Editors aber keinen Abbruch. Du kannst die Felder schnell an die gewünschte Stelle ziehen und entsprechend einstellen. Damit ist WPForms deutlich leichter zu bedienen als bspw. Contact Form 7.

Responsive Formulare

Es sollte selbstverständlich sein, der Vollständigkeit halber wollte ich es hier aber nochmal erwähnen: Die Formulare, die du mit WPForms erstellst, werden auf Mobilgeräten (d.h. Tablets und Smartphones) natürlich entsprechend angepasst dargestellt.

Wenn du ein Design mit zwei (oder mehr) Spalten wählst, kannst du es auch so einstellen, dass die Felder mobil trotzdem untereinander angezeigt werden. Wie das geht, dazu später mehr.

Vorlagen für Formulare

Wenn du ein neues Formular anlegst, kannst du entweder mit einem leeren Editor starten und dir alles selber zusammenbauen oder aber du wählst eine Vorlage, die du dann beliebig anpassen kannst.

Der Großteil der Vorlagen steht nur für WPForms Pro zur Verfügung, weil hier Felder genutzt werden, die in der kostenlosen Version nicht enthalten sind.

Trotzdem kannst du auch kostenlos schon mehr mit WPForms machen, als ein simples Kontaktformular. In den Vorlagen gibt es z.B. ein Formular für Feature Requests (sinnvoll z.B. für Software) oder um einen Raum für Meetings zu reservieren.

Die unterschiedlichen Feldtypen

In der kostenlosen Version von WPForms stehen dir 10 Feldtypen zur Verfügung. 11 sind es, wenn man die DSGVO-Checkbox dazuzählt (die du allerdings in den Einstellungen erst noch aktivieren musst, damit sie dir im Editor angezeigt wird).

Das sind die Standard-Felder:

Klassische Kontaktformulare mit Name, E-Mail-Adresse und Nachricht kannst du damit also problemlos zusammenbauen.

Mit den Multiple Choice- bzw. Checkbox-Feldern kannst du aber auch kurze Umfragen oder eben Formulare wie z.B. zur Terminreservierung, Raumbuchung etc. erstellen!

Die Felder, die in WPForms Pro zusätzlich enthalten sind, schauen wir uns gleich noch im Detail an. Erstmal kommen wir jetzt zur Schritt-für-Schritt-Anleitung, wie du ein klassisches Kontaktformular mit WPForms erstellst.

Schritt für Schritt: Ein Kontaktformular mit WPForms erstellen

Schritt 1: Felder hinzufügen

Welche Felder es gibt, hast du gerade gesehen. Für ein klassisches Kontaktformular brauchst du die Felder Name, E-Mail-Adresse und Textabsatz - hier kommt die tatsächliche Nachricht rein. Per Drag & Drop kannst du die Felder an die gewünschte Stelle ziehen.

Das sieht dann so aus:

Falls du beispielsweise noch einen Betreff hinzufügen möchtest, kannst du dafür das Feld Einzeiliger Text verwenden.

Klick auf ein Feld, um die Optionen zum Bearbeiten zu öffnen. Bei allen Feldern kannst du zuerst das sog. Label bearbeiten - das ist das, was oberhalb des Feldes angezeigt wird. Außerdem kannst du eine Beschreibung hinzufügen, die etwas kleiner unterhalb des Feldes zu sehen ist.

Beim Name-Feld kannst du z.B. noch auswählen, ob es ein Feld dafür geben soll oder Vor- und Nachname getrennt.

Außerdem legst du fest, ob es sich bei den Feldern jeweils um ein Pflichtfeld handelt. Wenn ja, aktivierst du den Regler bei "Erforderlich" - dann wird ein Sternchen zum Label hinzugefügt, sodass deine Besucher:innen auch direkt sehen, dass sie das Feld ausfüllen müssen.

Im Reiter "Erweitert" findest du weitere Einstellungsmöglichkeiten für jedes Feld. Hier stellst du z.B. die Feldgröße ein - Standard ist "mittel", bei "groß" werden die Felder über die gesamte Breite angezeigt (was ich persönlich schöner finde).

Außerdem kannst du hier z.B. einen Platzhalter einfügen. Du hast z.B. auch die Möglichkeit, das Label oberhalb der Felder zu verbergen und stattdessen nur einen Platzhalter zu nutzen, wenn dir das besser gefällt.

Wie du die CSS-Klassen benutzt, schauen wir uns als nächstes an - die brauchst du nämlich, um zweispaltige Layouts zu erstellen:

Schritt 2: Felder nebeneinander anzeigen für mehrspaltige Layouts

Wie man in WPForms Layouts mit mehreren Spalten erstellt, ist nicht auf den ersten Blick ersichtlich - wenn man weiß, wie's geht, ist es aber ganz einfach. Dafür brauchst du wie gesagt die CSS-Klassen.

Im Beispiel unseres Kontaktformulars wollen wir jetzt die Felder für Name und E-Mail-Adresse nebeneinander anzeigen. Um das zu tun, wählst du zuerst das Feld Name und klickst bei den CSS-Klassen auf "Layouts anzeigen". Wir haben zwei Felder, d.h. wir wählen das Layout mit den zwei gleich großen Spalten.

Da der Name in der linken Spalte stehen soll, klickst du dann noch auf die linke Spalte. Jetzt werden die CSS-Klassen eingefügt:

Schritt 1: Layout wählen
Schritt 2: Richtige Spalte wählen
Schritt 3: Die richtigen CSS-Klassen werden automatisch eingetragen

Genau das gleiche machst du jetzt nochmal für das E-Mail-Feld, nur dass du hier natürlich die rechte Spalte auswählst.

Im WPForms-Editor ändert sich jetzt erstmal gar nichts. Wie ich anfangs schon erwähnt habe, werden die mehrspaltigen Layouts hier leider nicht angezeigt. Wenn ich das Formular aber in der Vorschau öffne, sieht es so aus:

Wenn die CSS-Klassen eingetragen sind, werden die Spalten auf deiner Website also auch so ausgespielt, wie du es eingestellt hast. Nur im Editor ist das leider nicht auf Anhieb zu sehen.

Schritt 3: DSGVO-Checkbox hinzufügen

Im nächsten Schritt fügen wir ein weiteres Feld zum Kontaktformular hinzu, und zwar die DSGVO-Checkbox. Damit das Feld im Editor zur Verfügung steht, musst du es allerdings erst in den WPForms-Einstellungen aktivieren. Dafür musst du den Editor verlassen und kurz in die Einstellungen wechseln.

Hier setzt du im Reiter Allgemein den Haken bei den sog. "DSGVO-Verbesserungen":

Wenn die Einstellung gespeichert ist, wird im Editor das Feld "DSGVO-Einverständnis" angezeigt. Wie jedes andere Feld auch kannst du das jetzt zum Formular hinzufügen und deine Checkboxen entsprechend einrichten.

Den Text der Checkbox und das Label kannst du hier also problemlos anpassen.

Schritt 4: Formular-Einstellungen und Benachrichtigungen

Wenn du das Formular an sich fertig erstellt hast, wechselst du im Editor selbst zu den Einstellungen (gerade hatten wir die für das Plugin an sich, jetzt geht's um das konkrete Formular).

Unter Allgemein kannst du den Namen des Formulars ändern und den Absenden-Button bearbeiten:

Ganz wichtig ist der nächste Punkt, die Benachrichtungen. Hier stellst du die Benachrichtigung ein, die du erhältst, sobald jemand das Formular ausgefüllt hat.

Du stellst hier z.B. ein, an welche E-Mail-Adresse diese Benachrichtigung geschickt wird. Standardmäßig ist das die Adresse, die in WordPress beim Admin hinterlegt ist. Du kannst die E-Mail-Adresse hier aber natürlich auch ändern.

Außerdem legst du die Betreffzeile der Benachrichtigung fest.

Für Name und E-Mail-Adresse des Absenders sowie für die Antwort-E-Mail-Adresse kannst du die sog. Smart Tags verwenden. So werden direkt die Daten eingefügt, die ins Formular eingegeben wurden:

Die Nachricht selbst, die dir geschickt wird, enthält standardmäßig alle Formularfelder. Auch das kannst du ändern, wenn du möchtest, und z.B. nur die Nachricht selbst anzeigen, wenn du Name und E-Mail-Adresse des Absenders wie gerade gezeigt mit den Smart Tags eingerichtet hast.

Bei der kostenlosen Version von WPForms ist das die einzige Benachrichtigung, die du einstellen kannst. Mit WPForms Pro kannst du weitere Benachrichtigungen hinzufügen, sodass z.B. auch der Absender des Formulars eine Bestätigung erhält.

Im nächsten Punkt in den Einstellungen, den Bestätigungen, legst du fest, was nach dem Absenden des Formulars passiert. Du hast drei Optionen:

  • Nachricht: ein kurzer Bestätigungstext à la "Das hat funktioniert, danke für deine Nachricht"
  • Seite anzeigen: hier wählst du eine Seite aus, die du bereits in WordPress angelegt hast, zu der die Person nach dem Absenden weitergeleitet wird
  • Gehe zu URL: auch hier wird auf eine andere Seite weitergeleitet, allerdings kann das auch eine externe URL sein

Wenn du mit diesen Einstellungen durch bist, ist dein Kontaktformular fertig! Jetzt muss es nur noch auf der Website eingebunden werden.

Schritt 5: Formular auf der Website einbinden

Jedes Formular in WPForms erhält einen Shortcode. Den findest du in der Formular-Übersicht:

Diesen Shortcode kannst du an einer beliebigen Stelle auf deiner Website einfügen, um das Formular dort einzubinden. Das funktioniert also ganz einfach!

Noch einfacher wird's, wenn du den Block-Editor von WordPress nutzt. Hier findest du einen extra Block von WPForms, den du auf der Seite einfügst und wo du dann das gewünschte Formular auswählen kannst:

Und das war's!

WPForms Pro: Weitere Funktionen und Felder

Mit der Pro-Version von WPForms kannst du nochmal deutlich mehr machen: Dir stehen hier einige extra Funktionen und vor allem weitaus mehr Felder zur Verfügung. Schauen wir uns einige davon mal im Detail an.

Mehrschrittige Formulare

Mit WPForms Pro hast du die Möglichkeit, sog. Multi-Step Formulare zu erstellen. Hier sind also nicht alle Felder des Formulars auf einmal zu sehen - stattdessen kannst du sie auf einzelne Seiten aufteilen. Das kann z.B. so aussehen:

Ein solches Multi-Step Formular kannst du also zum Beispiel für Bewerbungen oder Bestellungen nutzen!

Um mehrere Seiten zu erstellen, fügst du vor dem Feld, das auf die nächste Seite soll, das Feld "Seitenumbruch" ein. Im Editor siehst du also auch wieder nicht mehrere Seiten, sondern alles untereinander - anhand des Seitenumbruchs und den Buttons kannst du aber schnell erkennen, wo eine Seite endet und die nächste beginnt.

Besonders bei sehr langen Formularen ist das eine sehr nützliche Funktion!

Datei-Upload hinzufügen

Mit dem Feld "Datei hochladen" kannst du es deinen Website-Besucher:innen ermöglichen, eine Datei (oder mehrere, je nach Einstellung) mit dem Formular hochzuladen. Auch das ist z.B. bei Bewerbungsformularen wichtig.

Du kannst bestimmen, welche Dateiformate hochgeladen werden können und die maximale Anzahl an Dateien festlegen!

Bedingte Logik (Conditional Logic)

Die bedingte Logik ist eins der mächtigsten Features von WPForms Pro! Das Thema ist etwas komplex, weil es wahnsinnig viele Anwendungsmöglichkeiten gibt, ich versuche es auf den Punkt zu bringen:

Die bedingte Logik ermöglicht es dir, einzelne Formularfelder auf Basis der vorherigen Angaben im Formular ein- oder auszublenden.

Wenn du bspw. eine Umfrage machst, kannst du die Fragen an die vorherigen Antworten anpassen. Das sorgt natürlich dafür, dass die Fragen nicht generisch an alle Teilnehmenden gestellt werden, sondern wirklich zu dem passen, was vorher ausgefüllt wurde.

Im Video zeige ich dir ein paar Beispiele, wie du die bedingte Logik in WPForms nutzen kannst und wie du sie einrichtest:

Net Promoter Score

Warst du schon mal auf einer Website, auf der sich unten in der Ecke ein Fenster geöffnet hat mit der Frage, wie wahrscheinlich es ist, dass du den Shop/den Service etc. weiterempfehlen würdest?

Das nennt sich Net Promoter Score. Und auch das kannst du mit der Pro-Version von WPForms umsetzen!

Integration zu E-Mail-Marketing- und Bezahltools

WPForms Pro bietet dir direkte Integrationen zu E-Mail-Marketing-Tools wie Mailchimp oder GetResponse an (ab dem Plus-Plan). Ab dem Pro-Plan, eine Stufe höher als Plus, gibt es dann weitere Integrationen zu Bezahltools wie Stripe oder oder PayPal.

So kannst du über deine Formulare z.B. auch Zahlungen annehmen!

WPForms Pro: Preise

Es gibt verschiedene Preismodelle für WPForms Pro. Je nachdem sind entsprechend mehr oder weniger zusätzliche Funktionen enthalten. Die Übersicht kannst du dir hier anschauen!

Die bedingte Logik und zusätzliche Felder wie der Datei-Upload oder mehrere Seiten im Formular sind bereits im günstigsten Basic-Plan enthalten - der sollte daher in vielen Fällen völlig ausreichend sein. Im ersten Jahr zahlst du 39,50 Dollar, ab dem zweiten Jahr sind es dann 79 Dollar.

Damit kannst du WPForms Pro auf einer Website nutzen!

Wenn du ein einfaches Kontaktformular erstellen möchtest, dann ist die kostenlose Version von WPForms völlig ausreichend.

Vor- und Nachteile von WPForms

Schauen wir uns zum Abschluss noch die Vor- und Nachteile von WPForms auf einen Blick an!

Vorteile

  • simple Kontaktformulare lassen sich schnell und einfach erstellen
  • viele Vorlagen für Formulare, die Zeit sparen
  • vielseitig einsetzbar (vor allem in der Pro-Version): auch für Umfragen, Bestellformulare etc.
  • einfache Einbindung auf der Website

Nachteile

  • Formulare werden im Editor nicht so angezeigt wie auf der Website (z.B. bei mehrspaltigen Layouts)
  • Design lässt sich nur über CSS anpassen

Alles in allem finde ich WPForms super für Einsteiger:innen geeignet, die eine einfache Lösung für ein simples Kontaktformular brauchen - wenn du mehr damit vorhast, würde ich dir den Basic-Plan empfehlen, also die günstigste Pro-Version!

_____________________

Hinweis: Bei den Links zu WPForms handelt es sich um Affiliate Links. Wenn du dir darüber das Tool kaufst, erhalte ich eine Provision – für dich ändert sich am Preis natürlich überhaupt nichts!

Die Kommentare sind geschlossen.

Hi, ich bin Lea! 2017 habe ich mein erstes Online-Projekt Punktkariert an den Start gebracht und neben meiner Liebe für's Schreiben vor allem auch meine Liebe für Tools entdeckt.

Ich könnte mich stundenlang darin verlieren, neue Tools zu entdecken und auszuprobieren.

Die eigene Website, das Marketing drumherum, Produkte online erstellen und verkaufen - all das ist einfacher mit den richtigen Tools. Und genau diese Tools lernst du hier kennen!

Nach oben scrollen
WordPress Cookie Hinweis von Real Cookie Banner