Découvrons comment modifier facilement l’apparence de vos formulaires grâce à la fonctionnalité Custom CSS de Formaloo.
Il vous suffit de coller le code dans la zone Custom CSS de l’onglet Design de l’éditeur de votre formaloo.
💡Vous souhaitez voir tous les sélecteurs CSS utilisables dans vos formulaires ? Consultez la référence complète ici : Tous les noms de classes CSS pris en charge dans Formaloo.
Déplacer la barre de progression en bas
Collez le code suivant dans la zone Custom CSS de votre formulaire pour déplacer la barre de progression en bas du formulaire :
.formaloo__progress-bar-container {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0;
width: 100%;
}
Masquer le bouton Submit
Collez ce code dans la zone Custom CSS de votre formulaire pour masquer le bouton Submit :
.formaloo__submit-button{display:none !important;}
Taille de police des titres des champs
Collez ce code dans la zone Custom CSS de votre formulaire pour modifier la taille de police des titres de vos champs :
.formaloo__field label span { font-size: 20px; }
Remarques
✐ Plus le nombre est élevé (« 23px » contre « 20px »), plus le texte est grand. N’insérez pas d’espace entre le nombre et son unité (par ex. px).
✐ Pour modifier la couleur des titres des champs, utilisez les paramètres de couleur disponibles dans l’onglet Design de l’éditeur de formulaire.
Taille de police des réponses dans les champs de saisie
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la taille de police des valeurs de vos champs (champs de saisie concernés : texte, nombre, texte long, e-mail, numéro de téléphone, date, ville, texte sélectionné d’une liste déroulante, etc.).
.formaloo__field .MuiFormControl-root .MuiInputBase-root input { font-size: 20px; }Cela modifie la taille de police des réponses que l’utilisateur saisit dans vos champs.
Couleur du texte des réponses dans les champs de saisie
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la couleur du texte des valeurs de vos champs (champs de saisie concernés : texte, nombre, texte long, e-mail, numéro de téléphone, date, ville, texte sélectionné d’une liste déroulante, etc.).
.formaloo__field .MuiFormControl-root .MuiInputBase-root input { color: #555f6d; }
Remarque
✐ Pour modifier la couleur des titres des champs, utilisez les paramètres de couleur disponibles dans l’onglet Design de l’éditeur de formulaire.
Taille de police des options des champs à choix
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la taille de police des options de vos champs à choix (champs concernés : « choix unique », « choix multiple » et « conditions générales »).
.formaloo__field .MuiButton-root p { font-size: 20px; }
Couleur du texte des options des champs à choix
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la couleur du texte des options de vos champs à choix (champs concernés : « choix unique », « choix multiple » et « conditions générales »).
.formaloo__field .MuiButton-root p { color: #555f6d; }
Couleur d’arrière-plan des options des champs à choix
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la couleur d’arrière-plan des options de vos champs à choix.
.formaloo__field .MuiButton-root, .formaloo__field .MuiButton-root.MuiButton-outlined { background-color: #c613701c; }
Couleur du sélecteur des champs à choix unique
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la couleur du sélecteur (bouton radio) de vos champs à choix unique.
.formaloo__field .MuiButton-root .MuiButton-icon svg { fill: #b63030; }
Couleur du sélecteur des champs à choix multiple
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la couleur du sélecteur (case à cocher) de vos champs à choix multiple (types de champs concernés : « choix multiple », « conditions générales » et score NPS).
.formaloo__field .MuiButton-root .MuiCheckbox-root div { border-color: #b63030; }
.formaloo__field .MuiButton-root .MuiCheckbox-root.Mui-checked div {background-color: #b63030;}
Modifier le nombre de colonnes
Collez les lignes suivantes dans la zone Custom CSS de votre formulaire pour afficher les champs de votre formulaire sur deux ou trois colonnes.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div { width: 47%; min-width: 47%; }
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__form-description { width: 100%; }
Remarques
✐ Vous pouvez aussi ajuster le pourcentage de largeur pour modifier le nombre de colonnes visibles. Par exemple, une width et une min-width de 30 % afficheront les champs sur trois colonnes. Pour une mise en page optimale, réorganisez les champs de manière à ce qu’ils s’alignent bien entre eux dans le formulaire.
✐ Veillez à modifier à la fois width et min-width lorsque vous ajustez les colonnes de votre formulaire.
✐ Pour que le champ de texte long occupe toute la largeur du formulaire (voir les captures d’écran ci-dessus), ajoutez le CSS suivant après le code qui modifie les colonnes de votre formulaire.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__field--long_text { width: 100%; }
.formaloo__field--long_text .MuiFormControl-root { max-width: 100%; }
Champ de téléversement de fichier en pleine largeur
Collez les lignes suivantes dans la zone Custom CSS de votre formulaire pour afficher les champs File Upload en pleine largeur.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__field--file {width: 100%;}
.formaloo__field--file label.MuiBox-root { max-width: 100%; }
Remarque
✐ Pensez à vérifier les paramètres de mise en page de votre formulaire, ainsi que la combinaison de l’image de couverture et de l’image d’arrière-plan, pour créer de beaux formulaires parfaitement adaptés à votre marque.
Aligner le texte du titre de votre formulaire
Collez les lignes suivantes dans la zone Custom CSS de votre formulaire pour aligner le texte du titre à gauche.
.formaloo__form-title {text-align: left !important;}
form>.MuiBox-root>.MuiBox-root>.MuiBox-root {align-items: revert;}
Remarque
✐ Pour modifier l’alignement du texte de description de votre formulaire, sélectionnez ce texte dans l’éditeur de formulaire et modifiez son alignement depuis la barre d’outils.
Modifier l’espace entre l’image de couverture et le titre du formulaire
Collez les lignes suivantes dans la zone Custom CSS de votre formulaire pour modifier l’espace entre l’image de couverture et le titre du formulaire.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root img.MuiBox-root {margin-bottom: 32px;}
Hauteur du champ de texte long
Collez les lignes suivantes dans la zone Custom CSS de votre formulaire pour augmenter la hauteur des champs de texte long.
textarea {height: 300px !important;}
Remarque
✐ Dans le code ci-dessus, vous pouvez utiliser d’autres valeurs, comme « right » et « center », pour ajuster davantage l’alignement.
Taille de police des boutons Submit/Continue
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la taille de police du bouton d’envoi.
.formaloo__button span { font-size: 12px; }
Taille de police des réponses
Collez la ligne suivante dans la zone Custom CSS de votre formulaire pour modifier la taille de police des réponses dans les champs de saisie.
input, input::placeholder, textarea, textarea::placeholder { font-size: 14px !important; } 
Options à choix unique sur une ligne
Par défaut, les options d’un champ à choix unique s’affichent en colonne. Vous pouvez les afficher sur une ligne. Collez le CSS suivant dans la zone Custom CSS de votre formulaire pour appliquer ce changement :
.MuiRadioGroup-root {flex-flow: wrap !important;}
Votre style est plus complexe ou ne figure pas sur cette page ?
Pas d’inquiétude, nos partenaires certifiés sont là pour vous aider ! Ils réaliseront votre projet selon vos spécifications, de A à Z, et le livreront dans votre espace de travail.
Nous disposons d’un réseau de partenaires certifiés qui peuvent prendre en charge la personnalisation de votre formulaire du début à la fin, selon vos spécifications, et la livrer directement dans votre espace de travail : vous évitez la configuration et lancez plus vite 🚀
Présentez-nous votre cas d’usage et vos besoins 🔗 via ce formulaire : nous vous mettrons en relation avec le bon partenaire et reviendrons rapidement vers vous avec une estimation du délai et du coût.