Beispiel: online SEPA-Lastschriftmandat erteilen
Es gibt sicherlich viele Gründe aus einem vom Benutzer ausgefüllten Formular ein PDF Dokument zu erstellen, das dieser nach dem Absenden runterladen kann. In diesem Artikel werden wir zusammen eine Seite erstellen, zu der ein Geschäftskunde sich anmelden kann und uns das Mandat erteilen kann, künftige Beträge per Lastschrift einzuziehen.
Achtung: diese fiktive Anleitung ist nicht dazu gedacht, 1:1 abgekupfert zu werden; sie dient lediglich als Inspiration für eigene Prozesse.
Die verschiedenen Bausteine: was müssen wir machen?
Geplanter Ablauf: der Kunde besucht die vorgegebene Website, z. B. https://sepa-mandat.meine-website.tld und gibt dort ein Passwort ein, um auf die gewünschte Seite zu gelangen. Dort findet er alle notwendigen Informationen und ein Formular, um sein Mandat zu erteilen. Er soll im Anschluss die eingegebenen Daten als PDF runterladen können. Wir als Betreiber möchten informiert werden, dass der Kunde das Formular ausgefüllt hat und die Daten speichern (insbesondere Datum der Erteilung da beispielsweise für Online Banking für Lastschrift Erstellung benötigt).
Für dieses kleine Projekt werden wir Folgendes umsetzen:
- Mini WordPress Website (1 Seite) erstellen mit Informationen zu SEPA und Formular
- Formular mit Gravity Forms erstellen
- Formular- und PDF-Einstellungen vornehmen
Wir nutzen Gravity Forms, weil es ein wirklich einfach zu nutzendes Plugin ist. Es ist zwar kostenpflichtig, jedoch für SaaS Web Kunden kostenfrei in den Managed WordPress Hosting Paketen nutzbar. Mit Gravity Forms lassen sich Formulare - auch komplexe - per Drag & Drop erstellen. Ich möchte nicht unerwähnt lassen, dass es auch kostenfreie Formular-Plugins gibt wie z. B. Contact Form 7.
WordPress Seite einrichten und möglich einfaches Theme nutzen
Ich gehe davon aus, dass die Einrichtung einer WordPress Website kein Problem ist - sonst können Sie auch gerne die Agentur des Vertrauens fragen 😉
Hier geht es nicht um die nahtlose Integration in eine bestehende Website bzw. Übernahme der Corporate Identity. Dafür sind weitere Schritte notwendig, jedoch abhängig von der bereits eingesetzten Technologie...
Die Startseite wird als statische Seite gesetzt (Einstellungen > Lesen > Startseite zeigt: statische Seite - Beitragsseite lassen wir leer) und bearbeitet. Den Passwortschutz setzen wir schon mal gleich: rechts im Bereich "Sichtbarkeit", den Punkt Passwortgeschützt auswählen, und ein Passwort festlegen. Gleich mal aktualisieren/veröffentlichen, dann ist diese Einstellung schon mal festgelegt.
Schneller am Ziel mit SiteOrigin Page Builder
Ich benutze gerne den (kostenlosen) Page Builder von SiteOrigin, weil er schlicht ist und dennoch sehr individuelle Layouts ermöglicht. Außerdem integriert er sich bestens in allen möglichen Themes und bestehenden WordPress Installationen. Füttern tun man ihn mit Widgets, weshalb sich auch wunderbar Plugins nutzen lassen können, die nicht zwingend für SiteOrigin entwickelt wurden.
Für unser Projekt erstelle ich 2 Zeilen, die erste um eine einfache Einleitung für den Kunden anzuzeigen, die andere mit den tatsächlichen Inhalten. Die zweite Zeile wird in 2 Spalten geteilt, die linke mit dem Formular und die rechte mit unseren Firmeninformationen.
Um das Formular in der linken Spalte anzuzeigen habe ich 2 Optionen: entweder ich nutze das Gravity Forms widget oder schreibe den Shortcode in ein Editor Widget. Ich habe mich für die zweite Option entschieden. So oder so, wir müssen nun ein Formular erstellen.
Formular mit Gravity Forms in 5 Minuten erstellen
Per Drag & Drop erstellen wir also unser Formular: Firma, Vor- und Nachname, Adresse, IBAN, SWIFT/BIC und Name des Kreditinstituts. Um eine IBAN auch semantisch zu prüfen, gibt es auch eine Extension: Gravity Forms IBAN (kostenfrei - zwar nach aktuellem Stand schon lange nicht mehr aktualisiert, aber noch einwandfrei funktionsfähig). Das Plugin erstellt ein Feld des Typs IBAN, dagegen wird die Nutzereingabe geprüft. Nachdem das Formular fertig eingerichtet ist, wird der Shortcode in das Editor Widget eingefügt:
PDF Download mit Gravity PDF
Neben der Felder, die in dem Bestätigungstext wieder ausgegeben werden sollen, erstellen wir einen Link, den der Nutzer anklicken kann:
<a class="pdf-download-button" href="https://sepa-mandat.meine-website.tld/?gf_pdf=1&fid={form_id}&lid={entry_id}&template=default-template.php&download=1">DOWNLOAD PDF</a>
Weshalb der Link so auszusehen hat entnimmt man aus den PDF-Einstellungen des erstellten Formulars (Formular > Einstellungen > PDF).
Viele Einstellmöglichkeiten mit Gravity Forms PDF
In diesem Beispiel sind wir den schnellen Weg gegangen: keine Sondereinstellungen, keine Komplikationen. Es gibt mit dem PDF Plugin zahlreiche Optionen, um das PDF zu formatieren und stylen etc. Dazu lesen Sie sich lieber selbst die Dokumentation durch: https://gravitypdf.com/documentation/v4/five-minute-install/.
Mit SaaS Web Gravity Forms kostenfrei nutzen
Wie bereits in dem Artikel erwähnt, bieten wir unseren Kunden die kostenfreie Nutzung von Gravity Forms an. Neben Gravity Forms können Sie auch andere lizenzpflichtige Plugins kostenfrei einsetzen, etwa: WPML (Plugin für Mehrsprachigkeit), SearchWP (überarbeitete Suchfunktion für WordPress) oder Newsletter Pro (u. a. WooCommerce Integration für Newsletter). Hier finden Sie unsere Managed WordPress Hosting Angebote.