• Aiuto · Il tuo sito

I moduli sul tuo sito web

Un modulo sul tuo sito permette ai visitatori di iscriversi, fare una domanda o prenotare. Ogni modulo inviato finisce nel tuo elenco delle persone. Un modulo che funziona ha bisogno di quattro cose, tutte controllate quando la tua IA mette il sito online: l'indirizzo dei moduli, co1-app.json, il controllo anti-bot e una pagina di ringraziamento.

La strada facile: costruisci la pagina da page.json con la competenza build-a-landing-page. Fa tutte e quattro le cose per te. Il resto di questa pagina è per i moduli scritti a mano.

Quando la tua IA mette il sito online, un modulo scritto a mano viene rifiutato se:

  • co1-app.json non chiede forms.submit,
  • co1-app.json non dichiara nessun modulo con quel nome,
  • un campo di inserimento del modulo non è uno dei campi del modulo,
  • manca il controllo che sia una persona.

Ogni rifiuto dice esattamente cosa sistemare, così il sito non va mai online con un modulo che non può funzionare.

L'indirizzo dei moduli

Un modulo invia all'indirizzo dei moduli del sito stesso, come percorso sul sito, mai come indirizzo web completo:

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

Qui join è il nome del modulo. Ogni modulo che arriva nella tua lista di persone invia a /api/v1/forms/<form>. Sulle pagine pubbliche, il codice del modulo può stare nella pagina o in un file .js, e un modulo di un altro servizio (uno strumento per newsletter, per esempio) può inviare a quel servizio. Sulle pagine dei membri, il codice va nei file .js, e un modulo può inviare a un altro sito solo se quel sito è elencato in co1-app.json sotto allowedHosts.form (vedi "Il tuo sito web").

Il file co1-app.json

Ogni sito con un modulo ha un file chiamato co1-app.json nella sua cartella principale. Dice cosa può fare il sito, e quali moduli e campi ha. Senza questo file, il modulo di ogni visitatore viene rifiutato, quindi il sito non va online finché il file non c'è.

{
  "v": 1,
  "id": "home",
  "kind": "static",
  "permissions": ["forms.submit"],
  "forms": {
    "join": {
      "thanks": "/thanks/",
      "fields": {
        "name": { "type": "text" },
        "email": { "type": "email", "required": true }
      }
    }
  }
}
  • id è il nome del sito, lo stesso del site di deploy_site.
  • permissions deve contenere forms.submit per qualsiasi modulo. Per vendere si aggiunge checkout.create.
  • Quanti moduli può avere un sito, e quanti campi un modulo, viene con il tuo piano. Se un sito li supera, la risposta dice il numero del tuo piano. Ti serve di più? Scrivi a hello@companyofone.eu e alziamo il limite.
  • Il nome di un modulo usa lettere minuscole, cifre e -.
  • Ogni modulo ha almeno 1 campo.

Campi

  • Ogni campo di inserimento del modulo deve essere un campo dichiarato in co1-app.json, con lo stesso nome. I nomi dei campi usano lettere minuscole, cifre e _.
  • Ogni modulo ha bisogno di un campo di tipo email, così si può rispondere alla persona.
  • Tipi di campo: text, long_text, email, phone, number, choice (con le sue options), consent e date.
  • Un campo può essere required, e può fissare la sua lunghezza max (fino a 5.000). Senza, text contiene fino a 300 caratteri e long_text fino a 2.000.
  • Puoi anche mandare utm_source, utm_medium, utm_campaign, utm_content e source senza dichiararli, per vedere da dove arrivano le persone.

Il controllo anti-bot

Moduli, iscrizioni e prenotazioni controllano che a inviarli sia stata una persona vera: è il controllo della persona. Un modulo senza il controllo viene rifiutato quando il sito va online. Metti il widget dentro il modulo, con la vera chiave del tuo sito in data-sitekey, e carica lo script del controllo una volta nella pagina. deploy_site con read: true dà la chiave come turnstile_site_key, e la dà anche un rifiuto per un controllo mancante:

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

Solo se davvero non vuoi il controllo, imposta "turnstile": false in co1-app.json.

La pagina di ringraziamento

Dai a ogni modulo una pagina "thanks" in co1-app.json, come /thanks/, e crea quella pagina. Dopo aver inviato il modulo, il visitatore arriva lì. Se qualcosa va storto, vede una pagina semplice che dice cosa è successo, con un link per tornare indietro. Mai codice grezzo.

Campi che un sito non chiede mai

  • Niente campi per password, carta, banca o codici monouso. I membri accedono con un codice mandato per email, e i pagamenti passano dal checkout.
  • Un campo per la newsletter è una casella visibile, non spuntata, che il visitatore spunta da solo. Il codice non la spunta mai. Dopo un sì arriva un'email per confermarlo, e solo dopo quel clic la persona è nella lista.

Provare un modulo, e cosa vedi

  • In un'anteprima non si conserva niente di quello che invia un visitatore. La pagina dice "Preview · nothing you send here is saved". Prova il modulo quando il sito è online.
  • Ogni modulo inviato arriva nella tua lista di persone. Le sue risposte, come una data, sono una nota sulla scheda della persona. Non puoi ancora ordinare le persone in base a quelle.
  • Ogni persona della tua lista ha bisogno di un indirizzo email. Il telefono è facoltativo.
  • People, Needs you mostra chi aspetta ancora la tua risposta.