Se connecterCréer un compte gratuit

Langue

Se connecterCréer un compte gratuit
Menu de la documentation

Webflow : vos formulaires

Faites entrer dans Mailcheer les personnes qui remplissent un formulaire de votre site Webflow : webhook à chaque envoi, essai, choix du champ e-mail.

Chaque fois qu'un visiteur envoie un formulaire de votre site, Webflow peut transmettre ce qu'il a saisi à une adresse web : c'est un webhook. Donnez-lui votre adresse de réception Mailcheer, et la personne arrive dans vos contacts, sans export ni import.

Avant de commencer

  • Une adresse de réception Mailcheer. Dans Mailcheer, ouvrez Intégrations → Faire entrer des contacts et cliquez sur « Créer une adresse de réception ». Mailcheer vous donne une adresse de la forme https://mailcheer.com/api/in/<jeton>. C'est un secret : ne la publiez nulle part, car quiconque la connaît peut y envoyer des données.
  • Un site hébergé par Webflow. Si vous avez exporté votre site pour l'héberger ailleurs, Webflow ne traite pas les envois de ses formulaires.
  • Des noms de champs clairs. Chaque champ du formulaire a un réglage « Name », qui l'identifie dans les envois : Webflow se sert de ces noms dans ce qu'il transmet. Donnez un nom unique à chaque champ, par exemple Email pour l'adresse.
  • Un champ prévu pour l'adresse e-mail. Dans ses réglages, choisissez le type e-mail dans « Text type ».

Un mot sur le consentement

N'y faites entrer que des personnes qui ont accepté de recevoir vos e-mails : dites-le clairement à côté du formulaire. Le double opt-in (un e-mail de confirmation) est activé par défaut dans Mailcheer.

1. Créez le webhook dans Webflow

Le webhook se règle formulaire par formulaire, dans les réglages du formulaire :

  1. Sélectionnez votre formulaire sur le canevas (« canvas ») ou dans le « Navigator ».
  2. Ouvrez le panneau « Settings », à droite.
  3. Cliquez sur l'icône d'ajout (« add ») à côté de « Send to », puis choisissez « Webhook ».
  4. Collez votre adresse de réception Mailcheer comme adresse du webhook.
  5. Cliquez sur « Save ».
  6. Webflow affiche alors une clé secrète (« Secret key »), une seule fois : elle sert à authentifier les messages de Webflow. Copiez-la et rangez-la en lieu sûr, comme Webflow le demande, puis cliquez sur « Hide key forever ».

Un formulaire peut avoir plusieurs destinations : le webhook s'ajoute à celles qui existent déjà, comme l'enregistrement des envois dans Webflow ou les notifications par e-mail.

Autre chemin : les réglages du site

Webflow permet aussi de créer le webhook depuis les réglages du site. Choisissez l'un des deux chemins.

  1. Ouvrez « Site settings » → « Apps & integrations » → « Webhooks ».
  2. Cliquez sur « Add webhook ».
  3. Choisissez le type de déclencheur « Form submission ».
  4. Choisissez la version d'API (« v1 » ou « v2 »).
  5. Collez votre adresse de réception Mailcheer comme adresse du webhook.

2. Envoyez un essai

Pour l'essai, remplissez vous-même le formulaire sur le site en ligne :

  1. Publiez votre site avec le bouton « Publish ».
  2. Ouvrez la page du formulaire sur le site publié.
  3. Remplissez le formulaire avec votre propre adresse e-mail, puis envoyez-le.

Mailcheer répond tout de suite et traite l'envoi ensuite.

3. Choisissez les champs dans Mailcheer

Revenez sur votre adresse de réception dans Mailcheer : elle affiche ce qu'elle a reçu, avec la liste des champs trouvés.

Webflow range ce que le visiteur a saisi dans un objet data, dont les clés sont les noms de vos champs (le réglage « Name »). Dans le format décrit par la documentation développeur de Webflow, cet objet se trouve dans payload (payload.data) ; dans le format « v1 », data est à la racine de l'envoi. Repérez le champ qui contient l'adresse.

Choisissez ensuite, en cliquant :

  • le champ qui contient l'e-mail (obligatoire) ;
  • le prénom et le nom, si vous le souhaitez ;
  • les étiquettes : fixes (par exemple site-webflow) ou tirées d'un champ ;
  • le double opt-in, activé par défaut ;
  • l'automatisation à déclencher, si vous en avez une.

Pour importer les personnes que vous aviez déjà, passez par un fichier : voir Importer vos contacts.

Si ça ne marche pas

  • L'adresse est incomplète. Comparez l'adresse du webhook avec l'adresse de réception affichée dans Mailcheer : elle doit être copiée en entier, sans espace ni caractère en trop.
  • Le formulaire ne s'envoie pas. Si vous avez activé reCAPTCHA (« Site settings » → « Apps & Integrations »), chaque formulaire du site doit contenir un élément reCAPTCHA : sans lui, l'envoi échoue.
  • Les envois se sont arrêtés. Sur l'offre gratuite Starter, Webflow limite le site à 50 envois de formulaire au total. Au-delà, il faut passer à une offre payante.
  • Webflow a désactivé le webhook. Quand ses envois échouent de façon répétée, Webflow désactive le webhook et vous prévient par e-mail. Pour le réactiver, sa documentation renvoie vers le support de Webflow.

Sources