Concevoir votre formulaire

Une fois que vous avez créé votre widget dans le Widget Studio, il est temps d’ajouter des éléments pour construire votre formulaire.

Éléments de formulaire disponibles

Cliquez sur le menu de gauche pour ajouter un élément. Faites défiler vers le bas pour trouver la section Form. Plusieurs types d’éléments sont disponibles. Vous pouvez les combiner pour créer des formulaires personnalisés et interactifs.

Button : Un bouton dont vous pouvez modifier les caractéristiques.
Input : Une saisie de texte entièrement personnalisable pouvant collecter des données string de vos visiteurs.
Date : Un champ pour demander une date à votre visiteur. Cliquez dessus pour ouvrir un panneau de sélection de date.
Time : Un champ pour demander une heure à votre visiteur. Cliquez dessus pour ouvrir un panneau de sélection d’heure.
Toggle : Un toggle auquel vous pouvez ajouter deux états possibles (par exemple, ON et OFF).
Checkbox : Une checkbox à laquelle vous pouvez ajouter un élément Text.
RadioButton : Un bouton radio auquel vous pouvez ajouter un élément Text.
Select : Une liste déroulante entièrement personnalisable où vous pouvez renseigner différentes options sélectionnables.
Textarea : Une zone de texte entièrement personnalisable contenant un placeholder.
Range input : Un slider entièrement modifiable permettant aux visiteurs de sélectionner une valeur dans une plage spécifique.
Hidden input : Un champ de formulaire invisible utilisé pour stocker des métadonnées soumises avec le formulaire mais non affichées à l’utilisateur.
FormErrorMessage : Un champ de texte affichant un message spécifique en cas d’erreur sur le formulaire.

Commencez par ajouter des éléments dans la vue Desktop, qui est la configuration par défaut. Vous pourrez ensuite adapter votre design à un autre appareil si nécessaire (mobile/tablette). Les modifications apportées à un autre appareil restent spécifiques à cet appareil et n’auront pas d’impact sur les autres.

Lorsque vous sélectionnez un élément, deux onglets apparaissent en haut du menu d’édition : General et States.

Onglet General

Sélectionnez cet onglet pour modifier les propriétés de votre élément. Vous y trouverez les propriétés principales de votre élément (qui ne sont pas spécifiques à un état particulier, tel que hover). Vous pouvez modifier différentes caractéristiques en fonction du type d’élément, comme la position, le padding et l’animation.

Exemple de cas d’utilisation

Supposons que vous souhaitiez créer un formulaire d’inscription à la newsletter. Vous pouvez partir de l’un des modèles Newsletter disponibles dans le Widget Studio. Vous pouvez personnaliser cette base en ajoutant deux listes déroulantes et un toggle. Pour créer ce formulaire :

Cliquez sur Add an element.
Choisissez le type Select dans la section formulaires.
Cliquez sur Add option pour ajouter une option à la liste. Pour notre exemple, nous allons ajouter l’option Latest products.

Supposons que vous souhaitiez une deuxième option qui apparaît lorsqu’un visiteur sélectionne Latest products. Pour ce faire :

Cliquez sur Add an element.
Choisissez le type Select dans la section formulaires.
Dans le menu de gauche, masquez la deuxième liste déroulante. Vous devrez configurer un événement pour la faire apparaître.

Ajoutez un élément Toggle pour demander à chaque visiteur d’accepter les Conditions générales avant d’envoyer le formulaire.
Ajoutez un élément Button.

Vous devez ensuite configurer la vérification des informations et l’envoi des données.

Vous pouvez également définir des règles pour un élément : s’agit-il d’un champ obligatoire ? Devons-nous vérifier le contenu du champ avant la validation ?

Onglet States

L’onglet States vous permet de modifier les styles des états d’un élément (hover, active et disabled).

Tous les états sont modifiables, mais les propriétés modifiables des états dépendent de l’élément sélectionné.

​Éléments de formulaire disponibles