Formulieren op je website

Met een formulier op je site kunnen bezoekers zich aanmelden, een vraag stellen of boeken. Elk verstuurd formulier komt in je lijst met mensen. Een werkend formulier heeft vier dingen nodig, die allemaal gecontroleerd worden als je AI de site online zet: het formulieradres, co1-app.json, de botcontrole en een bedankpagina.

De makkelijke manier: bouw de pagina vanuit page.json met de vaardigheid build-a-landing-page. Die regelt alle vier voor je. De rest van deze pagina gaat over formulieren die met de hand geschreven zijn.

Als je AI de site online zet, wordt een met de hand geschreven formulier geweigerd als:

co1-app.json niet om forms.submit vraagt,
co1-app.json geen formulier met die naam noemt,
een invoerveld in het formulier niet bij de velden van het formulier hoort,
de controle op een echt mens ontbreekt.

Elke weigering zegt precies wat er moet worden opgelost, zodat de site nooit online gaat met een formulier dat niet kan werken.

Het formulieradres

Een formulier post naar het eigen formulieradres van de site, als pad op de site, nooit als volledig webadres:

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

Hier is join de naam van het formulier. Elk formulier dat in je lijst met mensen landt, post naar /api/v1/forms/<form>. Op openbare pagina's mag de code van het formulier in de pagina of in een .js-bestand staan, en een formulier van een andere dienst (een nieuwsbrieftool, bijvoorbeeld) mag naar die dienst posten. Op ledenpagina's gaat code in .js-bestanden, en een formulier mag alleen naar een andere site posten als die site in co1-app.json staat onder allowedHosts.form (zie "Je website").

Het bestand co1-app.json

Elke site met een formulier heeft een bestand co1-app.json in de hoofdmap. Daarin staat wat de site mag doen, en welke formulieren en velden hij heeft. Zonder dit bestand wordt elk formulier van elke bezoeker geweigerd, dus de site gaat pas online als het er staat.

{
  "v": 1,
  "id": "home",
  "kind": "static",
  "permissions": ["forms.submit"],
  "forms": {
    "join": {
      "thanks": "/thanks/",
      "fields": {
        "name": { "type": "text" },
        "email": { "type": "email", "required": true }
      }
    }
  }
}

id is de naam van de site, dezelfde als site bij deploy_site.
permissions moet forms.submit bevatten voor elk formulier. Verkopen voegt checkout.create toe.
Hoeveel formulieren een site kan hebben, en hoeveel velden een formulier, hoort bij je abonnement. Gaat een site erover, dan noemt het antwoord het getal van je abonnement. Meer nodig? Mail hello@companyofone.eu en we verhogen de grens.
De naam van een formulier gebruikt kleine letters, cijfers en -.
Elk formulier heeft minstens 1 veld.

Velden

Elk invoerveld in het formulier moet een veld zijn dat in co1-app.json staat, met dezelfde naam. Veldnamen gebruiken kleine letters, cijfers en _.
Elk formulier heeft één veld van het type email nodig, zodat de persoon antwoord kan krijgen.
Veldtypen: text, long_text, email, phone, number, choice (met zijn options), consent en date.
Een veld kan required zijn, en kan een maximale lengte instellen met max (tot 5.000). Zonder die grens bevat text maximaal 300 tekens en long_text maximaal 2.000.
Je mag ook utm_source, utm_medium, utm_campaign, utm_content en source sturen zonder ze te noemen, om te zien waar mensen vandaan kwamen.

De botcontrole

Formulieren, aanmeldingen en boekingen controleren met de personencheck of een echt mens ze stuurde. Een formulier zonder de controle wordt geweigerd als de site online gaat. Zet de widget in het formulier, met de echte sleutel van je site in data-sitekey, en laad het script van de personencheck één keer op de pagina. deploy_site met read: true geeft de sleutel als turnstile_site_key, en een weigering wegens een ontbrekende controle geeft hem ook:

<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>

Alleen als je de controle echt niet wilt, zet je "turnstile": false in co1-app.json.

De bedankpagina

Geef elk formulier een pagina "thanks" in co1-app.json, zoals /thanks/, en maak die pagina. Nadat een bezoeker het formulier verstuurt, komt hij daar terecht. Gaat er iets mis, dan ziet hij een eenvoudige pagina die zegt wat er gebeurde, met een link terug. Nooit ruwe code.

Velden waar een site nooit om vraagt

Geen velden voor wachtwoorden, kaarten, bankgegevens of eenmalige codes. Leden loggen in met een code per e-mail, en betalingen lopen via de kassa.
Een nieuwsbriefveld is een zichtbaar vakje, niet aangevinkt, dat de bezoeker zelf aanvinkt. Code vinkt het nooit aan. Na een ja volgt een e-mail om het te bevestigen, en pas na die klik staat hij op de lijst.

Een formulier testen, en wat je ziet

Op een voorbeeld wordt niets bewaard wat een bezoeker stuurt. De pagina zegt "Preview · nothing you send here is saved". Test het formulier zodra de site live is.
Elk verstuurd formulier komt in je mensenlijst. De antwoorden, zoals een datum, staan als notitie op de kaart van de persoon. Je kunt mensen er nog niet op sorteren.
Iedereen in je mensenlijst heeft een e-mailadres nodig. Een telefoonnummer is niet verplicht.
People, Needs you toont wie nog op je antwoord wacht.