Ajoutez des éléments glisser-déposer à vos formulaires d'inscription pour collecter des e-mails, des numéros de téléphone, des données personnalisées, et augmenter l'engagement. Choisissez parmi plus de 13 éléments, y compris des champs, des boutons, des images et de la gamification.
Dans cet article, vous apprendrez tous les éléments disponibles dans le Constructeur de formulaires et comment les utiliser.
Quels sont les éléments de formulaire ?
Les éléments du formulaire sont des éléments réutilisables que vous faites glisser depuis la barre latérale gauche vers votre Formulaire d'inscription. Ils vous aident à :
Collecter les données des abonnés (Email, téléphone, nom, date de naissance, préférences).
Assurez-vous de la conformité avec le RGPD et le TCPA.
Créez des expériences engageantes (Roue de la fortune, minuteurs de compte à rebours).
Ouvrez votre formulaire dans le Constructeur de formulaires → Faites glisser des éléments depuis la barre latérale gauche dans la mise en page de votre formulaire → Personnalisez chaque élément à l'aide du menu de droite.
💡 Tous les champs peuvent être ajustés davantage en utilisant Champs sous Paramètres de thème. En savoir plus sur les paramètres du thème.
Champ Email
Collectez des adresses e-mail en ajoutant un champ Email n'importe où dans votre formulaire.
Faites glisser le champ Email depuis la barre latérale gauche dans votre formulaire. Vous pouvez personnaliser :
Texte de remplacement : Texte par défaut affiché dans le champ (par exemple, "Entrez votre email").
Étiquette : Texte au-dessus du champ (par exemple, "Email").
Champ requis : Rendez le champ obligatoire.
Messages d'erreur : Personnalisez le message affiché lorsque le champ n'est pas rempli correctement (par exemple, "L'adresse email doit contenir @ et un domaine valide").
Alignement de l'entrée : Sélectionnez l'alignement du champ à gauche, centré, à droite ou plein.
Espacement : Ajustez l'espacement interne dans le champ.
Champ numéro de téléphone
Collectez des numéros de téléphone avec un champ de code pays prédéfini.
Faites glisser le champ Numéro de téléphone dans votre formulaire et personnalisez :
Texte d'espace réservé : Texte par défaut affiché dans le champ (par exemple, "Entrez votre numéro").
Pays par défaut : Pré-remplissez le champ avec un pays spécifique (affiché comme drapeau + code).
Disponibilité des pays : ChoisissezAfficher ces pays pour autoriser uniquement les pays sélectionnés, ou choisissezNe pas afficher ces pays pour exclure des pays spécifiques de la liste déroulante.
Étiquette : Texte au-dessus du champ (par exemple, "Téléphone").
Champ requis : Rendre le champ obligatoire.
Messages d'erreur : Personnalisez le message affiché lorsque le champ n'est pas rempli correctement (par exemple, "Doit être un numéro de téléphone valide").
Alignement du champ : Sélectionnez l'alignement du champ à gauche, centre, droite ou plein.
Rembourrage : Ajustez l'espacement interne dans le champ.
Lors de la collecte de numéros de téléphone, ajoutez un élément Consentement légal pour vous conformer au TCPA (États-Unis) ou au RGPD (UE).
Consentement légal
Ajoutez une case à cocher de conformité RGPD ou TCPA pour collecter le consentement documenté.
Faites glisser l'élément Consentement légal dans votre formulaire et ensuite :
Choisissez un modèle : RGPD (UE) ou TCPA (US).
Modifiez le texte et ajoutez votre lien de politique de confidentialité.
Personnalisez le message d'erreur requis.
La case à cocher est décochée par défaut – à la fois dans l'aperçu du constructeur de formulaires et sur votre formulaire en direct.Les visiteurs doivent le vérifier activement avant de soumettre.
Champ de saisie
Collectez des données textuelles personnalisées comme le prénom, le nom, l'adresse, la ville, le code postal ou propriétés personnalisées.
Faites glisser le champ Input dans votre formulaire et ensuite :
Associez le champ à une propriété : Prénom, Nom, Adresse, Ville, État, Code postal, ou un Propriété personnalisée
Personnalisez l'espace réservé, l'étiquette, le message requis, l'alignement et les espacements.
Champ de date
Collecter des dates comme des anniversaires ou des inscriptions à des événements.
Faites glisser le champ Date dans votre formulaire et :
Mappez le champ à Anniversaire ou à une Propriété personnalisée.
Personnalisez le texte d'espace réservé, l'étiquette, le message requis, l'alignement, et les marges.
Champ déroulant
Collectez des données structurées telles que le sexe, le pays ou des préférences personnalisées, et fournissez aux utilisateurs des options déroulantes parmi lesquelles choisir.
Faites glisser le champ Liste déroulante dans votre formulaire et ensuite :
Mappez le champ à Genre, Pays, ou à une Propriété personnalisée.
Personnalisez le texte d'espace réservé, l'étiquette, le message requis, l'alignement, et les marges.
Si vous sélectionnez le type de propriété personnalisée, vous pouvez ajouter vos choix déroulants personnalisés en cliquant sur Ajouter un choix.
💡 Exemples de cas d'utilisation :
Collecter la langue préférée.
Demander des intérêts de catégorie de produit.
Rassembler la taille de l'entreprise (B2B).
Bouton radio
Laissez les utilisateurs sélectionner une option dans une liste (par exemple, sexe, fréquence d'abonnement) en cliquant sur un bouton radio.
Faites glisser l'élément Bouton radio dans votre formulaire et :
Mappez à Genre ou à une Propriété personnalisée.
Si vous sélectionnez une propriété personnalisée, ajoutez des options (par exemple, "Hebdomadaire", "Mensuel") sous Gérer vos choix.
Personnalisez l'espace réservé, l'étiquette, le message requis, l'alignement et les espacements.
Vos visiteurs de site web devront sélectionner une option et s'abonner en conséquence.
Case à cocher
Permettre aux utilisateurs de sélectionner plusieurs options dans une liste (par exemple, intérêts de produit, préférences de contenu) en cochant des cases.
Faites glisser l'élément Case à cocher dans votre formulaire et :
Ajoutez un nom de propriété pour votre Propriété personnalisée.
Ajoutez des options (par exemple, "Chaussures", "Vêtements", "Accessoires") sous Gérer vos choix.
Personnalisez l'espace réservé, l'étiquette, le message requis, l'alignement et les espacements.
💡 Toutes les sélections de cases à cocher sont enregistrées en tant que valeurs textuelles dans la propriété personnalisée. Vous pouvez les utiliser pour segmenter vos clients en fonction de leurs données personnelles.
Texte
Ajoutez des titres, descriptions ou instructions à votre formulaire.
Faites glisser l'élément Texte dans votre formulaire et :
Tapez ou collez votre contenu.
Sélectionner style de texte : Titre grand, Titre moyen, Titre petit, Paragraphe ou Note de bas de page.
Sélectionnez Couleur du texte et Couleur du lien.
Formatez le texte à l'aide du menu de droite (gras, italique, liens, alignement, etc.).
Personnalisez les espacements.
Bouton
Ajoutez un bouton pour soumettre le formulaire, lier à une page ou naviguer dans des formulaires multi-étapes.
Faites glisser l'élément Bouton dans votre formulaire et :
Sélectionnez l'action du bouton :
Soumettre le formulaire : Soumet le formulaire et enregistre les données collectées.
Lien vers : Redirige vers une page/URL spécifique (par exemple, page produit, article de blog).
Passer à l'étape suivante : Avance dans des formulaires multi-étapes.
Fermer le formulaire : Ferme le formulaire (utile pour les formulaires promotionnels).
Ajoutez texte du bouton.
Sélectionner le style de bouton : Primaire, Secondaire ou Tertiaire.
Définir l'alignement du bouton à gauche, centre, droite ou plein.
Ajustez les styles de survol et les rembourrages.
Vous pouvez ajuster le style du bouton davantage sous Paramètres de thème → Boutons.
Vous pouvez également ajouter plusieurs boutons Soumettre le formulaire à votre formulaire et enregistrer les clics sur les boutons en tant que propriétés personnalisées.
Définissez l'action de votre bouton sur Soumettre le formulaire.
Activez Mapper à la propriété personnalisée.
Entrez le nom de la propriété personnalisée.
Entrez la valeur à enregistrer lorsque un visiteur clique sur le bouton.
Remarque : UnEmail ouLe champ numéro de téléphone doit être inclus dans le formulaire pour qu'une valeur de propriété personnalisée soit enregistrée dans les profils de contact.
Image
Ajoutez des images (JPG, PNG, GIF) jusqu'à 2000px de dimensions et, en option, liez les images à des URL.
Faites glisser l'élément Image dans votre formulaire et ensuite :
Cliquez sur Sélectionner un fichier pour ouvrir la bibliothèque d'images.Sélectionnez une image précédemment téléchargée ou téléchargez-en une nouvelle depuis votre ordinateur ou une URL.
Ajoutez un texte alternatif et lien vers (optionnel).
Ajustez l'alignement et le remplissage.
Redimensionnez l'image en faisant glisser les coins.
Remarque : L'élément Image est différent de l'image d'arrière-plan du formulaire, qui est définie dans Paramètres de mise en page.
Ligne/Espace
Ajoutez une sépération visuelle entre les éléments du formulaire.
Faites glisser Ligne/Espace dans votre formulaire et :
Alternez entre Ligne (bordure) ou Espace (remplissage vertical).
Personnalisez :
Ligne : Épaisseur de la bordure, Largeur, Style (solide, pointillé, pointu), Alignement, Couleur de la bordure et Remplissage.
Espace : Hauteur en pixels (jusqu'à 240px).
Roue de la fortune
Gamifiez votre formulaire en permettant aux visiteurs de faire tourner une roue pour gagner des réductions en échange de leur abonnement (adresse e-mail ou numéro de téléphone).
Faites glisser l'élément Roue de la fortune dans votre formulaire et :
Configurez les tranches de la roue :
Ajoutez des tranches gagnantes avec des codes de réduction et des probabilités.
Ajoutez des tranches perdantes (la roue s'arrête uniquement sur les tranches gagnantes).
Personnalisez les couleurs et le texte.
Ajustez les styles de la roue, y compris la largeur, la couleur du pointeur et le remplissage.
Minuteur de compte à rebours
Créez de l'urgence avec un minuteur de compte à rebours en direct. C'est une partie du marketing FOMO, qui est idéal pour les ventes, les offres à durée limitée ou les événements comme le BFCM.
Faites glisser l'élément Minuteur de compte à rebours dans votre formulaire.
Définissez la date et l'heure de fin (AM/PM).
Activez Désactiver après la date de fin : Désactivez automatiquement le formulaire lorsque le minuteur expire.
Personnalisez la police, la couleur du compte à rebours et le remplissage.
Le minuteur s'ajuste automatiquement pour s'adapter à la largeur de votre formulaire sur tous les appareils.
Vos visiteurs de site web verront le temps restant en fonction du moment où ils interagissent avec votre formulaire d'inscription.
Élément de réduction
Ajoutez un code de réduction au Message de confirmation de votre formulaire pour récompenser les nouveaux abonnés. L'élément de réduction affiche automatiquement un code de coupon après la soumission du formulaire.
Important : L'élément de réduction est uniquement disponible dans le message de succès, pas dans la mise en page principale du formulaire. Vous ne pouvez pas l'ajouter au formulaire lui-même, seulement au message affiché après qu'un visiteur s'abonne.
Faites glisser l'élément Réduction de la barre latérale gauche dans la mise en page du message de succès et :
Choisissez le type de réduction :
Utilisez le rabais de la Roue de la fortune : le formulaire affichera le rabais lié à votre Roue de la fortune tranches gagnantes.
Utilisez votre propre réduction : Tapez la réduction que vous souhaitez montrer aux abonnés.
Personnalisez la couleur du texte, la couleur de la bordure, la couleur de fond et le remplissage.
FAQ
Pourquoi mon iPhone zoome-t-il automatiquement lorsque je touche un champ de formulaire ?
Les iPhones zooment si la taille de la police est inférieure à 16 pixels. Pour éviter cela, définissez la taille de police de votre champ de saisie à au moins 16px dans Paramètres de thème Champs.
Comment réorganiser les éléments ?
Faites glisser les éléments vers le haut ou vers le bas dans le constructeur de formulaires pour changer leur ordre.
Puis-je styliser les éléments individuellement ?
Le texte, le bouton, l'image et la ligne/espace peuvent être stylisés individuellement. Les champs (Email, Téléphone, Saisie, Date) partagent des styles globaux définis dans Paramètres du thème → Champs.
Avez-vous encore des questions ? N'hésitez pas à nous envoyer un email à [email protected] ou via le chat dans l'application. Nous sommes là 24/7 !