Wenn es um Formulare in WordPress geht, ist das (kostenpflichtige) Plugin “Gravity Forms” eine sehr gute Wahl. In dieser Beitragsreihe erkläre ich die Grundlagen dieses Plugins anschaulich.
Gravity Forms erwerben
Das Plugin kannst du auf dieser Website erwerben: www.gravtiyforms.com
Je nach Art der Lizenz kostet das Produkt zwischen 39$ bis 199$.
Das wirkt auf den ersten Moment viel. Aber meine Erfahrung hat gezeigt: die Investition in dieses Plugin ist es Wert! Als selbständiger Webdesigner & Webentwickler musste ich mir folgende Frage stellen: Mach ich ein Plugin selber? Und investiere dabei Stunden über Stunden an Arbeit. Oder investiere ich etwas Geld und kann gleich loslegen?
Nach dem du es gekauft hast, ladest du dir die aktuellste Version herunter.
Gravity Forms installieren
Das Installieren von Gravity Forms funktioniert gleich wie bei jedem anderen Plugin. Und zwar im Bereich Plugins > Installieren > Plugin hochladen.
Gravity Forms Lizenz aktivieren
Nach der Aktivierung des Plugins wirst du auf die Plugin Seite im Backend weiter geleitet. Dort wirst du dann aufgefordert, deine Lizenz einzutragen.
Hinweis: Das Plugin funktioniert auch OHNE eingetragene Lizenz! Die Lizenz dient dazu, dass du aus WordPress heraus Aktualisierungen machen kannst.
Der folgende Screenshot zeigt die Allgemeinen Einstellungen von Gravity Forms. Hier gibst du deinen Lizenzschlüssel an:
Erstes Formular mit Gravity Forms erstellen
Im seitlichen Menü in WordPress siehst du nun einen eigenen Menüpunkt Formulare. Hier klickst du nun auf Neues Formular.
Dann erscheint ein Pop Up in dem du einen Namen und ein Beschreibung eingeben kannst.
Nachdem du auf Formluar erstellen geklickt hast, wirst du weitergeleitet. Im Formular-Editor beginnt dann der ganze Spaß. Hier eine Übersicht:
Diese Übersicht im Formular-Editor erklärt das Prinzip von Gravity Forms sehr gut! Nimm dir zwei Minuten Zeit und schau dir das in Ruhe in deinem Formular-Editor an.
Formularfelder mittels Gravity Forms hinzufügen
Wie in der Übersicht erklärt wird, funktioniert das Hinzufügen von Feldern ganz einfach per Drag&Drop.
Nachdem das Feld platziert wurde wählst du es aus und es öffnet sich zum Bearbeiten. Hier habe ich den Titel des Feldes auf Namen umgeändert und es als erforderlich markiert.
Für ein klassisches Kontaktformular braucht es noch ein E-Mail Feld und ein Feld für eine Nachricht. Auch diese Felder kannst du per Drag&Drop hinzufügen, umbenennen und auf Wunsch als erforderlich markieren.
Das E-Mail Feld findest du unter Erweiterte Felder:
Für die Nachricht benutzt du das Textabsatz Feld. Nach dem du es erstellt und beschriftest hast, speichere das Formular.
Gravity Forms auf einer WordPress Seite einbetten
Da du nun ein – rudimentäres – Formular erstellt hast, wirst du es im nächsten Schritt auf einer Seite einbetten. Gehe dazu auf die von dir gewünschte Seite (oder Blogeintrag!):
Dort siehst du dann einen neuen Button namens Formulare. Auf diesen klickst du.
Dann erscheint ein Overlay wo du
- das gewünschte Formular aussuchst,
- bestimmst ob der Titel angezeigt werden soll,
- bestimmst ob die Beschreibung angezeigt werden soll und
- AJAX aktivieren kannst.
Die Aktivierung von AJAX ist dafür verantwortlich, dass das Formular abgesendet wird ohne neues Laden der Seite.
Nach dem du auf Formular einfügen geklickt hast, siehst du einen Shortcode der das Formular repräsentiert.
Das Formular testen
Nun gehe auf die Seite, wo du das Formular eingebettet hast. Folgende Screenshots zeigen
- das eingebettete Formular,
- die standardmäßigen Fehlermeldungen (die nicht hübsch sind, dazu später mehr) und
- eine Bestätigung nach dem Absenden.
Standardmäßig wird auch eine Mail an den Seitenadmin versendet. Dazu aber im nächsten Beitrag mehr.
Resümee und Vorschau
Auch wenn Gravity Forms ein kostenpflichtiges Plugin (www.gravtiyforms.com) ist – ich finde es macht seine Arbeit sehr gut. Ausserdem hab ich in diesem Beitrag nur ein Standardformular erstellt! Seine ganze “Macht” zeigt das Plugin dann bei ausgefalleneren Einsätzen.
Im Teil 2 gehe ich noch tiefer auf die Bestätigungen und Benachrichtigungen eingehen.
Anmerkung*: Die Produkt-Verlinkungen auf dieser Seite sind Affiliate Links für die mein Blog eine geringe Provision erhält falls Du einen dieser Artikel kaufst. Dies hilft mir bei der Kostendeckung dieses Blogs.