Modèles de formulaire de capture de prospects (côte à côte et empilé)

Le formulaire de capture de prospects recueille les coordonnées d’un visiteur et les enregistre dans son profil Personyze, pour que vous puissiez assurer un suivi, segmenter ou personnaliser ce qu’il verra ensuite. Utilisez-le pour les inscriptions à une newsletter, les contenus réservés, les demandes de démo, ou tout autre cas où il vous faut une adresse e-mail.

Les deux versions

• Lead Capture Form (Side-by-Side) — un panneau d’image à côté des champs. Idéal pour les popups sur écrans larges et pour les prises de contrôle plein écran, où il devient un écran partagé avec l’image qui en occupe une moitié.
• Lead Capture Form (Stacked) — une seule colonne avec l’image au-dessus des champs. Dimensionné pour les emplacements étroits et les barres latérales, il ajoute un compte à rebours facultatif, que la version côte à côte n’a pas.

Tout ce qui suit s’applique aux deux, sauf mention contraire.

Où le formulaire apparaît

Display Mode, dans Style, propose trois options :

• inline — se place dans la page à l’endroit où l’action est placée.
• fullpage — le formulaire sur un calque assombri au-dessus de votre page, comme une fenêtre modale classique.
• fullscreen — tout l’écran devient l’arrière-plan. La version côte à côte partage l’écran entre l’image et le formulaire ; la version empilée centre la carte avec l’image en bandeau au-dessus.

Les deux modes plein écran ne flottent que sur votre site en ligne. Dans l’éditeur, ils s’affichent comme un bloc ordinaire pour ne pas couvrir la barre d’outils d’édition. C’est normal, pas un défaut.

Choisir vos champs

Seul le champ Email est permanent. Tout le reste est facultatif et désactivé tant que vous ne l’activez pas. Sous Fields, vous trouvez l’e-mail et le prénom ; le nom, le téléphone et l’entreprise se trouvent sous Optional Fields. Chaque champ forme un bloc : l’interrupteur qui l’affiche, puis son libellé, son texte indicatif, son attribut de profil, son pré-remplissage et son caractère obligatoire.

Chaque champ supplémentaire vous coûte des soumissions : n’ajoutez que ce que vous utiliserez vraiment. Si vous pouvez enrichir la fiche plus tard à partir de l’adresse e-mail, faites-le plutôt que de poser la question.

Remplir automatiquement les champs

Chaque champ a une option prefill if known, activée par défaut. Quand Personyze reconnaît déjà le visiteur, le champ arrive pré-rempli et il n’a plus qu’à le confirmer. Désactivez-la pour tout champ que vous préférez lui faire saisir.

Listes déroulantes, boutons radio et cases à cocher

Trois autres types de champs, chacun dans sa propre section et chacun désactivé par défaut :

• Dropdown — un choix dans une liste, avec une ligne indicative tant que rien n’est choisi.
• Radio Buttons — un seul choix, toutes les options visibles. Idéal pour deux à quatre options courtes.
• Checkboxes — plusieurs choix. Les valeurs sélectionnées sont stockées ensemble dans un seul attribut, séparées par des virgules.

Saisissez les options sous forme de liste simple séparée par des virgules, par exemple Starter, Growth, Enterprise. Jusqu’à six par champ. Les boutons radio et les cases à cocher peuvent être empilés ou côte à côte.

Le compte à rebours (version empilée)

Le formulaire empilé peut afficher un compte à rebours, c’est pourquoi il est configuré par défaut comme inscription à un webinaire. Définissez l’échéance sous Countdown logic dans la section Countdown Timer, exactement comme dans les modèles de compte à rebours : une date et une heure fixes, ou un compte à rebours par visiteur.

Timer Position le place au-dessus du titre, sous le sous-texte, sous les champs, ou de part et d’autre du bouton.

Change the Label as the Date Nears est la partie à connaître. Au lieu d’une seule ligne fixe au-dessus du minuteur, vous définissez jusqu’à quatre étapes, chacune avec un nombre d’heures avant l’événement et son propre texte. La ligne est remplacée à mesure que la date approche :

• 168 heures — « Réservez la date »
• 48 heures — « Plus que deux jours »
• 24 heures — « Dernière chance pour s’inscrire »
• 1 heure — « Ça commence bientôt »

L’étape affichée est celle au plus petit nombre sous lequel le temps restant est passé : vous pouvez donc les saisir dans n’importe quel ordre.

Vous pouvez aussi styliser le minuteur : Timer Box Look propose des cases, un style minimal (chiffres seuls), un contour, un fond plein ou une teinte douce ; Timer Size et Label Emphasis déterminent sa force. Si la ligne changeante passe inaperçue, réglez Label Emphasis sur badge, ce qui la transforme en pastille colorée. Vider le libellé d’une unité — Days, Hours, Minutes ou Seconds — masque entièrement cette unité.

Étiqueter les prospects sans leur demander

Hidden Values stocke des informations que le visiteur ne voit jamais. Choisissez un attribut de profil, saisissez une valeur fixe, et chaque soumission de ce formulaire la portera — par exemple l’attribut source avec la valeur homepage-popup. Il y en a deux : vous pouvez donc enregistrer à la fois une source et une campagne. C’est ainsi que vous saurez plus tard de quel formulaire vient un prospect.

Les erreurs et ce que voit le visiteur

Le formulaire vérifie lui-même les champs et affiche son propre message sous le champ concerné : rien ne semble déplacé. Sous Errors, vous pouvez définir le texte et l’apparence — couleur, taille et graisse du texte, et fond du champ en état d’erreur.

Work Email Only mérite d’être connu : activez-le et le formulaire refuse les fournisseurs gratuits comme Gmail, Outlook et Yahoo, ainsi que les services d’e-mail jetables. Utile quand seules les adresses professionnelles vous intéressent. La liste de blocage est modifiable : vous pouvez y ajouter tout ce que vous repérez.

Arrêter le spam sans captcha

Spam Protection est activée par défaut et effectue deux vérifications que le visiteur ne voit jamais :

• Un champ leurre masqué. Les vraies personnes ne le remplissent jamais ; les scripts automatisés remplissent tout. S’il a une valeur, la soumission est discrètement ignorée.
• Une vérification du temps. Tout ce qui est soumis plus vite qu’une personne ne pourrait raisonnablement taper est rejeté.

Ensemble, elles arrêtent la plupart des soumissions automatisées sans rien à résoudre pour vos visiteurs, sans énigme et sans service tiers.

Ce qui se passe après la soumission

Le formulaire est remplacé par un écran de réussite que vous contrôlez sous Success Screen : une coche, un titre, un message, et éventuellement un code promo avec un bouton de copie. L’image est alors masquée pour que le message se suffise à lui-même.

Sous Logic, vous choisissez ce qui se passe ensuite :

• message — rester sur l’écran de réussite.
• redirect — envoyer le visiteur vers une URL après un délai que vous définissez. Add Form Data to the URL ajoute ce qu’il a saisi en paramètres, ce qui est pratique pour pré-remplir la page suivante. Gardez à l’esprit que son e-mail apparaît alors dans la barre d’adresse et dans vos outils d’analyse.
• close — fermer le formulaire.

Do Not Show This Form Again empêche le formulaire d’apparaître à toute personne qui l’a déjà envoyé. Laissez-le désactivé pendant vos tests, sinon le formulaire disparaîtra pour vous après votre première soumission de test.

Apparence

Le Preset — light, soft ou dark — détermine toute la palette : carte, champs, bouton, couleurs d’erreur et de réussite, et arrière-plan en plein écran. Il n’y a pas de sélecteurs de couleur séparés pour ces éléments : changer de préréglage donne donc toujours un résultat cohérent.

Toujours dans Style : la taille, le rayon des coins (none, light, medium, round), l’ombre, les formes décoratives, une image d’arrière-plan facultative avec un calque assombrissant, et six styles de bouton — rounded, pill, square, outline, soft, gradient — avec une animation facultative. Si vous avez besoin de quelque chose de précis, Button: extra CSS et Card: extra CSS ajoutent vos propres règles par-dessus.

Les libellés de champ sont activés par défaut. Des libellés au-dessus de chaque champ sont plus faciles à utiliser que de simples textes indicatifs, car un texte indicatif disparaît dès que l’on commence à taper.

L’image peut être désactivée, déplacée de l’autre côté ou en dessous, et masquée sur mobile pour que le formulaire commence en haut de l’écran d’un téléphone.

Exécuter votre propre code

Custom JavaScript vous donne deux points d’accroche, qui reçoivent tous deux form et values:

• On Submit s’exécute avant tout envoi. Renvoyez false pour arrêter la soumission — utilisez-le pour vos propres règles de validation.
• After Submit s’exécute une fois la soumission réussie, par exemple pour envoyer un événement à votre outil d’analyse.

Si quelque chose ne semble pas fonctionner

Deux causes expliquent presque tous les cas :

• La page utilise peut-être une ancienne version. Changez le titre pour quelque chose de voyant, enregistrez et rechargez complètement la page. Si l’ancien titre est toujours là, la page n’a pas encore récupéré vos modifications, et rien d’autre de ce que vous changerez ne s’affichera non plus.
• Un réglage déjà enregistré conserve sa valeur. Les valeurs par défaut du modèle ne s’appliquent qu’aux champs que l’action n’a jamais contenus. Si un réglage récemment ajouté semble ne rien faire, ouvrez-le dans l’action, définissez-le explicitement et enregistrez.

Notes techniques

• Les réponses sont stockées dans le profil Personyze du visiteur via l’attribut que vous choisissez pour chaque champ : elles sont donc immédiatement disponibles pour le ciblage et la segmentation.
• Qui voit le formulaire, où et à quelle fréquence se règle sur l’action, pas dans le modèle.
• Si une soumission ne revient pas en douze secondes, le bouton est rétabli et un message s’affiche : il ne reste donc jamais bloqué sur « Sending ».
• Dans l’éditeur, vous ne voyez que le formulaire lui-même. L’écran de réussite apparaît après une vraie soumission.

Pour aller plus loin

• Modèles de popups pour site web — les 16 modèles, et comment choisir le bon format.
• Génération de prospects personnalisée — capturer de meilleurs prospects, pas seulement davantage.