Interaktives Vertrags-Tool

Ein Mini-Service für Freelancer und kleine Studios: Der Auftragnehmer trägt die Projektdaten ein, der Kunde unterschreibt den Vertrag direkt im Browser und lädt ein PDF herunter.

Rolle Entwicklung des kompletten Tools: UX, Frontend, Integrationen
Kunde Freelancer, kleine Studios und Dienstleistungsunternehmen
Stack HTML, CSS, JavaScript, Google Apps Script (optional)

Problem

In vielen Projekten werden Verträge manuell unterschrieben: Word-Dateien bearbeiten, per E-Mail schicken, auf Scans oder Fotos warten. Das ist langsam, umständlich und wird oft aufgeschoben, obwohl der Vertrag vor Projektbeginn erforderlich ist.

Lösung

Wie es für den Auftragnehmer funktioniert

  • Auf prepare.html trägt der Auftragnehmer seine Daten, die Projektbeschreibung, Fristen und Preise ein.
  • Das Tool generiert einen langen Link zu contract.html, in dem der Vertragstext im URL-Hash eingebettet ist.
  • Diesen Link kann man dem Kunden per Messenger oder E-Mail senden.

Wie es für den Kunden aussieht

  • Der Kunde öffnet contract.html und sieht einen fertigen, vorbefüllten Vertrag.
  • Er trägt seine Daten ein, setzt das Häkchen zur Zustimmung und zeichnet die Unterschrift direkt im Browser.
  • Danach kann der Vertrag als PDF heruntergeladen werden; optional werden die Daten in Google Sheets gespeichert oder per E-Mail versendet.

Ablauf & UX

Das Tool ist bewusst einfach gehalten: minimale Felder, alles auf einer Seite, keine Registrierung. Ziel ist es, dass beide Seiten den Vertrag in wenigen Minuten abschließen können.

  • Zwei Screens: Vertrag vorbereiten (Auftragnehmer) und unterschreiben (Kunde).
  • Datenübertragung über <code>location.hash</code> – keine Datenbank, kein schweres Backend.
  • Optionale Protokollierung mit Google Apps Script (Google Sheets oder CRM).

Screenshots des Tools

Einige Ansichten des Tools: Vorbereitung des Vertrags durch den Dienstleister und die Unterzeichnung direkt im Browser.

Online-Tool für Vertragsvorbereitung

Dieses Tool läuft als interne Seite meiner Website: Sie können die Vorbereitung öffnen, Testdaten eingeben und den gesamten Ablauf bis zur PDF-Signatur durchgehen.

Vertrag vorbereiten

Technologien & Erweiterungen

  • HTML/CSS
  • JavaScript
  • Signatur auf Canvas
  • PDF-Generierung
  • Google Apps Script

Kontakt

Haben Sie eine Frage
zu Ihrem Projekt?

Fragen Sie direkt nach Website, SEO, Automatisierung oder technischer Betreuung.

Der Assistent hilft sofort weiter.
Wenn nötig, können Sie die Anfrage später persönlich an mich weitergeben.

Direkte Antwort – Kontaktdaten sind nicht erforderlich.