Cette section vous permet de créer et gérer des formulaires web qui génèrent automatiquement des prospects dans votre CRM après soumission par un visiteur de votre site.
Principaux éléments de l’interface
| Élément | Description |
|---|---|
| Bouton « New Form » | Crée un nouveau formulaire. Ouvre le constructeur de formulaires. |
| Champ de recherche | Filtre le tableau par nom de formulaire ou ID. |
| Bouton « Export » | Exporte les données du tableau (CSV/Excel/PDF). |
| Bouton « Reload » | Rafraîchit le tableau avec les données les plus récentes. |
| Enregistrements par page | Choisissez 10/25/50/100 ou tous (-1). |
Colonnes du tableau
| Colonne | Explication |
|---|---|
| ID | Identifiant numérique unique du formulaire. |
| Form Name | Nom du formulaire (ex. « Support »). Cliquez pour modifier. Au survol : options View, Edit, Delete. |
| Total Submissions | Nombre de soumissions du formulaire. |
| Created | Date et heure de création (temps relatif : « 5 hrs ago » ou date exacte). |
Options d’une ligne (sous le nom du formulaire)
- View – affiche le formulaire en ligne (comme un visiteur).
- Edit – modifie les champs, paramètres et messages de remerciement.
- Delete – supprime définitivement le formulaire et son historique de soumissions.
Informations de pagination
- Affiche la plage actuelle (ex. « Showing 1 to 1 of 1 entries »).
- Boutons Previous/Next pour naviguer entre les pages.
Bonnes pratiques
- Utilisez des noms de formulaires explicites (ex. « Demande d’assistance »).
- Testez chaque formulaire avec View avant publication.
- Vérifiez régulièrement Total Submissions pour suivre les performances.
- Utilisez la recherche pour trouver rapidement un formulaire.
Le Constructeur de formulaires est l'interface principale pour créer et modifier les formulaires web de génération de prospects. Il est divisé en trois zones : panneau gauche (types de champs glissables), panneau droit (aperçu et édition), à l'intérieur – paramètres du champ.
Comment ajouter un nouveau champ
- Dans le panneau gauche, trouvez le type de champ souhaité (Header, Name, Email, Phone, etc.).
- Glissez-déposez le champ dans le panneau droit.
- Le champ apparaît dans l'aperçu du formulaire et peut être configuré.
Comment modifier un champ existant
- Cliquez sur l'icône crayon (Edit) sur le champ dans le panneau droit.
- Le champ se développe pour afficher ses paramètres (sous l'aperçu).
- Configurez :
- Required (Obligatoire) – le champ doit être rempli.
- Label (Libellé) – nom du champ (modifiable directement).
- Help Text (Texte d'aide) – indication sous le champ.
- Placeholder – exemple de texte à l'intérieur du champ.
- Class (Classe CSS) – par défaut
form-control. - Name (Nom du champ) – identifiant unique.
- Access (Accès) – restreindre par rôles (ex. Administrator).
- Type – text, password, email, color, tel.
- Max Length – limite de caractères.
- Rows (Lignes) – uniquement pour textarea.
- Cliquez sur Close pour réduire les paramètres.
Actions sur un champ (icônes)
| Icône | Action | Description |
|---|---|---|
| ✏️ (Crayon) | Edit | Ouvre les paramètres du champ. |
| ???? (Copier) | Duplicate | Crée une copie exacte du champ. |
| ????️ (Poubelle) | Delete | Supprime le champ du formulaire. |
Tri et réorganisation
- Glissez un champ par sa partie supérieure pour changer son ordre.
- L'ordre est automatiquement enregistré.
Panneau gauche – types de champs disponibles
| Champ | Objectif |
|---|---|
| Header | Titre (h1, h2, h3) |
| Paragraph | Bloc de texte |
| File Upload | Téléchargement de fichier |
| Name | Nom complet |
| Position | Titre du poste |
| Email Address | E-mail (avec validation) |
| Phone | Numéro de téléphone |
| Lead Value | Valeur du prospect |
| Company | Nom de l'entreprise |
| Address | Rue et numéro |
| City | Ville |
| State | État / Région |
| Country | Pays |
| Zip Code | Code postal |
| Description | Texte multiligne (textarea) |
| Website | Site web (URL) |
Enregistrer le formulaire
- Cliquez sur le bouton Save en bas du panneau gauche.
- Le modèle est enregistré et peut être intégré sur votre site web.
Bonnes pratiques
- Cochez Required pour les champs obligatoires.
- Utilisez Placeholder pour donner un exemple ("Entrez votre e-mail").
- Testez le formulaire après l'enregistrement avec le bouton View dans la liste.
- Gardez les formulaires courts – 4 à 6 champs maximum.
- Utilisez Header pour expliquer l'objectif du formulaire.
.png)
Cette section configure le comportement, l'apparence et les notifications du formulaire web. Elle contient quatre onglets.
Onglet 1 : General (Général)
| Champ | Description |
|---|---|
| Form Name | Obligatoire. Nom interne du formulaire. |
| Language | Langue des messages de validation. |
| Lead title prefix | Texte ajouté avant le nom du prospect. |
| Source | Obligatoire. Provenance du prospect. + pour ajouter une source. |
| Status | Obligatoire. Statut initial. + pour ajouter un statut. |
| Responsible | Membre du personnel assigné. |
Onglet 2 : Branding (Image de marque)
| Champ | Description |
|---|---|
| Submit button text | Texte du bouton d'envoi. |
| Submit button background color | Couleur de fond du bouton. |
| Submit button text color | Couleur du texte du bouton. |
Onglet 3 : Submission (Après soumission)
| Option / Champ | Description |
|---|---|
| Display thank you message | Affiche un message sur la même page. |
| Redirect to another website | Redirige vers une autre URL. |
| Message to show | Texte de remerciement. |
| Website URL | URL de redirection. |
| Auto mark as public | Prospect visible par tout le personnel. |
| Allow duplicate lead | Autorise les doublons en base. |
| Prevent duplicate on field | Choisissez 1-2 champs pour bloquer les doublons (ex. Email). |
| Create task on duplicate | Crée une tâche à partir du doublon. |
Onglet 4 : Notifications
| Option | Description |
|---|---|
| Notify when lead imported | Envoie une notification après soumission. |
| Notify type | Qui reçoit la notification : • Specific Staff Members – membres choisis. • Staff members with roles – rôles choisis. • Responsible person – seule la personne assignée. |
| Staff Members to Notify | Visible quand "Specific Staff Members" est sélectionné. |
| Roles to Notify | Visible quand "Staff members with roles" est sélectionné. |
Bouton Save
- Cliquez sur Save en bas à droite.
Bonnes pratiques
- Donnez toujours un nom de formulaire et une source explicites.
- Utilisez un préfixe pour identifier la source (ex. "Site - ").
- Harmonisez les couleurs du bouton avec votre marque.
- Activez la prévention des doublons (Email).
- Configurez les notifications pour une réponse rapide.
Après avoir créé votre formulaire web-to-lead, vous verrez la section « Code d’intégration ». Elle fournit le code HTML pour intégrer le formulaire sur votre site web.
Ce que vous obtenez
| Élément | Description |
|---|---|
| Code iframe | Fragment HTML prêt à copier-coller. |
| Lien direct (stylisé) | Version pleine page avec vos styles de marque. |
| Lien direct avec logo | Identique, avec le logo de votre entreprise. |
Exemple de code iframe
<iframe width="600" height="850" src="https://confidencesystem.online/forms/wtl/8c018c20ce959b93db32c1a3c8c1abeb" frameborder="0" sandbox="allow-top-navigation allow-forms allow-scripts allow-same-origin allow-popups" allowfullscreen></iframe>
Paramètres ajustables
| Paramètre | Ce qu’il faut modifier | Exemple |
|---|---|---|
width | Largeur en pixels | width="100%" ou width="500" |
height | Hauteur en pixels | height="700" |
src | URL du formulaire (ne pas changer sauf pour HTTP/HTTPS) | Conservez tel quel |
Règles importantes sur le protocole
⚠️ Le protocole de votre site doit correspondre à celui dusrcde l’iframe
| Protocole de votre site | Utilisez dans src |
|---|---|
http:// (sans SSL) | Version http:// de l’URL du formulaire |
https:// (SSL) | Version https:// de l’URL du formulaire |
Les installations non SSL doivent utiliser le lien non SSL sur les pages de destination et vice-versa.
Liens directs pour tester et partager
| Type de lien | Objectif |
|---|---|
?styled=1 | Affiche le formulaire avec votre identité visuelle en pleine page |
?styled=1&with_logo=1 | Identique, avec le logo de l’entreprise |
Exemple :
https://confidencesystem.online/forms/wtl/8c018c20ce959b93db32c1a3c8c1abeb?styled=1
Comment intégrer sur votre site
- Copiez le code iframe.
- Collez-le dans le HTML de votre page.
- Ajustez
widthetheight. - Vérifiez le protocole – le
srcde l’iframe doit utiliser le même protocole (http/https) que votre site. - Enregistrez la page et testez le formulaire.
Bonnes pratiques
- Utilisez
width="100%"pour un design responsive. - Définissez
heightlégèrement plus grand que le formulaire. - Testez toujours après intégration.
- Conservez les attributs
sandbox– ils assurent la sécurité. - Utilisez le lien direct pour partager le formulaire par e-mail ou sur les réseaux sociaux.
