n8n Webhook: Abwesenheiten per HTML-Formular automatisieren
Kennst du das? Eine Abwesenheit hier, eine Vertretung dort â und irgendwo dazwischen geht die Info verloren. Der Kalender ist nicht aktuell, die E-Mails stapeln sich und am Ende weiĂ keiner mehr so genau, wer eigentlich wann nicht da ist.
Dabei könnte alles so einfach sein.
Mit einem kleinen HTML-Formular und einem n8n-Webhook kannst du Abwesenheiten komplett automatisch erfassen, bestĂ€tigen und in deinen Kalender eintragen lassen â ohne Stress, ohne Chaos, ohne Extraarbeit.
https://youtu.be/ucIL8ZQ6TM0
Kurz & wichtig: Datenschutz
In unserem Beispiel schicken wir ein paar persönliche Daten (Name, E-Mail, Abwesenheitszeiten) an n8n und den Google Kalender.
Damit alles sauber bleibt, solltest du:
- eine DatenschutzerklÀrung verlinken,
- eine Checkbox zur Einwilligung einbauen
- und das Formular ĂŒber HTTPS laufen lassen.
Wenn du auf Nummer sicher gehen willst, kannst du n8n auch einfach auf deinem eigenen Server laufen lassen â dann bleibt alles bei dir.
Was wird fĂŒr den Workflow benötigt?
FĂŒr dieses kleine Automationsprojekt brauchst du tatsĂ€chlich gar nicht viel. Die Zutatenliste ist ĂŒberschaubar â fast wie beim Kuchenrezept ohne Rosinen:
Ich verwende hier die gehostete Cloud-Version von n8n im Standard-Plan.
Damit bekommst du Webhooks, ausreichende AusfĂŒhrungen und musst dich nicht mit Serverkram herumschlagen.
Hier landen spÀter alle Abwesenheiten automatisch als Termine.
Ob privater Kalender oder Workspace â beides funktioniert.
FĂŒr das HTML-Formular reicht eine simple Unterseite auf deiner Domain.
Bei mir lÀuft sie auf einer Subdomain, abgesichert durch ein Wildcard-SSL-Zertifikat.
â Wichtig ist nur: HTTPS muss aktiv sein (sonst motzt der Browser, und die DSGVO auch ein bisschen).
Und das warâs auch schon.
Mehr brauchst du nicht, um Abwesenheiten völlig automatisch zu verarbeiten und sauber im Kalender abzulegen.
Das HTML-Formular als Basis fĂŒr den Workflow
Damit der n8n-Workflow ĂŒberhaupt Daten verarbeiten kann, brauchen wir zunĂ€chst ein kleines HTML-Formular. Dieses liegt spĂ€ter auf meiner Subdomain automation.draeger-it.blog und dient als Einstiegspunkt fĂŒr alle Abwesenheitsmeldungen.
HTML Formular zum pflegen von Abwesenheiten
Ich stelle dir das komplette Formular als Download zur VerfĂŒgung â so musst du nicht selbst Code kopieren oder zusammenbauen.
Der wichtigste Punkt bei der Anpassung:
Im Formular findest du einen Platzhalter namens DEINE_N8N_WEBHOOK_URL_HIER.
Dort trÀgst du spÀter die Webhook-URL aus deinem n8n-Workflow ein.
Diese URL bekommt n8n automatisch zugewiesen, sobald du den Webhook-Node angelegt hast.
AuĂerdem gibt es im Formular einen Link zur DatenschutzerklĂ€rung.
Diesen kannst du problemlos auf deine eigene Seite anpassen â im Beispiel verweise ich auf:
https://draeger-it.blog/datenschutz
Mehr musst du an dem Formular nicht Ă€ndern. Nach dem EinfĂŒgen deiner Webhook-Adresse kannst du die Datei einfach auf deine Subdomain hochladen und sofort verwenden.
Download: HTML-Formular (ZIP / HTML-Datei)
HTML Seite mit Formular zum Absenden von AbwesenheitenHerunterladen
Um die Seite nicht komplett öffentlich zugĂ€nglich zu machen, habe ich die Subdomain zusĂ€tzlich mit einem einfachen Basic-Auth-Schutz versehen. Das ist sicherheitstechnisch keine Hochsicherheitslösung, aber fĂŒr interne Tools und Demo-Formulare völlig ausreichend. So kann nicht jede zufĂ€llige Person auf das Formular zugreifen, aber ich komme trotzdem bequem von ĂŒberall aus dran.
einfaches Basic-Auth Formular fĂŒr das HTML Formular
Der n8n-Workflow mit Webhook
Jetzt wirdâs spannend: Wir bauen den eigentlichen n8n-Workflow, der das HTML-Formular verarbeitet und spĂ€ter automatisch einen Termin im Google Kalender erzeugt.
n8n Workflow - Abwesenheits Kalender
Der Workflow im Ăberblick
Bevor wir in die Details einsteigen, hier einmal der komplette Ablauf in Kurzform:
- Formular ausfĂŒllen
Der Nutzer trÀgt Name, Zeitraum und Grund der Abwesenheit ein.
- Webhook auslösen
Beim Absenden wird das HTML-Formular direkt an n8n ĂŒbermittelt.
- Daten prĂŒfen & formatieren
n8n validiert die Eingaben, formatiert Daten und bereitet alles fĂŒr den Kalender vor.
- Kalendereintrag erstellen
Die Abwesenheit wird automatisch als Termin im Google Kalender hinterlegt.
- Benachrichtigung senden
Zum Schluss erhĂ€lt der Nutzer eine BestĂ€tigung oder â falls etwas nicht stimmt â eine Fehlermeldung.
Der Workflow im Detail
Der Einstiegspunkt fĂŒr den gesamten Prozess ist ein Webhook.
Dieser Webhook nimmt die Daten aus deinem Formular entgegen und leitet sie an die nachfolgenden Nodes weiter â ganz ohne eigenen Server, PHP, Backend oder API-Kenntnisse.
Der Workflow beginnt mit einem Webhook, der jedes Mal ausgelöst wird, wenn jemand unser HTML-Formular absendet. DafĂŒr musst du in n8n lediglich einen Webhook-Node hinzufĂŒgen. Sobald der Node gespeichert ist, stellt dir n8n automatisch eine eindeutige Webhook-URL bereit.
Diese URL ersetzt spĂ€ter im Formular den Platzhalter DEINE_N8N_WEBHOOK_URL_HIER â und schon ist dein Formular direkt mit dem Workflow verbunden.
Im HTML-Formular stellen wir bereits sicher, dass alle Pflichtfelder ausgefĂŒllt sind â inklusive der Zustimmung zur DatenschutzerklĂ€rung. Das reicht fĂŒr normale Nutzer vollkommen aus.
Allerdings kann unser Workflow theoretisch auch direkt ĂŒber die Webhook-URL angesteuert werden. Diese ist nicht geheim und könnte zum Beispiel von einem Angreifer genutzt werden, um den Workflow mit ungĂŒltigen oder unvollstĂ€ndigen Daten zu fluten.
Deshalb lohnt es sich, im Workflow selbst eine zusĂ€tzliche PrĂŒfung einzubauen.
DafĂŒr eignet sich eine IF-Node, mit der wir nochmals kontrollieren können, ob alle wichtigen Felder im JSON vorhanden sind und sinnvolle Werte enthalten.
So stellen wir sicher, dass nur valide Formulare weiterverarbeitet werden â und alles andere direkt abgebrochen wird. Das schĂŒtzt den Workflow vor unnötiger Last und verhindert, dass unvollstĂ€ndige oder manipulierte Daten in den Kalender oder die Datenbank wandern.
Sobald das Formular abgesendet wurde, landen die Daten im Webhook-Node unseres n8n-Workflows. Dort können wir sie bequem weiterverarbeiten und â fĂŒr mehr Ăbersichtlichkeit â in ein sauberes JSON-Objekt umwandeln.
Dazu verwenden wir im nĂ€chsten Node eine kleine Expression, die alle Felder aus dem Request bĂŒndelt:
{{ JSON.stringify({
name: $json.body.name,
email: $json.body.email,
reason: $json.body.reason,
date_from: $json.body.date_from,
date_to: $json.body.date_to,
comment: $json.body.comment,
privacy: $json.body.privacy
}) }}
Damit haben wir alle relevanten Angaben aus dem Formular ordentlich strukturiert und können sie im weiteren Verlauf des Workflows â etwa fĂŒr den Google Kalender oder die Datenbank â problemlos weiterverwenden.
Im nĂ€chsten Schritt ermitteln wir zunĂ€chst den aktuellen Zeitstempel und bringen ihn direkt in ein gut lesbares Format â hier verwende ich dd.MM.yy â HH:mm:ss.
Gleichzeitig formatieren wir auch die vom Formular empfangenen Datumswerte fĂŒr die Abwesenheit.
Der Grund dafĂŒr ist ganz simpel:
Diese Felder werden spĂ€ter in einer BestĂ€tigungs-E-Mail benötigt und sollen dort natĂŒrlich sauber und verstĂ€ndlich angezeigt werden. Durch die Formatierung an dieser Stelle mĂŒssen wir uns spĂ€ter im Workflow nicht mehr darum kĂŒmmern.
Nachdem wir jetzt alle Daten gesammelt und formatiert haben, folgt eine weitere sinnvolle PrĂŒfung: Wir stellen sicher, dass das Von-Datum tatsĂ€chlich vor dem Bis-Datum liegt.
Theoretisch lieĂe sich das bereits im HTML-Formular mit etwas JavaScript abfangen â aber da wir hier bewusst einen Low-Code / No-Code-Ansatz verfolgen, erledigen wir diese Logik direkt in n8n.
DafĂŒr fĂŒgen wir eine IF-Node ein, die prĂŒft, ob beide Datumswerte in der richtigen Reihenfolge liegen.
Wenn die PrĂŒfung erfolgreich ist, geht es weiter mit dem nĂ€chsten Schritt: dem Eintrag in den Google Kalender.
Sollte das Datum jedoch ungĂŒltig sein, wird der Workflow nicht fortgesetzt â stattdessen versenden wir eine kurze Fehlermeldung per E-Mail, damit der Benutzer weiĂ, was schiefgelaufen ist.
Im Fehlerfall â also wenn die DatumsprĂŒfung fehlschlĂ€gt â senden wir wie erwĂ€hnt eine E-Mail an den Ersteller des Formulars. In dieser Nachricht erklĂ€ren wir nicht nur, dass die Abwesenheit nicht gespeichert wurde, sondern geben auch einen kurzen Hinweis darauf, welche PrĂŒfung nicht bestanden wurde. So weiĂ der Nutzer sofort, was zu korrigieren ist.
FĂŒr den Versand nutze ich einen ganz normalen GMail-Account. Das hat den Vorteil, dass die Einrichtung in n8n extrem unkompliziert ist: Einmal verbinden, die Autorisierung bestĂ€tigen â und schon kann n8n E-Mails ĂŒber das eigene Google-Konto versenden.
Die Nachricht selbst verschicke ich im HTML-Format. Dadurch können im Inhalt problemlos HTML-Tags verwendet werden, z. B. fĂŒr fett formatierten Text, AbsĂ€tze oder farblich hervorgehobene Hinweise. Das sorgt dafĂŒr, dass die Mail deutlich ĂŒbersichtlicher und angenehmer zu lesen ist als ein reiner Textblock.
Der Abwesenheitsantrag vom {{ $json.timestamp }}
fĂŒr {{ $('Create Abwesenheit Object').item.json.abwesenheit.name }}
konnte nicht angelegt werden!
Von: {{ $('Date & Time - format from Date').item.json.formattedDateFrom }}
Bis: {{ $('Date & Time - format to Date').item.json.formattedDateTo }}
Grund: {{ $('Create Abwesenheit Object').item.json.abwesenheit.reason }}
Kommentar:
{{ $('Create Abwesenheit Object').item.json.abwesenheit.comment }}
Hinweis:
Das Datum von muss vor dem Datum bis liegen!
Der Datenschutzbestimmung zu zugestimmt werden!
Wenn die PrĂŒfung ergibt, dass alle Daten korrekt sind, geht es weiter mit dem nĂ€chsten Schritt: der Erstellung des Kalendereintrags. Damit der Eintrag im Google Kalender richtig abgebildet wird, mĂŒssen wir beim Bis-Datum einen Tag hinzufĂŒgen. Hintergrund: Google Calendar interpretiert Ganztagstermine so, dass das Enddatum exklusiv ist â der Termin endet also einen Tag vorher, wenn wir nichts anpassen.
Diese kleine Korrektur lÀsst sich ganz einfach mit einer Date & Time Node in n8n erledigen. Dort addieren wir zum date_to einfach einen weiteren Tag, bevor die Daten an den Google-Calendar-Node weitergegeben werden. Damit wird die Abwesenheit im Kalender exakt so angezeigt, wie man es erwartet.
Mit den aufbereiteten Daten können wir jetzt den eigentlichen Kalendereintrag erstellen. Im Google-Calendar-Node mĂŒssen wir dafĂŒr nichts weiter tun, als die entsprechenden Werte per Drag & Drop in die vorgesehenen Felder zu ziehen â n8n macht uns das hier wirklich leicht.
In meinem Fall fĂŒlle ich zusĂ€tzlich die Description des Termins. Dort liste ich alle relevanten Informationen wie Name, Zeitraum, Grund der Abwesenheit und den optionalen Kommentar aus dem Formular noch einmal ĂŒbersichtlich auf. So steht spĂ€ter im Kalender alles genau so drin, wie man es erwartet, und die Abwesenheit bleibt eindeutig nachvollziehbar.
{{ $('Create Abwesenheit Object').item.json.abwesenheit.name }} ist vom {{ $('Date & Time - format from Date').item.json.formattedDateFrom }} bis einschlieĂlich {{ $('Date & Time - format to Date').item.json.formattedDateTo }} nicht anwesend.
Kommentar:
{{ $('Create Abwesenheit Object').item.json.abwesenheit.comment }}
Am Ende des Workflows sende ich noch eine kurze BestĂ€tigungsmail, die darĂŒber informiert, dass der Abwesenheitseintrag erfolgreich ĂŒbernommen wurde. So bekommt der Nutzer direkt eine RĂŒckmeldung, dass alles funktioniert hat.
Der Abwesenheitsantrag vom {{ $('Date & Time').item.json.timestamp }} fĂŒr {{ $('Create Abwesenheit Object').item.json.abwesenheit.name }} wurde erfolgreich mit den nachfolgenden Daten angelegt:
Von: {{ $('Date & Time - format from Date').item.json.formattedDateFrom }}
Bis: {{ $('Date & Time - format to Date').item.json.formattedDateTo }}
Grund: {{ $('Create Abwesenheit Object').item.json.abwesenheit.reason }}
Kommentar:
{{ $('Create Abwesenheit Object').item.json.abwesenheit.comment }}
Was man noch automatisieren könnte
Der Workflow funktioniert bereits zuverlĂ€ssig â aber natĂŒrlich lĂ€sst sich das Ganze noch deutlich weiter ausbauen.
Aktuell wird jede Abwesenheit eingetragen, ohne dass der Nutzer spÀter die Möglichkeit hat, den Eintrag selbst zu stornieren oder zu bearbeiten. Genau hier kann n8n seine StÀrken ausspielen.
Eine Idee wÀre, die Daten jedes Kalendereintrags zusÀtzlich in einer n8n DataTable abzulegen. Dort könnte man einen eindeutigen Hash oder Token speichern, der den Datensatz eindeutig identifiziert. Diesen Hash könnte man dem Nutzer direkt in der BestÀtigungsmail als speziellen Link mitgeben.
Ăber diesen Link wĂŒrden wir anschlieĂend einen weiteren Webhook ansteuern â zum Beispiel zum Löschen oder Anpassen eines Eintrags.
Alternativ könnte man auch ein eigenes kleines âAbwesenheit bearbeitenâ-Formular bereitstellen, das ĂŒber einen separaten Webhook lĂ€uft und die bestehenden Daten aktualisiert.
Damit lieĂe sich der Workflow zu einem kleinen, aber vollstĂ€ndigen Abwesenheits-Managementsystem erweitern â ganz ohne eigene Serverlogik und komplett mit Low-Code-Mitteln.
Mit nur wenigen Nodes lĂ€sst sich aus einem einfachen HTML-Formular ein vollautomatischer Abwesenheitsworkflow bauen â ganz ohne eigenes Backend und komplett im Low-Code-Stil. n8n ĂŒbernimmt dabei nicht nur die Verarbeitung der Formulardaten, sondern kĂŒmmert sich auch um Validierung, Datumshandling, KalendereintrĂ€ge und E-Mail-Benachrichtigungen.
Das Ergebnis ist ein schlanker, zuverlĂ€ssiger Prozess, der im Alltag spĂŒrbar Zeit spart und gleichzeitig Fehler reduziert. Und das Beste: Der Workflow ist erst der Anfang. Mit ein paar Erweiterungen â wie z. B. einer Bearbeiten- oder Stornieren-Funktion â lĂ€sst sich daraus problemlos ein kleines Abwesenheitsmanagement-System entwickeln.
Wenn du noch tiefer einsteigen möchtest oder den Workflow Schritt fĂŒr Schritt nachbauen willst, findest du alle Details dazu im begleitenden YouTube-Video. Viel SpaĂ beim Automatisieren!
FAQ â HĂ€ufige Fragen zum n8n-Webhooks & Abwesenheitsworkflow
Wie sicher ist ein n8n-Webhook?
Ein Webhook ist grundsÀtzlich öffentlich erreichbar, daher solltest du ihn absichern.
Das geht z. B. ĂŒber:
- ein Webhook-Secret
- einen Custom-Header
- IP-Restriktion
- oder Basic Auth vor dem Formular
FĂŒr interne Tools reicht meist eine einfache SchutzmaĂnahme. Mehr dazu zeige ich im Video.
Kann ich den Workflow auch ohne Google-Konto nutzen?
Ja! Google Calendar ist nur ein Beispiel.
Du kannst stattdessen auch:
- Outlook / Microsoft 365
- iCloud-Kalender
- CalDAV
- oder jede andere Kalender-API
einbinden â n8n unterstĂŒtzt zahlreiche Dienste.
Kann ich das HTML-Formular anpassen?