Concepteur de thème

Introduction

Le Concepteur de thèmes est une fonctionnalité qui vous permet de concevoir votre formulaire en quelques minutes, éliminant ainsi les frictions liées à la création d'un nouveau design, comme l'écriture et la réécriture de CSS personnalisés.

Pour personnaliser l'apparence de votre formulaire, allez simplement dans le générateur de formulaires , sur le côté droit, vous verrez le panneau "Conception". À partir de là, définissez les différentes propriétés souhaitées pour la conception de votre formulaire, la zone d'aperçu du formulaire sera mise à jour en temps réel.

Sections de conception

Le panneau « Conception » comporte les sections suivantes. Chaque section se concentre sur une classe de formulaire pouvant être appliquée à plusieurs éléments.

• Global : c'est le conteneur de formulaires.
• Formulaire : le formulaire lui-même. Par défaut, il n'a pas de remplissage, pour conserver la compatibilité lorsqu'un widget de formulaire est affiché sur un site Web externe.
• Groupe de formulaires : groupe d'étiquettes, d'entrées, de texte d'aide et de message de validation.
• Contrôle de formulaire : champ de saisie.
• Bouton : bouton de soumission (bouton principal Bootstrap).
• Étiquette : champ d'étiquette (étiquette de contrôle Bootstrap)
• Espace réservé
• Titre
• Paragraphe
• Texte d'aide
• Lien
• Étapes du formulaire : apparaît lorsqu'un champ Saut de page a été ajouté au formulaire.
• Alertes de formulaire : message de réussite ou d'erreur qui apparaît lorsqu'un formulaire a été soumis.
• Validation des champs : pour personnaliser l'état d'erreur de vos champs.
• Autres composants : des options pour les cases à cocher personnalisées, les boutons radio personnalisés, reCAPTCHA, le pavé de signature et la barre de progression sont également disponibles.

Copier, coller et réinitialiser la conception ¶

Si vous avez déjà créé un formulaire, vous savez que le processus implique intrinsèquement une quantité considérable de travail répétitif. Avec les fonctionnalités Copier la conception et Coller la conception, vous pouvez copier et coller des styles CSS d'un formulaire à un autre en quelques clics. En outre, vous pouvez réinitialiser la conception aux styles par défaut en un seul clic.

Principaux outils et fonctionnalités

Le Concepteur de thèmes est livré avec des outils utiles pour faciliter les conceptions complexes.

- Sélecteur de polices Google

Sélectionnez les polices Google avec aperçu en direct dans une liste déroulante.

- Images d'archives

Des milliers d’images de stock se trouvent désormais dans Form Builder. Avec notre intégration Unsplash, vous pouvez rechercher et ajouter des images d'archives à votre formulaire en quelques clics.

Vous n'avez pas besoin de licence pour les images Unsplash. Sous la licence Unsplash, vous pouvez copier, modifier, télécharger et distribuer n'importe laquelle de leurs images gratuitement, même à des fins commerciales. Vous n'avez pas besoin de demander la permission ou de fournir une attribution à l'artiste, mais nous vous recommandons quand même de le créditer.

- Sélecteur de dégradé Web ¶

Vous pouvez trouver le sélecteur de dégradé pour créer votre propre dégradé (linéaire, radial, choisir vos couleurs et arrêts et plus encore) ou choisir entre plus de 100 magnifiques dégradés Web prêts à l'emploi.

- Motifs subtils

Choisissez parmi des centaines de motifs subtils sélectionnés par Toptal, de belles textures pour vos formes.

Cas d'utilisation courants

Le Concepteur de thème est un outil flexible qui vous permet de personnaliser différentes parties du formulaire pour générer une feuille de style. Voici quelques cas d'utilisation courants :

- Masquer les étiquettes de champ

Si vous souhaitez masquer une étiquette de champ, cliquez simplement sur le champ et entrez la classe CSS Label suivante :sr-only

Mais si vous souhaitez supprimer l’intégralité des étiquettes du formulaire d’un seul coup, suivez simplement les étapes suivantes :

1. Dans le Conception -> Ouvrez la section Étiquette
2. Faites défiler vers le bas jusqu'à la sous-section Extra
3. Sur Affichage, choisissez Aucun .

C'est ça!

Remarque : Ne laissez jamais un champ sans étiquette, car cela vous aidera à identifier votre champ dans l'ensemble du système.

- Alignez votre formulaire au centre

Si vous souhaitez afficher votre formulaire sur une page entière (Partager le formulaire -> Lien sans case) cette astuce vous sera très utile.

Il existe plusieurs façons de centrer un formulaire, nous décrirons ci-dessous l'option la plus courante :

1. Dans la globale , sélectionnez Alignement du texte : Centre
2. Et dans le Formulaire Section, sélectionnez :
   • Alignement du texte : Gauche     - Marge : Auto     - Largeur : 80 %

C'est tout. Vous pouvez étendre ou réduire la largeur du formulaire en fonction de vos besoins.

- Concevoir des boutons pleine largeur

Si vous souhaitez afficher un bouton spécifique en pleine largeur, cliquez simplement sur le champ et entrez la classe CSS suivante :btn-block

Mais si vous souhaitez concevoir l'intégralité des boutons du formulaire en une seule fois, suivez simplement les étapes suivantes :

1. Dans le Conception -> Ouvrez la section Bouton
2. Faites défiler vers le bas jusqu'à la sous-section Taille
3. Sur Largeur, choisissez 100 % .

C'est ça!