Aller au contenu principal
Formulaires

Intégrer un formulaire HTML dans un funnel et s'assurer que les soumissions remontent

Vous avez généré un code HTML de formulaire (avec CrocoVibe, une IA externe, ou en le récupérant ailleurs) et vous voulez l'intégrer dans votre…

Écrit par Baptiste Lorreyte

Dernière mise à jour Il y a environ 1 heure

Vous avez généré un code HTML de formulaire (avec CrocoVibe, une IA externe, ou en le récupérant ailleurs) et vous voulez l'intégrer dans votre funnel. Deux problèmes reviennent souvent : le collage échoue dans le bloc de code, ou le formulaire fonctionne visuellement mais vous ne savez pas si les soumissions remontent dans vos statistiques et votre CRM.

Le piège à éviter : imbriquer un formulaire HTML dans un formulaire CrocoClick

N'insérez jamais le code HTML d'un formulaire à l'intérieur d'un formulaire CrocoClick natif déjà présent sur la page. L’imbrication d’éléments form est invalide en HTML. Le navigateur peut réorganiser le code, associer les champs au mauvais formulaire ou rendre l’envoi imprévisible : l’apparence ne prouve pas la remontée CRM.

⚠️ Remarque : Si vous avez déjà un formulaire CrocoClick sur la page, n'ajoutez pas de code HTML par-dessus. Choisissez l'une des trois méthodes ci-dessous, sans les mélanger.

Trois méthodes propres pour intégrer votre formulaire

1. Créer le formulaire nativement (recommandé)

Recréez votre formulaire directement avec le constructeur de formulaires de CrocoClick : ajoutez l'élément « Formulaire » sur votre page de funnel, puis composez les champs dont vous avez besoin (nom, email, téléphone, champs personnalisés...).

Avec un formulaire natif, sélectionnez le bon formulaire dans l’élément de page, vérifiez les champs et configurez les actions du workflow. Effectuez une soumission de démonstration pour contrôler la fiche créée et l’événement reçu.

2. Passer par CrocoVibe

Si vous utilisez CrocoVibe, demandez un formulaire relié à votre compte, puis identifiez le composant réellement créé. S’il s’agit d’un formulaire natif, vérifiez son identifiant dans le constructeur. S’il s’agit de HTML externe, appliquez le parcours de suivi externe ou l’intégration prévue. Une apparence correcte ne prouve pas la connexion au CRM.

3. Coller le HTML dans un bloc de code personnalisé

Si vous tenez à conserver votre code HTML tel quel (par exemple un design très spécifique généré par une IA externe) :

  1. Ajoutez un élément « code personnalisé » à votre page de funnel.

  2. Collez-y votre code HTML de formulaire, sans l'imbriquer dans un formulaire CrocoClick existant.

  3. Publiez la page.

💡 ASTUCE : Si le collage échoue dans le bloc de code, videz d'abord le champ, collez le code en texte brut (sans mise en forme), et relevez tout message précis de validation ou de taille renvoyé par le bloc.

Configurer le Suivi Externe pour un formulaire externe

Pour un formulaire HTML externe, vérifiez l’installation du script et les réglages du domaine. Dans la nouvelle expérience de Suivi Externe, activez la collecte des soumissions du domaine, puis Track pour le formulaire. Contrôlez les correspondances des champs avant un nouvel essai. Les statistiques et la création de contacts ont des réglages distincts.

Cas d’un formulaire dans une iframe

Les iframes compatibles peuvent être suivies avec deux scripts : l’un sur la page qui héberge le formulaire, l’autre sur la page parente. L’origine autorisée doit correspondre exactement, notamment pour HTTPS et www. Il faut pouvoir modifier les deux pages. Les soumissions uniquement pilotées par JavaScript et certaines iframes imbriquées ne sont pas prises en charge.

Ces options nécessitent la nouvelle expérience proposée dans Labs. Utilisez les scripts fournis par votre compte ; si elle est absente, faites confirmer la méthode disponible avant de promettre la remontée CRM.

Vérifier que les soumissions remontent bien

  1. Publiez la page et effectuez vous-même une soumission test du formulaire.

  2. Vérifiez qu'un contact a bien été créé (ou mis à jour) dans le CRM avec les données saisies.

  3. Consultez les statistiques de suivi externe pour confirmer que la soumission a été captée.

Questions fréquentes

Le blocage vient le plus souvent d'un collage avec mise en forme. Videz le champ, collez le code en texte brut, et relevez tout message précis de validation ou de taille renvoyé par le bloc de code.

Choisissez un formulaire natif relié au compte, ou un formulaire HTML dont l’intégration est explicitement configurée. Si CrocoVibe produit le formulaire, vérifiez lequel de ces parcours il utilise avant de poursuivre.

Ne vous fiez pas à ce montage : l’imbrication de formulaires est invalide et peut perturber l’envoi et le suivi, même sans deux boutons visibles. N'imbriquez jamais les deux : choisissez une seule des trois méthodes propres décrites plus haut.

Contrôlez le type de formulaire, la collecte du domaine, le suivi du formulaire et son mappage. Pour une iframe, vérifiez aussi les deux scripts et l’origine de la page parente. Rejouez une soumission après chaque correction.

Vérifier l’événement utilisé par le workflow

Une entrée dans les statistiques de suivi externe ne prouve pas qu’un déclencheur natif « Formulaire soumis » a démarré. Ouvrez le journal du workflow et vérifiez l’événement réellement reçu. Configurez les actions suivantes à partir du type de soumission correspondant à votre intégration.

Avant une soumission de démonstration, utilisez vos propres coordonnées d’essai et contrôlez les workflows ou notifications associés : un test de formulaire peut envoyer un vrai message. Le suivi externe classique attend des champs accessibles avec un attribut name ; la prise en charge iframe décrite ici nécessite les scripts et prérequis de la nouvelle expérience Labs. Le suivi d’une soumission ne remplace pas le système qui reçoit et traite votre formulaire externe.

Cela a-t-il été utile ?

Besoin d'aide supplémentaire ? Demander à l'équipe