Comment créer un widget de collecte de contacts

Un formulaire de contact est un outil essentiel pour établir des relations durables avec les clients. Il permet de collecter des adresses e-mail, des numéros de téléphone, des liens vers les réseaux sociaux ou toute autre donnée nécessaire à une communication efficace. Dans cet article, nous vous montrons comment créer facilement un widget sur la plateforme.

Création d’un widget

Accédez au menu Site → Widget, mini-landing.

Cliquez sur le bouton + pour créer un nouveau widget.

Saisissez le nom du widget et cliquez sur « Enregistrer ».

Un formulaire de base avec un champ de saisie pour l’adresse e-mail sera alors automatiquement créé. Ce champ est obligatoire, car il est utilisé pour accéder à la plateforme en tant qu’utilisateur·ice. 

À quoi ressemble l’éditeur :
● Zone centrale — affiche le formulaire et son apparence
● Panneau gauche — éléments disponibles à ajouter (boutons, champs, images, etc.)
● Panneau droit — paramètres pour chaque élément sélectionné

Cette interface te permet de modifier rapidement la structure du formulaire, d’ajouter de nouveaux champs et composants, et de l’adapter à tes objectifs.

Comment configurer les champs et les étapes du formulaire

Pour configurer le formulaire, clique dessus pour le sélectionner.  

Clique ensuite sur « + Élément » dans la barre latérale gauche.

Choisis le type de champ ou l’élément supplémentaire que tu souhaites ajouter. 
Dans la liste, tu peux ajouter non seulement des champs de contact, mais aussi d’autres éléments fonctionnels :
● Bouton – pour déclencher des actions supplémentaires, par exemple une redirection vers une autre page
● Image – pour le design ou pour créer des accents visuels
● Lien – pour des redirections internes ou externes
● Minuteur – pour limiter le temps ou créer un sentiment d’urgence
● Réseaux sociaux – boutons avec icônes de Facebook, Instagram, Telegram, etc.
● HTML – pour insérer ton propre code personnalisé
● Titre et description – pour des instructions ou textes explicatifs
● YouTube et Vimeo – pour intégrer une vidéo
● Champs de contact (nom, téléphone, ville, etc.)

Remarque :
Les champs ajoutés au formulaire sont automatiquement enregistrés dans la fiche utilisateur du CRM.
Tu peux utiliser aussi bien les champs standard (nom, e-mail) que créer tes propres champs personnalisés.

Si tu dois collecter des données supplémentaires qui ne figurent pas dans l’ensemble standard, tu peux créer des champs personnalisés dans les paramètres du CRM — plus d’informations dans un  article séparé.

Cela te permet d’adapter le formulaire à des tâches spécifiques : collecter des numéros de téléphone, des liens vers les réseaux sociaux, des données pour des rendez-vous, des rôles professionnels, les sources de leads, ainsi que toute autre information pertinente pour ton interaction avec le client.

Formulaires multi-étapes : pourquoi et comment ?

Si le participant ne doit pas être redirigé vers un paiement ou une autre page après avoir rempli le formulaire — par exemple lorsqu’il s’agit simplement d’un formulaire de collecte de contacts — tu peux ajouter une deuxième étape au formulaire.

Tu peux ajouter jusqu’à 2 étapes. Passe de l’une à l’autre pour configurer séparément le contenu de chaque étape.

C’est utile si tu souhaites afficher une confirmation ou des informations supplémentaires après la première étape.

La deuxième étape contient généralement un court message du type « Ta demande a bien été reçue », un bouton « Fermer » ou un lien vers un contenu supplémentaire — par exemple un canal Telegram ou une checklist.

Logique : application des données du formulaire

Pour configurer la manière dont les données du formulaire seront utilisées pour la collecte de contacts, sélectionne le formulaire dans la zone centrale de l’éditeur, puis rends-toi dans la section Logique du panneau gauche.

Cette section définit ce qui se passe lorsqu’un utilisateur clique sur le bouton du formulaire :
● Créer un contact dans le CRM – Les données du formulaire génèrent automatiquement un nouveau contact dans le CRM Kwiga.
● Accès au produit – Un contact est créé dans le CRM et, si un accès à un cours ou produit est accordé, l’utilisateur est autorisé puis redirigé vers le paiement ou vers la page du cours.
● Deal (transaction) – En plus de la création du contact, une transaction est immédiatement générée dans le pipeline et l’étape spécifiés.
● Envoi vers un service externe – Via un webhook, les données peuvent être envoyées à des systèmes externes, tels qu’un CRM tiers, un chatbot ou tout autre service.

Une fonction supplémentaire de personnalisation est l’application automatique de tags aux nouveaux contacts.

Après l’envoi du formulaire, le système peut attribuer certains tags au contact, ce qui facilite la segmentation et le filtrage ultérieurs dans le CRM.

Par exemple, tu peux taguer automatiquement les contacts selon leur source, leur intérêt pour un produit particulier ou tout autre critère pertinent pour ta stratégie marketing.

Après l’envoi du formulaire, tu peux choisir :
● Rester dans le bloc actuel — afficher la deuxième étape du formulaire avec un message de confirmation
● Rediriger vers le profil Kwiga — connexion automatique et redirection vers le profil utilisateur
● Rediriger vers une page — redirection vers une URL spécifique

Remarque :
Il n’est pas nécessaire d’ajouter manuellement un lien de paiement : celui-ci est configuré automatiquement via l’option Accès au produit.

Analyse et suivi des événements dans Facebook
● Lors du remplissage et de l’envoi du formulaire, l’événement Lead est envoyé automatiquement par défaut.
Pour que cet événement soit enregistré dans ton compte Facebook, tu dois installer le Facebook Pixel sur la page où se trouve le widget. Aucune configuration supplémentaire n’est nécessaire.
● Dans les paramètres du formulaire, tu peux désactiver l’envoi de l’événement ou le remplacer par un événement personnalisé en sélectionnant TrackCustom.
● Pour installer le Facebook Pixel :
– S’il s’agit d’une mini-landing sur Kwiga, tu dois ajouter le Facebook Pixel comme décrit dans l’article  « Connettere il Facebook Pixel a un progetto su Kwiga ».;

Si tu utilises un autre service, installe le Facebook Pixel conformément aux recommandations de ce service.

De plus, si l’intégration avec la Facebook Conversion API est activée dans Kwiga, l’événement sera également transmis à la Conversion API lorsque le formulaire est envoyé.

Configuration des blocs et éléments du formulaire

En plus des paramètres de logique, le panneau droit propose d’autres blocs permettant d’adapter le formulaire à tes besoins.

Paramètres des marges extérieures :

● Couleur du texte pour les libellés, les espaces réservés et le texte à l’intérieur des champs
● Couleurs d’arrière-plan et des bordures
● Couleur de focus (lorsque le champ est sélectionné)

Paramètres généraux
   

● Largeur et hauteur (en pixels)
● Couleur du loader et couleur de l’arrière-plan
● Paramètres de la bordure
● Arrondi des coins
● Utilisation et réglage de l’ombre 

Configuration pour ordinateur 

Ce bloc te permet d’adapter l’apparence du formulaire aux grands écrans et de garantir un alignement correct ainsi qu’une intégration fluide dans ta page.

Les options disponibles incluent :
● Disposition en ligne (inline layout) – alignement horizontal pour des formulaires compacts
● Disposition en grille (grid layout) – utilisation d’un système de grille flexible.

Exemple : 2fr 1fr signifie que la première colonne est deux fois plus large que la deuxième.

Tu peux définir les tailles en fr (fractions), px ou %.

Les lignes s’ajustent automatiquement pour préserver un design propre, quel que soit le nombre d’éléments.

Espacement entre les éléments
Ajuste l’espacement interne entre les composants du formulaire afin d’assurer une bonne lisibilité et d’éviter tout désordre visuel.

Alignement
Des paramètres supplémentaires te permettent d’aligner le formulaire dans la version mobile de la page — à gauche, au centre ou à droite — selon ton design.

Padding du bloc
Contrôle les marges intérieures et extérieures du bloc du formulaire.
Tu peux définir séparément les valeurs pour le haut, le bas, la gauche et la droite afin de l’intégrer parfaitement à ta mise en page.

Paramètres généraux du widget et publication

Une fois le formulaire créé et configuré, il doit être préparé pour la publication.

Clique sur Paramètres en haut à droite pour ouvrir les options principales qui te permettront de finaliser ton widget.

Langue du CTA – Cette option localise les éléments textuels de ton formulaire.

Lorsqu’elle est réglée sur Automatique, le système détecte la langue de l’utilisateur à partir des paramètres de son navigateur ou de sa géolocalisation, offrant ainsi une meilleure expérience à un public international.

Activer l’arrière-plan pour les tests – Te permet d’afficher un aperçu du widget avec un arrière-plan autre que le blanc.

C’est utile pour les tests, mais attention : cet arrière-plan n’apparaît que dans le builder, pas sur la page publiée.

Utiliser dans une fenêtre modale – Active cette option si tu prévois d’afficher le widget dans un pop-up (par exemple, lorsqu’un utilisateur clique sur un bouton).

Dans l’onglet Publication, tu peux copier le code du widget afin de l’intégrer directement dans ta page.

Tu dois simplement insérer le code à l’emplacement où le formulaire doit apparaître.

Tu y trouveras également des instructions pour intégrer le widget dans les constructeurs de sites les plus courants, tels que   Weblium,  SendPulse, ou  Wix. 

Grâce à la flexibilité de la plateforme, tu peux créer un formulaire parfaitement adapté aux besoins de ton entreprise — qu’il s’agisse d’une simple collecte d’e-mails ou de scénarios complexes à plusieurs étapes avec intégration CRM et création automatique de transactions.