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:
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: 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.
Hier finden Sie die E-Mail-Adresse, an die beim Ausfüllen und Versenden des Formulars eine Benachrichtigung gesendet werden soll.
Aber eine weitere wichtige Frage ist, von welcher E-Mail-Adresse es gesendet wird. Hierzu verwenden wir ein von WP Forms entwickeltes separates Plugin zur Konfiguration der Mail-Protokolleinstellungen.
Wir verwenden hierfür das WP Mail SMTP-Plugin. Die Einstellungen und Details dieses Plugins können Sie diesem Artikel entnehmen.
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 4: 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!
Der Inhalt stammt von Online-Toolkiste.de. Weitere Informationen finden Sie auf dieser Webseite oder im Internet.