Dans Formaloo, le design des formulaires repose désormais sur les thèmes : des préréglages de design réutilisables qui définissent l’apparence et le comportement de votre formulaire.
Au lieu de styliser chaque formulaire de zéro, chaque formulaire est associé à un thème. Vos paramètres de design (couleurs, mise en page, polices, etc.) sont donc gérés via ce thème et peuvent être réutilisés ou mis à jour dans plusieurs formulaires.
Dans ce guide, nous vous présentons tous les paramètres de design disponibles et la façon de les personnaliser selon vos besoins.
Comment accéder au design de votre formulaire et le modifier
Lorsque vous ouvrez l’onglet Design de l’éditeur de formulaire, vous arrivez d’abord dans la section de gestion des thèmes : c’est ici que vous gérez le thème appliqué à votre formulaire, ou que vous le modifiez :
Depuis cette section, vous pouvez :
Voir le thème actuellement appliqué
Passer à l’un de vos thèmes d’espace de travail existants
Choisir un thème système prêt à l’emploi dans la galerie
Ou créer un nouveau thème de zéro
Une fois un thème sélectionné, vous pouvez le modifier depuis le menu ••• : c’est là que vous personnalisez les couleurs, la mise en page, les polices et les autres paramètres présentés dans ce guide.
Si le thème est déjà appliqué à plusieurs formulaires, un avertissement s’affiche avant toute modification. Vous pouvez alors choisir de :
Continuer la modification : les changements s’appliqueront à tous les formulaires utilisant ce thème
Dupliquer le thème et modifier la copie, afin de créer une variante tout en conservant l’original intact
ℹ️ Si vous découvrez les thèmes, consultez notre guide sur la création et la réutilisation de thèmes de design dans vos formulaires
⚠️ Si votre formulaire a été créé avant l’introduction des thèmes, il peut vous être demandé de :
Convertir votre design existant en thème
Choisir et attribuer un thème existant
Pour continuer à modifier le design, vous devrez choisir l’une de ces options.
Choisir le type de formulaire
En haut de l’onglet Design, deux options de type de formulaire s’offrent à vous :
Formulaire classique
Toutes les questions apparaissent sur une seule page, ou sur plusieurs pages créées par pagination
Une question à la fois
Les questions s’affichent une par page (plusieurs étapes)
Vous pouvez passer de l’un à l’autre à tout moment selon le parcours que vous souhaitez proposer à vos répondants.
💡 Besoin d’un formulaire multipage avec plusieurs champs par page ?
Pour créer un formulaire paginé où chaque page contient un ensemble de questions, choisissez le type de formulaire Classique et ajoutez des New pages selon vos besoins depuis la liste des champs.
Faites glisser les champs du formulaire pour les déplacer d’une page à l’autre :
Choisir une mise en page
Juste en dessous du type de formulaire, vous trouverez des options de mise en page qui vous permettent de modifier la structure visuelle de votre formulaire :
Sélectionnez la disposition la mieux adaptée à votre marque ou à votre cas d’usage.
Ajuster la largeur du formulaire et l’espacement des champs
Une fois la mise en page choisie, vous pouvez ajuster le caractère aéré ou compact de votre formulaire.
👉 Largeur du formulaire
Vous pouvez contrôler la largeur d’affichage de votre formulaire sur la page. Par défaut, la largeur est fixée à 50 %, mais vous pouvez :
La réduire pour un rendu plus compact et centré
L’augmenter jusqu’à la pleine largeur pour une mise en page plus immersive
La réinitialiser à la valeur par défaut à tout moment
Ajuster la largeur vous permet d’adapter votre formulaire à votre style de design, que vous préfériez une expérience étroite et ciblée ou une mise en page pleine largeur.
👉 Espacement des champs
Vous pouvez aussi contrôler l’espacement entre vos champs pour améliorer la lisibilité et la mise en page.
ℹ️ Les paramètres d’espacement des champs (vertical et horizontal) ne sont disponibles que dans les formulaires classiques. Comme les formulaires une question à la fois affichent un seul champ par page, l’espacement entre les champs ne s’applique pas et n’est pas affiché.
L’espacement vertical contrôle l’espace entre les champs empilés les uns sur les autres
L’espacement horizontal contrôle l’espace entre les champs placés côte à côte
💡 L’espacement horizontal est particulièrement utile avec les mises en page à plusieurs colonnes, pour trouver le bon équilibre entre densité et clarté.
💡 Vous souhaitez explorer ces paramètres plus en détail ?
Consultez notre guide Ajuster la largeur du formulaire et l’espacement des champs dans Formaloo
Personnaliser les couleurs (Color palette)
Dans Color palette, vous pouvez modifier les couleurs des principales parties de votre formulaire :
Questions et textes
Réponses
Arrière-plan des champs (peut être synchronisé avec la couleur des réponses)
Boutons
Texte des boutons
Arrière-plan
Vous pouvez sélectionner les couleurs en cliquant sur l’icône en forme de goutte, puis en choisissant une couleur sur le cercle chromatique ou en saisissant un code couleur #HEX.
Vous pouvez ainsi harmoniser les couleurs avec la palette de votre marque :
💡 Si vous souhaitez modifier la couleur d’une description de champ spécifique, cliquez dans le texte de la description et utilisez la barre d’outils de mise en forme pour changer sa couleur. C’est utile pour mettre en évidence des instructions importantes sous une question sans modifier votre thème global :
Pour tout savoir sur la personnalisation des textes, lisez l’article Comment ajouter et personnaliser le texte de votre formulaire.
Choisir une police et une taille de police
Dans Fonts, choisissez une police dans la liste déroulante. Votre choix s’applique à l’ensemble du formulaire, pour une expérience cohérente.
La police par défaut est Inter, mais vous pouvez parcourir la liste et choisir un style qui correspond mieux au ton et à l’image de votre marque.
Vous pouvez également ajuster la taille de police de tout le formulaire, en choisissant entre petite, moyenne et grande selon le niveau de lisibilité et d’impact visuel souhaité :
Ajouter un logo, une image de couverture et une image d’arrière-plan
Vous pouvez enrichir le design de votre formulaire en ajoutant des visuels de marque, notamment un logo, une image de couverture et une image d’arrière-plan, dans votre thème.
Ces éléments contribuent à offrir à vos répondants une expérience plus soignée et fidèle à votre marque. Téléversez les images par glisser-déposer ou à l’aide du sélecteur de fichiers :
Une fois ajoutés à un thème, ces visuels sont automatiquement appliqués à tout nouveau formulaire utilisant ce thème, ce qui vous aide à garder une cohérence dans tout votre espace de travail.
👉 Pour l’image d’arrière-plan, vous pouvez aussi ajuster le point focal et la luminosité afin que vos questions et zones de saisie restent lisibles :
Si l’arrière-plan rend le formulaire difficile à lire, augmentez la luminosité ou utilisez une image plus simple, moins détaillée.
💡 Vous pouvez aussi téléverser un logo ou une image de couverture directement dans l’éditeur de formulaire :
Ils seront ajoutés comme visuels par défaut dans les paramètres de votre thème ou remplaceront ceux qui existaient auparavant.
ℹ️ Images de couverture dans les formulaires 1QAT :
Dans les formulaires une question à la fois, vous pouvez définir une image de couverture distincte pour chaque page. Si aucune image spécifique n’est ajoutée à une page, le formulaire utilise l’image de couverture par défaut de votre thème.
⚠️ Privilégiez des images légères
Les fichiers image volumineux peuvent ralentir le chargement, en particulier sur mobile. Pour des performances optimales, assurez-vous que vos images sont optimisées (redimensionnées ou compressées) avant de les téléverser.
Ajuster l’arrondi des angles
Chaque détail compte : vous pouvez donc aussi ajuster l’arrondi des angles des boutons. Trois options sont proposées. Votre choix s’applique à tous les boutons de l’enquête ou du formulaire :
Personnaliser le SEO et les balises meta de votre formulaire
Vous pouvez aussi ajuster la façon dont votre formulaire apparaît lorsqu’il est partagé ou découvert en ligne. Dans SEO & Meta tags, vous pouvez contrôler l’apparence du lien de votre formulaire sur les moteurs de recherche et les réseaux sociaux en :
Téléversant un favicon pour votre formulaire
Téléversant une image meta qui s’affichera en aperçu lors du partage du lien du formulaire :
Utiliser les paramètres avancés
Dans la section Advanced, vous pouvez contrôler ce que voient les répondants et le comportement du formulaire. Certaines options sont disponibles pour les deux types de formulaires, d’autres uniquement en mode une question à la fois.
Les options avancées varient selon le type de formulaire : si vous passez du formulaire classique au mode une question à la fois, certains interrupteurs peuvent apparaître ou disparaître. C’est normal.
👉 Paramètres avancés du formulaire classique
Lorsque le type de formulaire est Classique, vous verrez généralement :
Show progress bar
Peut être activé dans les formulaires comportant plusieurs pages.
Show form title
Make fields full width
Lorsque cette option est activée, les champs de votre formulaire s’étendent sur toute la largeur du conteneur, idéal pour des mises en page modernes et épurées ou des designs adaptés au mobile.
👉 Options supplémentaires en mode une question à la fois
Lorsque vous choisissez une question à la fois, vous pouvez aussi voir :
Show welcome page
Vous pouvez choisir d’afficher ou de masquer le titre et la description sur la première page ; lorsque l’option est désactivée, le formulaire passe directement à la première question.
Show form progress bar
Affiche un indicateur de progression à mesure que les répondants avancent dans le formulaire, afin qu’ils sachent combien il leur reste avant la fin.
Ces options guident les répondants dans un parcours étape par étape et rendent les formulaires longs plus faciles à remplir.
💡 Si votre formulaire est en mode une question à la fois, vous pouvez choisir d’afficher ou non la page d’accueil. Il s’agit du premier écran que voient les répondants ; il peut afficher le titre et la description de votre formulaire avant qu’ils ne commencent à répondre.
Dans le formulaire classique, l’option principale est Show form title, qui vous permet de masquer le titre par défaut affiché en haut du formulaire. De nombreuses équipes l’utilisent pour conserver un nom interne pour le formulaire tout en affichant un titre personnalisé à l’aide du champ Description ou Content.
⭐ Ajouter du CSS personnalisé (facultatif)
Dans Custom code, vous pouvez ajouter du Custom CSS pour styliser le formulaire au-delà des paramètres de Design :
💡 Nous avons rassemblé tous les sélecteurs CSS pris en charge dans Formaloo pour vous permettre d’ajouter vos styles. Nous avons aussi récemment introduit la possibilité de cibler des champs individuels via leur ID de champ avec du CSS personnalisé.
👀 Si vous n’êtes pas à l’aise avec le CSS, consultez les exemples de CSS personnalisé les plus utilisés, avec des instructions accessibles aux débutants et des idées pour vous inspirer.