Il file formspree.json

Il file formspree.json è dove puoi creare e configurare i moduli per un sito web. Ad esempio, puoi creare moduli di iscrizione per una lista Mailchimp, o moduli di contatto che ti inviano un’email quando vengono inviati. Il file formspree.json viene usato dalla Formspree CLI durante il deployment dei tuoi moduli sui server di Formspree.

Configurazione del modulo

I moduli accettano i seguenti parametri di configurazione:

Proprietà	Tipo	Predefinito	Descrizione
name	String		Il nome del modulo (obbligatorio)
actions	Array	[]	Un Array di azioni da eseguire dopo l’invio
fields	Object	{}	Metadati opzionali sui campi del modulo
captcha	Object	{}	Impostazioni captcha opzionali.

L’oggetto Captcha dovrebbe seguire questo formato:

"captcha": {
    "type": "recaptcha",                  // Required
    "recaptchaSecret": "my-secret"        // Optional
}

Esempio Ecco un esempio di file formspree.json:

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "captcha": {
        "type": "recaptcha",
        "recaptchaSecret": "my-secret"
      },
      "fields": {
        "email": { "type": "email", "required": true },
        "message": { "type": "text", "required": true }
      },
      "actions": [
        { "type": "email", "to": "john@example.com" }
      ]
    }
  }
}

Azioni post-invio

I moduli accettano un array di azioni da eseguire dopo l’invio. Abbiamo alcune azioni integrate e un elenco crescente di integrazioni con altre app:

App	Tipo	Descrizione
	email	Invia un’email di notifica. Leggi di più
	autoresponse	Invia una risposta a chi ha effettuato l’invio. Leggi di più
	webhook	Invia un webhook a un determinato url. Leggi di più
mailchimp	addOrUpdateContact	Crea abbonati in Mailchimp. Leggi di più
mailerlite	addSubscriber	Aggiungi abbonati a MailerLite. Leggi di più
convertkit	applyTags	Crea abbonati e applica tag in ConvertKit. Leggi di più
hubspot	createContact	Crea contatti in Hubspot. Leggi di più
freshdesk	createSupportTicket	Crea ticket in Freshdesk. Leggi di più
zendesk	createSupportTicket	Crea ticket in Zendesk. Leggi di più
airtable	sendToTable	Aggiungi righe in Airtable. Leggi di più
trello	createCard	Crea schede in Trello. Leggi di più
discord	sendMessage	Invia messaggi a Discord. Leggi di più
gorgias	createSupportTicket	Crea ticket in Gorgias. Leggi di più

Ecco un esempio di file formspree.json con un’azione Mailchimp:

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "actions": [
        {
          "app": "mailchimp",
          "type": "addOrUpdateContact",
          "audience": "8djs8fg8d",
          "apiKey": "$MAILCHIMP_APIKEY"
        }
      ]
    }
  }
}

Regole dei campi

Puoi facoltativamente configurare quali campi sono consentiti, il tipo che dovrebbero avere e varie regole di validazione per essi.

Nota: Per impostazione predefinita, Formspree accetterà qualsiasi campo tu passi dal lato client. Tuttavia, definire qui i tuoi campi ti consente di aggiungere validazioni (come contrassegnare un campo come obbligatorio) e dare loro nomi facili da comprendere.

Gli oggetti campo possono contenere le seguenti proprietà:

Chiave	Tipo	Descrizione
required	Boolean	Specifica se il campo è obbligatorio
type	String	Il tipo del campo. Uno tra text, email, numeric, datetime-local, url o file.
min	Number or String	Specifica il valore minimo. Può essere usato con i tipi numeric, datetime-local o file. Tieni presente che dovresti specificare il tipo del campo, altrimenti questa regola non verrà applicata.
max	Number or String	Specifica il valore massimo. Può essere usato con i tipi numeric, datetime-local o file. Tieni presente che dovresti specificare il tipo del campo, altrimenti questa regola non verrà applicata.
minlength	Number	Specifica il valore minimo. Può essere usato con i tipi text, url o email. Tieni presente che dovresti specificare il tipo del campo, altrimenti questa regola non verrà applicata.
maxlength	Number	Specifica il valore massimo. Può essere usato con i tipi text, url o email. Tieni presente che dovresti specificare il tipo del campo, altrimenti questa regola non verrà applicata.
accept	String list	Specifica i tipi di contenuto file validi. Il valore dovrebbe essere un elenco di stringhe con tipi MIME validi. Tieni presente che dovresti impostare la chiave type come file, altrimenti questa regola non verrà applicata.

**Note:
**Il tipo datetime-local accetta formati ISO. Il formato predefinito è yyyy-mm-dd hh:mm:ss. Questo tipo accetta anche solo date, ad esempio yyyy-mm-dd. Per maggiori informazioni, consulta questo.

I valori min e max per i tipi file sono le dimensioni minima e massima del file in MiB.

Esempio

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "fields": {
        "email": {
          "type": "email",
          "required": true
        },
        "birthdate": {
          "type": "datetime",
          "required": true,
          "min": "2002-09-21 13:13:00"        /* also accept dates */
        },
        "document": {
          "type": "file",
          "contentType": ["application/pdf"],  /* please use valid MIME Types */
          "min": 10                            /* MiB */
        }
      }
    }
  }
}