Les formulaires de votre site

Un formulaire sur votre site permet aux visiteurs de s'inscrire, de poser une question ou de réserver. Chaque formulaire envoyé arrive dans votre liste de personnes. Un formulaire qui marche a besoin de quatre choses, toutes vérifiées quand votre IA met le site en ligne : l'adresse des formulaires, co1-app.json, la vérification anti-robots et une page de remerciement.

La façon simple : construisez la page à partir de page.json avec le savoir-faire build-a-landing-page. Il fait les quatre pour vous. Le reste de cette page concerne les formulaires écrits à la main.

Quand votre IA met le site en ligne, un formulaire écrit à la main est refusé si :

co1-app.json ne demande pas forms.submit,
co1-app.json ne déclare aucun formulaire de ce nom,
un champ de saisie du formulaire ne fait pas partie des champs du formulaire,
la vérification qu'il s'agit d'une personne manque.

Chaque refus dit exactement quoi corriger, pour que le site ne passe jamais en ligne avec un formulaire qui ne peut pas marcher.

L'adresse des formulaires

Un formulaire envoie vers l'adresse des formulaires du site lui-même, sous forme de chemin sur le site, jamais d'adresse web complète :

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

Ici, join est le nom du formulaire. Chaque formulaire qui arrive dans votre liste de personnes envoie vers /api/v1/forms/<form>. Sur les pages publiques, le code du formulaire peut être dans la page ou dans un fichier .js, et un formulaire d'un autre service (un outil de newsletter, par exemple) peut envoyer vers ce service. Sur les pages des membres, le code va dans des fichiers .js, et un formulaire ne peut envoyer vers un autre site que si ce site est listé dans co1-app.json sous allowedHosts.form (voir "Votre site").

Le fichier co1-app.json

Chaque site avec un formulaire a un fichier appelé co1-app.json à sa racine. Il dit ce que le site a le droit de faire, et quels formulaires et champs il a. Sans lui, le formulaire de chaque visiteur est refusé, donc le site n'est pas mis en ligne tant qu'il n'est pas là.

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

id est le nom du site, le même que le site de deploy_site.
permissions doit contenir forms.submit pour tout formulaire. Vendre ajoute checkout.create.
Le nombre de formulaires d'un site, et de champs d'un formulaire, vient avec votre abonnement. Si un site le dépasse, la réponse donne le nombre de votre abonnement. Besoin de plus ? Écrivez à hello@companyofone.eu et nous relevons la limite.
Le nom d'un formulaire utilise des lettres minuscules, des chiffres et -.
Chaque formulaire a au moins 1 champ.

Les champs

Chaque champ de saisie du formulaire doit être un champ déclaré dans co1-app.json, avec le même nom. Les noms de champs utilisent des lettres minuscules, des chiffres et _.
Chaque formulaire a besoin d'un champ de type email, pour qu'on puisse répondre à la personne.
Types de champs : text, long_text, email, phone, number, choice (avec ses options), consent et date.
Un champ peut être required, et peut fixer sa longueur max (jusqu'à 5 000). Sans cela, text contient jusqu'à 300 caractères et long_text jusqu'à 2 000.
Vous pouvez aussi envoyer utm_source, utm_medium, utm_campaign, utm_content et source sans les déclarer, pour voir d'où viennent les gens.

La vérification anti-robots

Les formulaires, les inscriptions et les réservations vérifient qu'une vraie personne les a envoyés : c'est la vérification de personne. Un formulaire sans cette vérification est refusé quand le site passe en ligne. Mettez le widget dans le formulaire, avec la vraie clé de votre site dans data-sitekey, et chargez une fois le script de la vérification sur la page. deploy_site avec read: true donne la clé sous le nom turnstile_site_key, et un refus pour une vérification manquante la donne aussi :

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

Seulement si vous ne voulez vraiment pas de vérification, mettez "turnstile": false dans co1-app.json.

La page de remerciement

Donnez à chaque formulaire une page "thanks" dans co1-app.json, comme /thanks/, et créez cette page. Après avoir envoyé le formulaire, le visiteur arrive dessus. Si quelque chose se passe mal, il voit une page simple qui dit ce qui s'est passé, avec un lien pour revenir. Jamais de code brut.

Les champs qu'un site ne demande jamais

Pas de champs pour un mot de passe, une carte, une banque ou un code à usage unique. Les membres se connectent avec un code envoyé par e-mail, et les paiements passent par la page de paiement.
Un champ newsletter est une case visible, non cochée, que le visiteur coche lui-même. Le code ne la coche jamais. Un oui reçoit ensuite un e-mail pour le confirmer, et la personne n'est sur la liste qu'après ce clic.

Tester un formulaire, et ce que vous voyez

Sur un aperçu, rien de ce qu'envoie un visiteur n'est gardé. La page dit "Preview · nothing you send here is saved". Testez le formulaire une fois le site en ligne.
Chaque formulaire envoyé arrive dans votre liste de personnes. Ses réponses, comme une date, sont une note sur la fiche de la personne. Vous ne pouvez pas encore trier les personnes par elles.
Chaque personne de votre liste a besoin d'une adresse e-mail. Le numéro de téléphone est facultatif.
People, Needs you montre qui attend encore votre réponse.