• Hilfe · Deine Website

Formulare auf deiner Website

Mit einem Formular auf deiner Website können sich Besucher anmelden, eine Frage stellen oder buchen. Jedes gesendete Formular landet in deiner Kontaktliste. Ein funktionierendes Formular braucht vier Dinge, und alle werden geprüft, wenn deine KI die Website online stellt: die Formular-Adresse, co1-app.json, die Bot-Prüfung und eine Danke-Seite.

Der einfache Weg: Bau die Seite aus page.json mit der Fähigkeit build-a-landing-page. Die erledigt alle vier für dich. Der Rest dieser Seite ist für Formulare, die von Hand geschrieben sind.

Wenn deine KI die Website online stellt, wird ein von Hand geschriebenes Formular abgelehnt, wenn:

  • co1-app.json nicht nach forms.submit fragt,
  • co1-app.json kein Formular mit diesem Namen nennt,
  • ein Eingabefeld im Formular keines der Felder des Formulars ist,
  • die Prüfung auf einen echten Menschen fehlt.

Jede Ablehnung sagt genau, was zu beheben ist, damit die Website nie mit einem Formular online geht, das nicht funktionieren kann.

Die Formular-Adresse

Ein Formular sendet an die eigene Formular-Adresse der Website, als Pfad auf der Website, nie als volle Webadresse:

<form method="post" action="/api/v1/forms/join">

Hier ist join der Name des Formulars. Jedes Formular, das in deiner Personenliste landen soll, sendet an /api/v1/forms/<form>. Auf öffentlichen Seiten darf der Code des Formulars in der Seite oder in einer .js-Datei stehen, und ein Formular von einem anderen Dienst (etwa einem Newsletter-Tool) darf an diesen Dienst senden. Auf Mitgliederseiten kommt Code in .js-Dateien, und ein Formular darf nur dann an eine andere Website senden, wenn diese in co1-app.json unter allowedHosts.form steht (siehe "Deine Website").

Die Datei co1-app.json

Jede Website mit einem Formular hat eine Datei namens co1-app.json in ihrem Hauptordner. Darin steht, was die Website darf und welche Formulare und Felder sie hat. Ohne diese Datei wird jedes Formular jedes Besuchers abgelehnt, darum geht die Website erst online, wenn die Datei da ist.

{
  "v": 1,
  "id": "home",
  "kind": "static",
  "permissions": ["forms.submit"],
  "forms": {
    "join": {
      "thanks": "/thanks/",
      "fields": {
        "name": { "type": "text" },
        "email": { "type": "email", "required": true }
      }
    }
  }
}
  • id ist der Name der Website, derselbe wie site bei deploy_site.
  • permissions muss für jedes Formular forms.submit enthalten. Wer verkauft, fügt checkout.create hinzu.
  • Wie viele Formulare eine Website haben kann und wie viele Felder ein Formular, kommt mit deinem Tarif. Geht eine Website darüber, nennt die Antwort die Zahl deines Tarifs. Brauchst du mehr? Schreib an hello@companyofone.eu, und wir heben die Grenze an.
  • Der Name eines Formulars nutzt Kleinbuchstaben, Ziffern und -.
  • Jedes Formular hat mindestens 1 Feld.

Felder

  • Jedes Eingabefeld im Formular muss ein Feld sein, das in co1-app.json steht, mit demselben Namen. Feldnamen nutzen Kleinbuchstaben, Ziffern und _.
  • Jedes Formular braucht ein Feld vom Typ email, damit man der Person antworten kann.
  • Feldtypen: text, long_text, email, phone, number, choice (mit seinen options), consent und date.
  • Ein Feld kann required sein und mit max seine Höchstlänge festlegen (bis 5.000). Ohne Angabe fasst text bis 300 Zeichen und long_text bis 2.000.
  • Du kannst auch utm_source, utm_medium, utm_campaign, utm_content und source senden, ohne sie anzugeben, um zu sehen, woher die Leute kamen.

Die Bot-Prüfung

Formulare, Anmeldungen und Buchungen prüfen mit der Personenprüfung, dass ein echter Mensch sie gesendet hat. Ein Formular ohne die Prüfung wird abgelehnt, wenn die Website online geht. Setz das Widget in das Formular, mit dem echten Schlüssel deiner Website in data-sitekey, und lade das Skript der Personenprüfung einmal auf der Seite. deploy_site mit read: true gibt dir den Schlüssel als turnstile_site_key, und eine Ablehnung wegen fehlender Prüfung nennt ihn auch:

<form method="post" action="/api/v1/forms/join">
  <input name="name">
  <input name="email" type="email" required>
  <div class="cf-turnstile" data-sitekey="your site's real key"></div>
  <button type="submit">Join</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Nur wenn du die Prüfung wirklich nicht willst, setz "turnstile": false in co1-app.json.

Die Danke-Seite

Gib jedem Formular in co1-app.json eine Seite "thanks", etwa /thanks/, und bau diese Seite. Nachdem ein Besucher das Formular gesendet hat, landet er dort. Geht etwas schief, sieht er eine einfache Seite, die sagt, was passiert ist, mit einem Link zurück. Nie rohen Code.

Felder, nach denen eine Website nie fragt

  • Keine Felder für Passwörter, Karten, Bankdaten oder Einmal-Codes. Mitglieder melden sich mit einem gemailten Code an, und Zahlungen laufen über den Bezahlvorgang.
  • Ein Newsletter-Feld ist ein sichtbares Kästchen, nicht angehakt, das der Besucher selbst anhakt. Code hakt es nie an. Nach einem Ja kommt dann eine E-Mail zur Bestätigung, und erst nach diesem Klick steht die Person auf der Liste.

Ein Formular testen, und was du siehst

  • Auf einer Vorschau wird nichts gespeichert, was jemand schickt. Die Seite sagt "Preview · nothing you send here is saved". Teste das Formular, sobald die Site live ist.
  • Jedes gesendete Formular landet in deiner Personenliste. Die Antworten, wie ein Datum, stehen als Notiz auf der Karte der Person. Sortieren kannst du danach noch nicht.
  • Alle in deiner Personenliste brauchen eine E-Mail-Adresse. Eine Telefonnummer ist freiwillig.
  • People, Needs you zeigt, wer noch auf deine Antwort wartet.