Kontaktformular ohne Backend: DSGVO-konform, mit Upload und ohne reCAPTCHA.

Ein Formular in HTML sammelt nur die Eingaben. Beim Absenden schickt der Browser sie an eine Adresse, die im Formular als Ziel steht. Dort muss ein Programm laufen, das die Daten prüft, Spam aussortiert und eine Mail verschickt. Bei klassischen Websites ist das ein PHP-Skript auf dem Server des Hosters.

Websites, die mit Claude oder Lovable gebaut und als statische Dateien veröffentlicht werden, haben diesen Server nicht. Das Formular sieht fertig aus, aber die Anfragen landen nirgends. Das ist der häufigste Fehler, den wir bei selbst gebauten Seiten finden.

• Nur nötige Pflichtfelder. Meist E-Mail-Adresse oder Telefonnummer und die Nachricht. Name, Firma oder Adresse nur, wenn Sie sie für die Antwort wirklich brauchen.
• Hinweis mit Link zur Datenschutzerklärung direkt am Formular. Eine Checkbox ist bei einer reinen Kontaktanfrage nach verbreiteter Ansicht nicht nötig.
• Verschlüsselte Übertragung. Die Seite muss über https laufen, sonst gehen die Eingaben lesbar durchs Netz.
• Vertrag zur Auftragsverarbeitung mit dem Dienst, der die Anfragen annimmt. Bei Anbietern außerhalb der EU zusätzlich die Grundlage für die Übermittlung prüfen.
• Löschfrist. Anfragen nicht für immer aufbewahren. Legen Sie fest, wann sie gelöscht werden, und nennen Sie die Frist in der Datenschutzerklärung.
• Datenschutzerklärung anpassen. Sie muss den Formular-Dienst und den Spam-Schutz nennen, die Sie tatsächlich einsetzen. Mehr zu Rechtstexten: Rechtssichere Website.

Proof-of-Work heißt: Der Browser löst beim Absenden unbemerkt eine kleine Rechenaufgabe. Für einen Menschen dauert das einen Augenblick, für einen Bot, der tausend Formulare in der Minute abschickt, wird es teuer. ALTCHA ist ein quelloffenes Verfahren dafür, das sich selbst betreiben lässt. netstein Sites nutzt es aus der eigenen Infrastruktur und kombiniert es mit einem Honeypot-Feld. Läuft die Website bei netstein Sites, steht vor den Formularen zusätzlich eine Firewall.

• Dateitypen begrenzen, etwa auf Bilder und PDF, und eine Höchstgröße festlegen
• Dateien auf Schadsoftware prüfen, bevor jemand sie öffnet
• Statt Anhang in der Mail lieber ein Download-Link, der nach einiger Zeit abläuft
• Eine eigene, kürzere Löschfrist für Dateien, gerade bei Bewerbungen

Viele Formular-Dienste bieten Uploads erst in teureren Tarifen. Bei netstein Sites sind sie im Plan Starter enthalten, mit Download-Links und eigener Löschfrist; die Virenprüfung kommt mit dem nächsten Ausbau.

<form action="https://formular-dienst.example/abc123"
      method="post" enctype="multipart/form-data">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">

  <label for="email">E-Mail *</label>
  <input id="email" name="email" type="email" required
         autocomplete="email">

  <label for="nachricht">Ihre Nachricht *</label>
  <textarea id="nachricht" name="nachricht" required></textarea>

  <label for="fotos">Fotos oder PDF (optional)</label>
  <input id="fotos" name="fotos" type="file" multiple
         accept="image/*,application/pdf">

  <!-- Honeypot: per CSS ausblenden. Menschen sehen es nicht,
       Bots füllen es aus und werden aussortiert. -->
  <input class="hp" name="website" tabindex="-1"
         autocomplete="off">

  <p>Wir verwenden Ihre Angaben, um Ihre Anfrage zu beantworten.
     Mehr in der <a href="/datenschutz">Datenschutzerklärung</a>.</p>

  <button type="submit">Anfrage senden</button>
</form>

Und mit netstein Sites?

Dort schreiben Sie keinen Code, sondern sagen Claude: „Leg ein Kontaktformular an, Anfragen an inhaber@firma.de, bis zu drei Fotos oder PDFs, Anfragen nach 180 Tagen löschen.“ Claude trägt das in die Einstellungsdatei Ihres Projekts ein, zeigt Ihnen die Änderung und schickt nach Ihrem Ja eine Testanfrage:

"forms": {
  "kontakt": {
    "fields": [
      { "name": "email", "type": "email", "required": true },
      { "name": "nachricht", "type": "textarea", "required": true },
      { "name": "fotos", "type": "file", "maxFiles": 3,
        "maxSizeMb": 10, "accept": ["image/*", "application/pdf"] }
    ],
    "recipients": ["inhaber@firma.de"],
    "protection": "standard"
  }
},
"crm": { "retentionDays": 180 }

So funktioniert netstein Sites