Le fichier formspree.json

Le fichier formspree.json vous permet de créer et de configurer des formulaires pour un site web. Par exemple, vous pouvez créer des formulaires d’inscription à une liste Mailchimp, ou des formulaires de contact qui vous envoient un e-mail lors de chaque soumission. Le fichier formspree.json est utilisé par le CLI Formspree lors du déploiement de vos formulaires sur les serveurs Formspree.

Configuration des formulaires

Les formulaires acceptent les paramètres de configuration suivants :

Propriété	Type	Par défaut	Description
name	String		Le nom du formulaire (requis)
actions	Array	[]	Un tableau d’actions à effectuer après la soumission
fields	Object	{}	Métadonnées optionnelles sur les champs du formulaire
captcha	Object	{}	Paramètres optionnels du captcha

L’objet Captcha doit respecter ce format :

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

Exemple — voici un exemple de fichier 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" }
      ]
    }
  }
}

Actions post-soumission

Les formulaires acceptent un tableau d’actions à effectuer après la soumission. Nous proposons quelques actions intégrées ainsi qu’une liste croissante d’intégrations avec d’autres applications :

App	Type	Description
	email	Envoie un e-mail de notification. En savoir plus
	autoresponse	Envoie une réponse automatique à l’expéditeur. En savoir plus
	webhook	Envoie un webhook à une URL donnée. En savoir plus
mailchimp	addOrUpdateContact	Crée des abonnés dans Mailchimp. En savoir plus
mailerlite	addSubscriber	Ajoute des abonnés à MailerLite. En savoir plus
convertkit	applyTags	Crée des abonnés et applique des tags dans ConvertKit. En savoir plus
hubspot	createContact	Crée des contacts dans HubSpot. En savoir plus
freshdesk	createSupportTicket	Crée des tickets dans Freshdesk. En savoir plus
zendesk	createSupportTicket	Crée des tickets dans Zendesk. En savoir plus
airtable	sendToTable	Ajoute des lignes dans Airtable. En savoir plus
trello	createCard	Crée des cartes dans Trello. En savoir plus
discord	sendMessage	Envoie des messages sur Discord. En savoir plus
gorgias	createSupportTicket	Crée des tickets dans Gorgias. En savoir plus

Voici un exemple de fichier formspree.json avec une action Mailchimp :

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

Règles de champs

Vous pouvez éventuellement configurer quels champs sont autorisés, leur type et diverses règles de validation.

Remarque : par défaut, Formspree accepte tous les champs que vous transmettez depuis le côté client. Cependant, définir vos champs ici vous permet d’ajouter des validations (comme marquer un champ comme requis) et de leur donner des noms lisibles.

Les objets de champ peuvent contenir les propriétés suivantes :

Clé	Type	Description
required	Boolean	Indique si le champ est requis
type	String	Le type du champ. L’un de : text, email, numeric, datetime-local, url ou file.
min	Number ou String	Spécifie la valeur minimale. Utilisable avec les types numeric, datetime-local ou file. Le type de champ doit être spécifié, sinon cette règle ne sera pas appliquée.
max	Number ou String	Spécifie la valeur maximale. Utilisable avec les types numeric, datetime-local ou file. Le type de champ doit être spécifié, sinon cette règle ne sera pas appliquée.
minlength	Number	Spécifie la longueur minimale. Utilisable avec les types text, url ou email. Le type de champ doit être spécifié, sinon cette règle ne sera pas appliquée.
maxlength	Number	Spécifie la longueur maximale. Utilisable avec les types text, url ou email. Le type de champ doit être spécifié, sinon cette règle ne sera pas appliquée.
accept	Liste de strings	Spécifie les types de contenu de fichier valides. La valeur doit être une liste de chaînes avec des types MIME valides. Le type de champ doit être file, sinon cette règle ne sera pas appliquée.

Remarques :
Le type datetime-local accepte les formats ISO. Le format par défaut est yyyy-mm-dd hh:mm:ss. Ce type accepte également les dates seules, par exemple yyyy-mm-dd. Pour plus d’informations, consultez cette page.

Les valeurs min et max pour les types file correspondent aux tailles minimale et maximale du fichier en Mio.

Exemple

{
  "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 */
        }
      }
    }
  }
}