Zapier Kontaktformular

Formulare für statische Websites mit Zapier

Tools Static Websites

Formulare auf statischen Websites zu betreiben ist gar nicht so einfach, denn wer eine statische Website betreibt, verzichtet in der Regel auf klassische Server und PHP und packt die Seite in die Cloud. Zwar gibt es viele externe Anbieter für Formularlösungen, doch haben wir keine kostenlose Lösung gefunden, die uns überzeugt hat.

Deshalb haben wir uns weiter mit dem Thema beschäftigt und eine Formularlösung für statische Websites gesucht, die flexibel einsetzbar ist, unsere Anforderungen an eine solche Lösung sind:

  • Keine Limits bezüglich der Formularanzahl/Absendungen
  • Kompatibel mit allen Static Website Generatoren
  • Nicht an andere Dienste (z.B. Hosting) geknüpft
  • Einfache Einrichtung und Wartung

Gibt’s nicht? Gibt’s doch!

So sind wir auf Zapier gestoßen, haben ein wenig recherchiert und rumprobiert. Und haben nun eine Lösung gefunden, die uns gut gefällt.

Zapier ist ein Web-Service, der Aktionen zwischen unterschiedlichen Web-Apps automatisiert, aktuell (Stand: August 2019) gibt es über 1500 Zapier-Apps.

Wie funktioniert das denn jetzt?

Ihr braucht ein Formular

Das Formular ist ein ganz normales html-Formular mit method- und action-Attribut ohne zusätzliches Markup. Dieses Formular sendet die Daten an eine Zapier-Webhook und alles weitere geschieht in Zapier. Zapier empfängt die Daten und versendet diese daraufhin via E-Mail. Fertig 🎉

Ihr braucht als Erstes ein Formular, das kann so aussehen. Wichtig ist, dass jedes Feld, das durch Zapier ausgelesen werden soll, ein name-Attribut enthält, damit Zapier die Felder identifzieren kann.

<form action="#" type="post">
  <input type="text" name="fName">
  <input type="email" name="email">
  <input type="submit" value="Absenden">
</form>

Und einen Zap

  • In Zapier erstellt ihr nun einen neuen Zap mit der Trigger-App Webhooks by Zapier und wählt die Option Catch Hook aus
  • Im nächsten Schritt wird euch eure Zapier Webhook URL angezeigt: Kopiert euch die URL und fügt sie im action-Attribut eures Formulars ein
  • Jetzt versendet ihr eine Nachricht von eurem Formular, um zu testen, ob eure Daten korrekt von Zapier empfangen werden können
  • Wenn das geklappt hat, werdet ihr zur Zapier Webhook URL weitergeleitet und euer ist Trigger fertig konfiguriert — nun wird die Aktion formuliert
  • Als Aktions-App wählt ihr Email by Zapier aus
  • Nun könnt ihr euer E-Mail-Template zusammenbauen und die Daten aus allen Formular-Feldern auslesen, die übertragen wurden

So einfach ist das

Jetzt habt ihr erstmal ganz grundlegend ein funktionierendes Formular, das E-Mails versendet und das ihr in eure statischen Websites einbauen könnt. Das funktioniert grundlegend, aber User Experience und Usability sind noch echt mies. Im nächsten Artikel zeigen wir euch deshalb, wie ihr die Funktionailität dieses Formulars erweitern könnt, um die Daten via AJAX zu versenden und nach dem Absenden eine Erfolgsmeldung anzuzeigen.

Wenn ihr euer Formular bearbeitet und neue Felder hinzufügt, müsst ihr eure Trigger-App erneut testen, um die Daten aus den neu hinzugefügten Feldern im E-Mail-Template nutzen zu können.

Kaffeekasse

Der Artikel hat Dir weitergeholfen? Sehr schön! Dann spendier uns doch 'ne Mate auf Steady.com.

Supporte uns auf Steady.com