Gravity Forms – Eine Einführung – Teil 1

Gravity Forms – Eine Einführung – Teil 1

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 herunter laden

Gravity Forms herunter laden

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.

Gravity Forms - Registrierung des Plugins

Gravity Forms – Registrierung des Plugins

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:

Lizenzschlüssel für Gravity Forms eintragen

Lizenzschlüssel für Gravity Forms eintragen

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.

Neues Formular erstellen

Neues Formular erstellen

Dann erscheint ein Pop Up in dem du einen Namen und ein Beschreibung eingeben kannst.

Titel und Beschreibung des Formulares

Titel und Beschreibung des Formulares

Nachdem du auf Formluar erstellen geklickt hast, wirst du weitergeleitet. Im Formular-Editor beginnt dann der ganze Spaß. Hier eine Übersicht:

Formular-Editor von Gravity Forms

Formular-Editor von Gravity Forms

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.

Ein Feld wird per Drag&Drop ins Formular gezogen

Ein Feld wird per Drag&Drop ins Formular gezogen

Das Feld wurde platziert

Das Feld wurde platziert

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.

Ändern des Feldes

Ändern des Feldes

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:

E-Mail Feld

E-Mail Feld

Für die Nachricht benutzt du das Textabsatz Feld. Nach dem du es erstellt und beschriftest hast, speichere das Formular.

Textabsatz Feld einfügen und Formular speichern

Textabsatz Feld einfügen und Formular speichern

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.

Gravity Forms Button

Gravity Forms Button

Dann erscheint ein Overlay wo du

  1. das gewünschte Formular aussuchst,
  2. bestimmst ob der Titel angezeigt werden soll,
  3. bestimmst ob die Beschreibung angezeigt werden soll und
  4. AJAX aktivieren kannst.

Die Aktivierung von AJAX ist dafür verantwortlich, dass das Formular abgesendet wird ohne neues Laden der Seite.

Formular einfügen

Formular einfügen

Nach dem du auf Formular einfügen geklickt hast, siehst du einen Shortcode der das Formular repräsentiert.

Shortcode des Formulars

Shortcode des Formulars

Das Formular testen

Nun gehe auf die Seite, wo du das Formular eingebettet hast. Folgende Screenshots zeigen

  1. das eingebettete Formular,
  2. die standardmäßigen Fehlermeldungen (die nicht hübsch sind, dazu später mehr) und
  3. eine Bestätigung nach dem Absenden.
Das eingebettete Formular

Das eingebettete Formular

Standard Fehlermeldung von Gravity Forms

Standard Fehlermeldung von Gravity Forms

 

Standard Bestätigung von Gravity Forms

Standard Bestätigung von Gravity Forms

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 WP Hafen eine geringe Provision erhält falls Du einen dieser Artikel kaufst. Dies hilft mir bei der Kostendeckung dieses Blogs.

Hinterlasse eine Antwort Antworten abbrechen