Formular mit dem Chat bauen und Einträge sammeln

Du willst sharepa direkt aus dem Chat benutzen? So verbindest du Claude oder ChatGPT

Eine Seite auf sharepa kann ein Formular haben, das wirklich etwas tut: Was Besucher eintragen, landet bei dir in der App. Du bekommst eine E-Mail, wenn neue Einträge da sind, siehst sie als Tabelle und lädst sie als CSV herunter. Einrichten musst du dafür nichts.

Damit das klappt, muss das Formular an eine feste Adresse senden. Hast du sharepa als Connector verbunden, weiss dein Chat das von selbst. Lädst du den Code von Hand hoch, gibst du dem Chat den Anhang unten mit.

Im Video baut Claude eine Anmeldeseite mit Formular und stellt sie online, danach kommen die ersten Anmeldungen in der App an.

Website und Formular aus Claude und ChatGPT mit einem Prompt online stellenVideo auf YouTube · 7 Min.

So geht es

Beschreib dem Chat, was du brauchst, und häng den Prompt-Anhang aus dem nächsten Abschnitt an. Ein Beispiel:

Bau mir eine Anmeldeseite für unseren Kochkurs am 14. November in Bern.
Das Formular fragt Name, E-Mail, Anzahl Personen und Allergien ab.
Schlicht, warmes Beige, grosse Schrift, gut am Handy.

Kopier den Code aus dem Chat und füg ihn auf app.getsharepa.ch ein. Unter der Vorschau steht grün „Diese Seite sammelt Formulareinträge“. Steht dort stattdessen eine gelbe Warnung, sendet das Formular nirgends hin: Gib dem Chat die Warnung zurück, er korrigiert es.
Veröffentliche die Seite und füll das Formular einmal selbst aus. Du landest auf einer Danke-Seite.
Öffne die Seite unter „Meine Seiten“. Im Bereich „Einträge“ steht dein Test. Lösch ihn wieder, dann ist die Liste sauber.

Bereich Einträge in der App mit drei Anmeldungen als Tabelle, darunter die Knöpfe „Als CSV herunterladen“ und „Alle löschen“

Prompt-Anhang zum Kopieren

Häng diesen Block an deinen Prompt, wenn du den Code von Hand hochlädst. Er sorgt dafür, dass das Formular im richtigen Format gebaut wird, in HTML und in React.

Technische Vorgaben für das Formular (die Seite wird auf sharepa gehostet):

- Das Formular sendet an den relativen Pfad /__sharepa/formular. Keinen anderen Dienst und keine andere Adresse verwenden, nichts erfinden.

- HTML: <form action="/__sharepa/formular" method="post">, mit einem echten Absende-Knopf (type="submit"). Im Normalfall kein JavaScript, das das Absenden verhindert: der Besucher landet dann auf einer Danke-Seite.

- Soll die Seite beim Absenden stehen bleiben (Newsletter-Feld, Warteliste): das Absenden abfangen und per fetch an denselben Pfad senden, mit dem Kopf accept: application/json und dem Körper new URLSearchParams(new FormData(formular)). Bei r.ok das Formular durch eine eigene Danke-Meldung ersetzen, sonst eine Fehlermeldung zeigen und den Knopf wieder freigeben. action und method bleiben am Formular, damit es auch ohne JavaScript funktioniert.

- React: entweder ein natives Formular mit genau diesem action und method und OHNE preventDefault, oder beim Absenden fetch("/__sharepa/formular", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(daten) }) mit einem flachen Objekt (nur Text, Zahlen, Listen von Text). Ist die Antwort ok, zeig eine eigene Danke-Meldung, sonst eine Fehlermeldung. Einträge nie nur im State der Komponente halten.

- Jedes Feld hat ein name-Attribut in Klartext und Kleinbuchstaben (name, email, telefon, nachricht). Die Namen werden die Spaltentitel in meiner Tabelle.

- Mehrstufige Formulare sind EIN Formular, dessen Schritte ein- und ausgeblendet werden. Abgesendet wird einmal, am Schluss, mit allen Feldern.

- Füg ein verstecktes Feld gegen Bots ein: <input type="text" name="_honig" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px">

- Optional: <input type="hidden" name="_formular" value="Anmeldung"> benennt das Formular. <input type="hidden" name="_weiter" value="/danke"> leitet nach dem Absenden auf einen Pfad derselben Seite statt auf die Standard-Danke-Seite.

- Keine Felder für Passwörter, Kreditkarten- oder andere Zahlungsdaten und keine Gesundheitsdaten. Solche Einträge werden abgewiesen.

- Keine Datei-Uploads, sie werden verworfen.

- Die Seite darf keine Daten an andere Server schicken: kein Formular-Dienst, keine fremde API, kein fetch an eine andere Adresse. Auf sharepa sind solche Anfragen gesperrt.

- Setz unter das Formular einen kurzen Satz, dass die Angaben nur für diesen Zweck verwendet werden, mit einem Link zu meiner Datenschutzerklärung. Keine Pflicht-Checkbox.

Was nach dem Absenden passiert

Du hast drei Möglichkeiten, und der Chat baut, was du ihm sagst:

Danke-Seite von sharepa. Der Normalfall, braucht nichts. Der Besucher sieht „Danke, das ist angekommen“ mit einem Link zurück.
Ein Abschnitt deiner eigenen Seite. Ein verstecktes Feld _weiter mit einem Pfad wie /#danke schickt den Besucher nach dem Absenden dorthin. Funktioniert ohne JavaScript.
Die Seite bleibt stehen. Das Formular sendet im Hintergrund, und an seiner Stelle erscheint dein eigenes „Danke“. Das passt für ein Newsletter-Feld oder eine Warteliste mitten auf der Seite. Wie das geht, steht in der Anleitung Warteliste und Newsletter-Anmeldung.

Was gespeichert wird

Zu jedem Eintrag speichern wir die Felder deines Formulars, den Zeitpunkt und den Namen des Formulars. Mehr nicht: keine IP-Adresse, kein Land, kein Gerät. Die E-Mail an dich nennt nur die Anzahl neuer Einträge, nie den Inhalt. Einträge löschen wir automatisch nach 12 Monaten; lad sie vorher herunter, wenn du sie länger brauchst.

Für die Angaben der Leute, die dein Formular ausfüllen, bist du verantwortlich. Sag ihnen beim Formular, wer du bist und wofür du die Angaben brauchst. Die Einzelheiten stehen in den Nutzungsbedingungen.

Einträge weiterleiten

Im Einmal-Plan kann sharepa jeden neuen Eintrag zusätzlich an n8n, Make, Zapier oder deinen eigenen Server schicken. Wie das geht, steht in der Anleitung Formulareinträge per Webhook weiterleiten.

Kann meine Seite eine fremde API aufrufen?

Nein. Eine Seite auf sharepa kann Formulare und Abfragen (fetch) nur an sich selbst und an sharepa schicken. Alles andere blockiert der Browser, bevor es den Server erreicht. Das gilt für Formular-Dienste wie Formspree oder Mailchimp genauso wie für eigene APIs.

Der Grund ist Sicherheit: Der häufigste Missbrauch von Gratis-Hostern sind gefälschte Login-Seiten, die eingetippte Passwörter an einen fremden Server schicken. Auf sharepa geht das nicht, und davon profitieren alle Seiten unter sharepa.page.

Bilder, Schriften und Skripte von anderen Servern laden weiter, ebenso eingebettete Inhalte wie YouTube oder Google Maps. Betroffen ist nur das Senden von Daten. Versucht deine Seite es trotzdem, sagt dir die App nach dem Veröffentlichen, an welchen Server, und die Seite geht sonst normal live.

Brauchst du für eine Seite wirklich eine fremde API, schreib an konrad@getsharepa.ch. Für einzelne Seiten gibt es eine Ausnahme von Hand.

Was das kostet

Nichts. Gratis sind 50 Einträge pro Seite und Tag und 200 pro Konto in 30 Tagen. Ist die Grenze erreicht, sehen Besucher einen Hinweis, und du bekommst eine E-Mail.

Fragen

Mein Formular sieht gut aus, aber es kommt nichts an. Woran liegt es?

Fast immer sendet es nirgends hin. Viele Chats bauen React-Formulare, die beim Absenden nur „Danke“ anzeigen und die Angaben verwerfen. sharepa warnt davor in der Vorschau. Gib dem Chat den Prompt-Anhang oben und lass ihn das Formular neu bauen, dann veröffentliche eine neue Version.

Geht das auch mit dem Connector?

Ja, und dann brauchst du den Anhang nicht. Sag zum Beispiel „Bau ein Kontaktformular im Stil meiner Seite und stell es online“. Dein Chat kennt die Vorgaben und sagt dir nach dem Veröffentlichen, wo die Einträge landen.

Bekomme ich den Inhalt per E-Mail?

Nein, mit Absicht. In der E-Mail steht nur, dass es neue Einträge gibt, und ein Link in die App. So liegen die Angaben deiner Besucher nicht in Postfächern herum. Pro Seite kommt höchstens eine E-Mail pro Stunde.

Für eine Warteliste oder um Interessenten zu sammeln: ja. Ein Feld für die E-Mail-Adresse und ein Knopf genügen, die Adressen stehen danach in deiner App und lassen sich als CSV in deinen Newsletter-Dienst laden. Soll die Seite beim Absenden nicht wechseln, nimm den Prompt-Anhang aus der Anleitung Warteliste und Newsletter-Anmeldung.

Für einen regelmässigen Newsletter reicht das allein nicht. Wer sich einträgt, bekommt von sharepa nie eine E-Mail, also auch keine Bestätigung zum Anklicken. Dieses doppelte Bestätigen ist bei Newslettern üblich und in manchen Ländern der einzige anerkannte Nachweis, dass jemand wirklich zugestimmt hat. Nimm dafür das Anmeldeformular deines Newsletter-Dienstes: Es zeigt direkt dorthin, und der Dienst schickt die Bestätigung. Auf einer sharepa-Seite funktioniert das genauso, ein Formular mit eigenem Ziel lässt sharepa unberührt.

Dieselbe Adresse kann sich mehrmals eintragen. Doppelte sortierst du nach dem Herunterladen aus.

Kann die Seite die Einträge wieder anzeigen, etwa eine Gästeliste?

Nein. Einträge gehen nur hinein, die Seite kann sie nicht lesen. Das ist ein Briefkasten, keine Datenbank. Für eine öffentliche Liste trägst du die Namen selbst in die Seite ein und veröffentlichst eine neue Version.

Was ist mit Spam?

Das versteckte Feld fängt einfache Bots ab, und es gibt Obergrenzen pro Minute, pro Tag und pro Monat. Einträge lassen sich trotzdem fälschen, weil jede Person das Formular ausfüllen kann. Lösch, was nach Spam aussieht, in der App.

Funktioniert das auf meiner eigenen Domain und mit Passwort?

Ja. Das Formular sendet an einen relativen Pfad und funktioniert deshalb unter name.sharepa.page genauso wie unter deiner Domain. Bei Seiten mit Passwort können nur Besucher eintragen, die das Passwort eingegeben haben.

Kann ich ein Formular eines anderen Dienstes verwenden?

Ja. Hat dein Formular ein eigenes Ziel, etwa bei einem Newsletter-Anbieter, lässt sharepa es in Ruhe. Die Einträge landen dann dort und nicht in deiner App.