Dépasser les formulaires intégrés

Dépasser les formulaires intégrés8 min de lecture

Limite de soumissions des formulaires Webflow : ce que c'est et comment la dépasser

L'offre gratuite Starter de Webflow cesse de collecter après 50 soumissions de formulaire par site et les sites exportés n'en reçoivent aucune, alors faites plutôt pointer le Form Block vers Ikiform.

Preet SutharFondateur, Ikiform

Avec l'offre de site gratuite Starter, Webflow collecte 50 soumissions de formulaire par site au total, le compteur ne se réinitialise pas, et les nouvelles soumissions ne sont plus collectées ensuite. Les offres de site payantes affichent des soumissions illimitées, et les sites exportés vers un autre hébergeur n'ont aucune gestion de formulaires. Définissez une action personnalisée sur le Form Block pour que le formulaire envoie vers Ikiform, ce qui fonctionne sur Starter, sur les offres payantes et dans le code exporté.

Ce qui change sur Webflow

La limite de Webflow est plus étroite qu'avant. En octobre 2026, sa page de tarifs indique 50 soumissions de formulaire sur l'offre de site gratuite Starter et des soumissions illimitées sur toutes les offres de site payantes, à partir de Basic. Le centre d'aide de Webflow précise que le compteur Starter est un total qui ne se réinitialise pas. Les anciens articles qui citent des plafonds mensuels pour les offres payantes décrivent une tarification qui a changé depuis.

Alors, qui bute vraiment sur la limite ? Trois groupes :

  • Les sites qui restent sur Starter. Un site personnel, un projet annexe ou une page d'événement publiés sur webflow.io sans offre de site. Cinquante soumissions partent vite dès qu'un bot trouve le formulaire.
  • Les agences qui construisent sur le staging. Chaque soumission de test pendant la construction compte dans les mêmes 50, avant même que le client ait payé l'hébergement.
  • Les sites exportés. L'export de code de Webflow vous donne le HTML, mais les formulaires d'un site hébergé ailleurs ne sont pas du tout traités par Webflow. Le formulaire n'envoie nulle part d'utile.

Si votre site est sur une offre payante et que la boîte de réception et les notifications de Webflow vous conviennent, vous n'avez pas besoin de migrer. Les personnes sur une offre payante migrent pour d'autres raisons : un seul endroit pour les formulaires de plusieurs sites, des webhooks signés vers leurs propres outils, un filtrage du spam qu'elles peuvent ajuster, ou un formulaire qui survit à un départ de Webflow.

Trois situations Webflow et que faire dans chacuneSite Startersur webflow.io, sans offrede site50 au totalsans réinitialisation,puis plus collectéesactionpersonnaliséedéfinie dans le FormBlockoffre de sitepayanteBasic ou supérieureillimitéesindiqué sur la page detarifsrester, ou migrerpour lesfonctionnalitéscode exportéhébergé ailleursaucune gestion deformulairesWebflow ne voit jamaisl'envoimodifier l'actiondans le HTML exportéTrois situations Webflow et que faire dans chacuneSite Startersur webflow.io, sans offre desite50 au totalsans réinitialisation, puis pluscollectéesaction personnaliséedéfinie dans le Form Blockoffre de site payanteBasic ou supérieureillimitéesindiqué sur la page de tarifsrester, ou migrer pour lesfonctionnalitéscode exportéhébergé ailleursaucune gestion deformulairesWebflow ne voit jamais l'envoimodifier l'actiondans le HTML exporté
  1. Un site Starter sur webflow.io collecte 50 soumissions au total, sans réinitialisation, puis cesse de collecter. Définissez une action personnalisée sur le Form Block.
  2. Un site sur une offre de site payante a des soumissions illimitées. Restez sur les formulaires de Webflow, ou migrez seulement si vous avez besoin de fonctionnalités que Webflow n'a pas.
  3. Un site exporté et hébergé ailleurs n'a aucune gestion de formulaires de la part de Webflow. Modifiez l'action du formulaire dans le HTML exporté.
Seules la première et la dernière ligne sont des limites. La ligne du milieu est un choix de fonctionnalités, pas un plafond.

Définir l'action personnalisée dans le Designer

Une action personnalisée fait envoyer le navigateur du visiteur directement à l'URL que vous indiquez. Webflow ne traite pas l'envoi, donc ce n'est pas une soumission de formulaire Webflow. Le paramètre du Form Block est disponible sur Starter ; vous n'avez pas besoin de code personnalisé pour cette partie.

  1. Créez un formulaire dans le tableau de bord Ikiform et copiez son endpoint.
  2. Dans le Designer, sélectionnez l'élément de formulaire à l'intérieur du Form Block, pas le bloc lui-même, et ouvrez Settings.
  3. Sous Send to, retirez les destinations propres à Webflow, choisissez une action personnalisée, collez l'endpoint dans Action et réglez Method sur POST.
  4. Sélectionnez chaque input et réglez son Name sur un identifiant en minuscules : name, email, company, message. Webflow remplit les noms à partir des libellés, ce qui vous donnerait Name et Field 2 dans Ikiform.
  5. Retirez tout élément reCAPTCHA du formulaire. Ikiform ne le vérifie pas, et son jeton arriverait comme champ supplémentaire.
  6. Ajoutez un Input de plus nommé _gotcha, masquez-le avec Display: none, et ajoutez les attributs personnalisés tabindex = -1 et autocomplete = off. C'est le honeypot.
  7. Publiez sur your-site.webflow.io. Les actions personnalisées ne fonctionnent pas dans le canevas du Designer.
Action
https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Ce que voient les visiteurs après l'envoi

Les blocs de succès et d'erreur de Webflow n'apparaissent que lorsque Webflow traite l'envoi. Avec une action personnalisée, le navigateur suit plutôt la réponse d'Ikiform. Choisissez l'une de ces options :

OptionOffreCe que voient les visiteurs
Ne rien faireToutesLa page de remerciement hébergée par Ikiform, avec un lien vers votre site. Bien pour tester, sobre pour un site en production
Redirect after submitToutesVotre propre page de remerciement Webflow. Créez une page, publiez-la et collez son URL complète dans les paramètres du formulaire Ikiform
Un script fetchOffre de site payanteLes blocs de succès et d'erreur propres à Webflow, remplis par un court script. Le code personnalisé nécessite une offre de site payante ou une offre Workspace

Sur Starter, la redirection est le bon choix : elle ne demande aucun code et ressemble au reste de votre site. Le script pour les offres payantes se trouve dans la documentation Webflow. Il envoie avec fetch, donc il ne peut pas afficher la vérification humaine d'Ikiform ; laissez le Spam check désactivé si vous l'utilisez.

Sites Webflow exportés

Quand vous exportez le code et l'hébergez sur Netlify, Vercel, Cloudflare Pages ou votre propre serveur, le balisage du formulaire suit, mais pas la gestion des formulaires de Webflow. Ouvrez le fichier HTML exporté qui contient le formulaire, définissez action et method, renommez les inputs, et ajoutez une redirection et le honeypot :

contact.html
<form id="wf-form-Contact" name="wf-form-Contact" data-name="Contact"
  method="post" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" class="contact-form">
  <label for="name">Name</label>
  <input class="w-input" maxlength="256" name="name" id="name" type="text" required>
  <label for="email">Email</label>
  <input class="w-input" maxlength="256" name="email" id="email" type="email" required>
  <label for="company">Company</label>
  <input class="w-input" maxlength="256" name="company" id="company" type="text">
  <label for="message">Message</label>
  <textarea class="w-input" maxlength="5000" name="message" id="message" required></textarea>
  <input type="hidden" name="_redirect" value="https://studio.example/thanks">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <input type="submit" class="w-button" value="Send">
</form>
  • Gardez les classes w-input et w-button pour que le CSS exporté continue de styliser le formulaire.
  • _redirect envoie le navigateur vers votre page de remerciement après un envoi réussi. Cela ne fonctionne que pour une URL https: sur l'un des Allowed domains du formulaire.
  • Faites aussi le changement dans le Designer, sous forme d'action personnalisée, pour que le prochain export ne l'écrase pas avec la valeur par défaut de Webflow.
  • Envoyez une fois depuis l'hébergeur et surveillez le panneau réseau du navigateur. L'envoi doit aller vers https://ikiform.com/f/ et répondre 303 avec une redirection, pas vers une adresse Webflow.
Si vous hébergez l'export sur Netlify, n'ajoutez pas data-netlify au même formulaire. Un formulaire n'envoie qu'à son action, donc Netlify listerait dans son onglet Forms un formulaire qui ne reçoit jamais rien.

Domaines autorisés pour Webflow

Ajoutez your-site.webflow.io et votre domaine personnalisé sous les Allowed domains du formulaire. Les sous-domaines d'un domaine listé correspondent déjà, donc example.com couvre www.example.com. N'ajoutez pas webflow.io seul : cela permettrait à tous les sites Webflow d'envoyer vers votre formulaire. Pour un site exporté, ajoutez le domaine sur lequel il est hébergé.

Le champ d'envoi de fichiers de Webflow, que sa page de tarifs indique sur Premium, n'a pas d'équivalent dans Ikiform. L'envoi de fichiers n'est pas encore pris en charge. Un envoi avec un fichier reçoit 422 files_not_supported. Retirez le champ d'envoi du formulaire, ou gardez ce formulaire-là sur Webflow.

Vérifier que tout fonctionne sur Webflow

  1. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
  2. Publiez sur webflow.io et envoyez le formulaire depuis la page publiée, pas depuis le Designer.
  3. Vérifiez que vous arrivez sur votre page de remerciement, ou que vous voyez le bloc de succès de Webflow si vous avez ajouté le script.
  4. Ouvrez Submissions dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.
  5. Lisez les noms de champs. Ce doivent être name, email, company et message, sans Field 2 ni honeypot.
  6. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et Reply répond à l'expéditeur quand le formulaire a un champ email.
  7. Ouvrez les soumissions de formulaire Webflow du site et vérifiez que le test n'y figure pas. Webflow ne le compte plus.

Pièges

ProblèmeQue faire
Une réponse 404 not_found après l'envoiMethod est sur GET. Réglez-le sur POST et republiez.
La page de remerciement d'Ikiform au lieu de la vôtreRéglez Redirect after submit sur l'URL complète de votre page Webflow, et ajoutez son domaine à Allowed domains.
Les soumissions apparaissent toujours dans WebflowVous avez modifié un autre formulaire, ou vous n'avez pas publié. Chaque Form Block a son propre paramètre Send to ; vérifiez chaque page qui contient un formulaire.
422 validation_failed avec un champ inconnu comme Email ou g-recaptcha-responseUn nom d'input ne correspond pas à vos identifiants de champs, ou un élément reCAPTCHA est encore dans le formulaire. Renommez-le ou retirez-le.
403 origin_not_allowed, ou tous les envois finissent en spamLe domaine de la page n'est pas dans les Allowed domains du formulaire. Ajoutez-le, plus localhost pour les tests en local. Les sous-domaines d'un domaine listé sont autorisés.
422 files_not_supportedLe formulaire a un <input type="file"> avec un fichier choisi. L'envoi de fichiers n'est pas encore pris en charge ; retirez l'input ou demandez plutôt un lien.

Questions

Une étape vous bloque, ou vous voulez un guide pour votre cas ? Écrivez à hello@ikiform.com.