Aller au contenu principal
Formulaires

Intégrer un formulaire CrocoClick sur un site externe (Squarespace, Wix, Shopify, WordPress, Duda)

Comment intégrer vos formulaires CrocoClick sur Squarespace, Wix, Shopify, WordPress et Duda en quelques minutes.

Écrit par Baptiste Lorreyte

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

Vos formulaires CrocoClick ne sont pas réservés aux funnels et sites construits dans CrocoClick. Vous pouvez les intégrer directement sur un site externe qui autorise les iframes et scripts nécessaires (Squarespace, Wix, Shopify, WordPress, Duda) en quelques clics, et continuer à capter vos leads dans votre CRM CrocoClick comme si le formulaire vivait à l'intérieur de la plateforme.

Cet article vous guide étape par étape pour récupérer le code d'intégration et le coller au bon endroit sur les principaux constructeurs de sites.

Sommaire

  • Ce que veut dire "intégrer" un formulaire CrocoClick
  • Pourquoi intégrer un formulaire CrocoClick sur un site externe
  • Récupérer le code d'intégration dans CrocoClick
  • Intégrer le formulaire sur Squarespace
  • Intégrer le formulaire sur Wix
  • Intégrer le formulaire sur Shopify
  • Intégrer le formulaire sur WordPress
  • Intégrer le formulaire sur Duda
  • Vérifier que tout fonctionne
  • Questions fréquentes

Ce que veut dire "intégrer" un formulaire CrocoClick

Intégrer (ou "embed") un formulaire CrocoClick, c'est l'afficher directement sur votre site externe via un petit bout de code, sans rediriger vos visiteurs ailleurs. Le visiteur reste sur votre site, remplit le formulaire dans votre univers visuel, et la réponse arrive automatiquement dans votre CRM CrocoClick.

Concrètement : vous copiez un code d'intégration depuis CrocoClick, vous le collez dans l'éditeur de votre site externe, et le formulaire apparaît. Pas besoin de jongler entre plusieurs plateformes ou de retoucher quoi que ce soit côté code.

Pourquoi intégrer un formulaire CrocoClick sur un site externe

Quelques bénéfices concrets :

  • Capter plus de leads : vos visiteurs n'ont pas à quitter votre site pour vous laisser leurs coordonnées.
  • Compatibilité large : Squarespace, Wix, Shopify, WordPress, Duda. Si votre site n'est pas hébergé sur CrocoClick, vous gardez quand même la puissance des formulaires CrocoClick.
  • Synchronisation CRM automatique : chaque soumission tombe dans le CRM CrocoClick, prête pour vos automatisations, vos relances et vos tags.
  • Personnalisation totale : design, champs, logique conditionnelle, valeurs par défaut, tout se gère dans CrocoClick.
  • Suivi des performances : les statistiques de vos formulaires (vues, soumissions, taux de conversion) restent centralisées dans CrocoClick.

💡 ASTUCE : Pour un sondage ou un élément de paiement, utilisez son propre code d’intégration disponible et ses prérequis : ne déduisez pas une procédure identique de ce guide de formulaires.

Récupérer le code d'intégration dans CrocoClick

1. Ouvrir le constructeur de formulaires

Depuis votre tableau de bord, allez dans Sites dans le menu de gauche, puis cliquez sur Formulaires en haut à droite. Vous arrivez sur le constructeur de formulaires.

2. Choisir un formulaire ou en créer un

Deux options :

  • Sélectionner un formulaire existant dans la liste
  • Cliquer sur + Ajouter un formulaire pour en créer un nouveau

3. Récupérer le code d'intégration

Une fois votre formulaire prêt (champs, design, logique conditionnelle), cliquez sur l'onglet Intégrer en haut à droite de l'éditeur. Choisissez le type d'intégration souhaité (formulaire intégré ou pop-up), puis cliquez sur Copier le code d'intégration.

Le code est maintenant dans votre presse-papiers, prêt à être collé sur votre site externe.

🟢 Important : Le code généré est lié à ce formulaire spécifique. Les champs et le design du formulaire enregistré peuvent être mis à jour dans le même formulaire. Les options portées par le code d’intégration (type d’affichage, déclencheur, activation ou désactivation) nécessitent de régénérer et remplacer ce code. Après tout changement, contrôlez la page publiée.

Intégrer le formulaire sur Squarespace

Pour un formulaire affiché dans la page Squarespace, utilisez un bloc Code à l’emplacement voulu et collez le code inline complet. Pour une pop-up, suivez plutôt le parcours d’injection ci-dessous. La prise en charge de JavaScript/iframes dépend des fonctions disponibles dans votre formule et votre éditeur Squarespace.

1. Accéder aux paramètres

Connectez-vous à votre site Squarespace et ouvrez le menu Paramètres depuis votre tableau de bord.

2. Aller dans Avancé

Dans Paramètres, cherchez l'option Avancé et cliquez dessus.

3. Sélectionner Injection de code

Dans les paramètres avancés, repérez l'onglet Injection de code.

4. Coller le code d'intégration

Deux possibilités selon où vous voulez afficher le formulaire :

  • Pour une pop-up sur toutes les pages du site : collez le code dans la section En-tête ou Pied de page du panneau d'injection.
  • Pour une pop-up sur une page spécifique : utilisez l’injection de code par page (Page Settings > Advanced > Page Header Code Injection).

5. Sauvegarder et publier

Cliquez sur Enregistrer dans le panneau d'injection de code, puis publiez votre site pour appliquer les changements.

⚠️ Remarque : Squarespace ne permet pas l'intégration de formulaires sur les pages de checkout (paiement). Visez les autres pages de votre site.

Intégrer le formulaire sur Wix

Wix propose un élément d’intégration HTML isolé dans une iframe. Utilisez le code inline, HTTPS, puis ajustez la taille du conteneur dans les vues bureau et mobile. Une pop-up ajoutée dans cette iframe peut rester limitée au cadre ; ne promettez pas une superposition sur toute la page.

1. Ouvrir le menu d'intégration

Dans l'éditeur Wix, cliquez sur le bouton + (Ajouter) dans la barre latérale, puis cherchez l'option Intégrer. Sélectionnez Intégrer un widget.

2. Coller le code dans l'éditeur Wix

Une fenêtre s'ouvre. Cliquez sur Code, collez le code d'intégration CrocoClick, puis cliquez sur Mettre à jour pour valider.

3. Publier votre site

Visualisez d'abord en mode aperçu pour vérifier que le formulaire s'affiche correctement. Une fois validé, cliquez sur Publier en haut à droite de l'éditeur Wix.

Intégrer le formulaire sur Shopify

Pour un formulaire inline Shopify, utilisez une section ou un bloc Liquid personnalisé disponible dans votre thème et collez le code à l’endroit voulu. Dupliquez le thème avant toute édition de code. Le parcours ci-dessous concerne une pop-up globale ; n’insérez pas le HTML visible d’un formulaire dans <head>. Les scripts du thème ne s’appliquent pas automatiquement au checkout Shopify.

1. Accéder au menu Thèmes

Connectez-vous à votre back-office Shopify et allez dans Boutique en ligne dans le menu de gauche, puis cliquez sur Thèmes. Votre thème actif apparaît en haut.

2. Ouvrir l'éditeur de code

À côté du nom de votre thème actif, cliquez sur les trois petits points (Actions), puis sélectionnez Modifier le code dans le menu déroulant.

Dans la section Layout, ouvrez le fichier theme.liquid. Pour la pop-up globale, collez le code généré à l’emplacement prévu par ses instructions, généralement avant </body>. Pour un formulaire inline, revenez à la section Liquid personnalisée de la page plutôt qu’à l’en-tête global.

Cliquez sur Enregistrer en haut à droite, puis testez votre boutique pour vérifier que le formulaire apparaît bien.

Intégrer le formulaire sur WordPress

WordPress accepte les scripts d'intégration soit via les blocs natifs, soit via un plugin.

1. Ouvrir l'éditeur de la page

Dans le tableau de bord WordPress, allez dans Pages. Survolez la page sur laquelle vous voulez intégrer le formulaire, puis cliquez sur Modifier.

2. Ouvrir le menu des blocs

Dans l'éditeur, cliquez sur l'icône + pour ouvrir la liste des blocs disponibles.

3. Sélectionner le bloc HTML personnalisé

Dans la liste, cherchez et sélectionnez le bloc HTML personnalisé.

4. Coller le code d'intégration

Collez le code d'intégration CrocoClick dans le bloc. Vous pouvez prévisualiser le rendu directement depuis le bloc en cliquant sur Aperçu.

5. Mettre à jour et tester

Cliquez sur Mettre à jour en haut à droite, puis ouvrez votre page côté visiteur pour vérifier que le formulaire s'affiche correctement.

💡 ASTUCE : Si vous voulez afficher le formulaire en pop-up sur toutes les pages, utilisez un mécanisme d’injection de scripts géré et sauvegardé. WordPress ou l’hébergeur peut filtrer les balises script/iframe : vérifiez le code conservé après enregistrement plutôt que l’aperçu seul.

Intégrer le formulaire sur Duda

Duda propose un widget HTML natif pour ajouter du code personnalisé.

1. Ajouter un widget HTML

Ouvrez l'éditeur Duda et allez sur la page où vous voulez intégrer le formulaire. Dans la barre latérale, sélectionnez Widgets > Widget HTML et glissez-le sur la page à l'endroit voulu.

2. Coller le code d'intégration

Cliquez sur le widget HTML, puis collez le code d'intégration CrocoClick dans la zone prévue. Ajustez la position du widget si besoin.

Cliquez sur Enregistrer, puis publiez votre site Duda pour appliquer les changements.

Vérifier que tout fonctionne

Une fois le code intégré et le site publié, faites systématiquement ces 3 vérifications :

  1. Ouvrir votre site dans une nouvelle fenêtre de navigateur (ou en navigation privée) et vérifier que le formulaire s'affiche correctement à l'endroit prévu.
  2. Remplir le formulaire avec des données de test et le soumettre.
  3. Aller dans CrocoClick, dans Contacts, et vérifier que le contact de test est bien apparu dans votre CRM. Vérifier aussi que la soumission est visible dans Sites > Formulaires > Soumissions.

Si le formulaire ne s'affiche pas

Quelques pistes à vérifier dans l'ordre :

  • Le code a-t-il été collé en entier ? Pas de morceau coupé ou de balise tronquée.
  • Le code est-il bien dans la bonne section (header, footer ou bloc HTML selon la plateforme) ?
  • Avez-vous bien publié votre site après modification ? Sur Squarespace et Wix notamment, sauvegarder ne suffit pas, il faut publier.
  • Avez-vous une extension qui bloque les scripts (bloqueur de pubs, mode strict de confidentialité du navigateur) ? Comparez un navigateur de test sans extension et les réglages du gestionnaire de consentement : le mode privé peut aussi renforcer les blocages, il ne les exclut pas.
  • Si vous utilisez WordPress avec un cache, videz le cache avant de tester.

Questions fréquentes

Oui. Tout se fait dans CrocoClick avant de récupérer le code d'intégration : couleurs, typographies, espacements, champs, logique conditionnelle, messages de succès. Enregistrez le formulaire puis contrôlez le rendu public. Si vous changez une option portée par l’embed, régénérez et remplacez le code d’intégration.

Oui. Chaque formulaire CrocoClick a son propre code d'intégration. Vous générez un code par formulaire et vous le collez sur la page concernée. Vérifiez que chaque embed utilise le bon formulaire et qu’aucun script ou identifiant n’entre en conflit sur une même page.

Non. L'intégration consiste à copier-coller un code dans un emplacement prévu par le constructeur de votre site. Aucune connaissance en HTML, CSS ou JavaScript n'est requise.

Oui, les formulaires CrocoClick sont responsive par défaut et s'adaptent aux écrans mobiles. Pensez quand même à vérifier le rendu sur smartphone après intégration, certains thèmes externes peuvent imposer des contraintes de largeur.

Oui. Une soumission de formulaire CrocoClick (qu'il soit intégré sur CrocoClick ou sur un site externe) peut déclencher une automatisation, ajouter un tag, créer une opportunité, envoyer une séquence d'emails ou de SMS. Tout se configure dans la section Automatisations de CrocoClick.

Dans l'onglet Intégrer de votre formulaire, choisissez l'option pop-up au lieu d'intégration classique. Le code généré sera différent : il déclenchera le formulaire en pop-up selon les règles que vous aurez définies (au chargement, après X secondes, sur clic d'un bouton, etc.).

Pour un formulaire inline, placez le HTML visible dans le corps de la page à l’emplacement voulu ; les injections globales concernent notamment les scripts de pop-up. Conservez le code complet généré par CrocoClick, sans l’imbriquer dans un autre formulaire. Avant une soumission d’essai, contrôlez ses notifications et workflows pour éviter un envoi à un client. Une option de désactivation d’embed masque cet affichage, elle ne constitue pas nécessairement un retrait du lien direct du formulaire.

Cela a-t-il été utile ?

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