Corfix Form Builder : utilisation du composant « E-mail ».

Ce composant est spécialement conçu pour la collecte d’adresses e-mail et intègre une fonctionnalité de validation du format des adresses e-mail.

Où le trouver

Dans votre générateur de formulaires Corfix, cliquez sur un composant « E-mail » pour accéder au panneau de configuration. Vous verrez quatre onglets :

• Affichage

• Données

• Validation

• Conditionnel

1. Onglet « Affichage »

L'onglet « Affichage » permet de contrôler la manière dont le composant « E-mail » s'affiche pour l'utilisateur.

• Libellé :

  • Il s'agit du nom visible de votre champ e-mail que les utilisateurs verront. Ce champ est obligatoire.

  • Exemple : « Adresse e-mail », « E-mail de contact », « E-mail de l'utilisateur ».

• Position du libellé :

  • Détermine l'emplacement de l'étiquette par rapport au champ de saisie de l'e-mail (par exemple : en haut, à gauche, à droite, en bas).

  • Par défaut : en haut.

• Texte d'aide :

  • Texte qui apparaît dans le champ de saisie avant que l'utilisateur ne saisisse quoi que ce soit. Il s'agit d'une indication donnée à l'utilisateur sur ce qu'il doit saisir.

  • Exemple : « john.doe@example.com ».

• Description :

  • Fournit un texte explicatif supplémentaire pour le champ, généralement affiché sous la zone de saisie.

  • Exemple : « Veuillez saisir votre adresse e-mail principale pour que nous puissions vous contacter. »

• Info-bulle :

  • Texte qui s'affiche lorsque l'utilisateur passe la souris sur le champ. Utile pour fournir une aide rapide ou du contexte.

• Préfixe :

  • Texte qui apparaît avant le champ de saisie. (Moins courant pour les champs d'adresse e-mail).

• Suffixe :

  • Texte qui s'affiche après le champ de saisie. (Moins courant pour les champs d'adresse e-mail).

• Classe CSS personnalisée :

  • Permet aux utilisateurs avancés d’appliquer une mise en forme personnalisée au composant à l’aide de classes CSS.

• Saisie semi-automatique :

  • Contrôle le comportement de la saisie semi-automatique du navigateur (par exemple, « activée » ou « désactivée »). Pour les adresses e-mail, l’option « activée » est généralement utile.

  • Par défaut : « activé ».

• Masquer le libellé :

  • Si cette option est cochée, le libellé du champ e-mail ne s'affichera pas.

• Activer la vérification orthographique :

  • Si cette option est cochée, la vérification orthographique est activée pour le champ d'adresse e-mail (en fonction du navigateur).

• Modification dans une fenêtre modale :

  • (Les détails ne sont pas entièrement visibles sur la capture d'écran, mais cela concerne généralement la modification dans une fenêtre modale contextuelle).

• Inclus dans les rapports :

  • Si cette option est cochée, les données de ce champ seront incluses dans les rapports.

2. Onglet « Données »

L'onglet « Données » permet de gérer les propriétés des données sous-jacentes du champ « e-mail ».

• Valeurs multiples :

  • Si cette case est cochée, l’utilisateur peut saisir plusieurs adresses e-mail dans ce champ (par exemple, une liste de destinataires).

• Valeur par défaut :

  • Adresse e-mail préremplie qui s'affiche dans le champ de saisie au chargement du formulaire. Les utilisateurs peuvent remplacer cette valeur.

3. Onglet « Validation »

L'onglet « Validation » définit les règles permettant de s'assurer que les données saisies par l'utilisateur respectent le format d'adresse e-mail valide et répondent à des critères de longueur spécifiques.

• Obligatoire :

  • Si cette case est cochée, l’utilisateur doit saisir une adresse e-mail dans ce champ avant de valider le formulaire.

• Longueur minimale :

  • Nombre minimum de caractères autorisés dans le champ e-mail.

• Longueur maximale :

  • Nombre maximal de caractères autorisés dans le champ « e-mail ».

4. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand ce composant « E-mail » doit être affiché ou masqué en fonction des valeurs d'autres composants du formulaire.

• Simple :

  • Il s’agit généralement d’un bouton bascule ou d’un menu déroulant permettant de choisir entre une logique conditionnelle simple et une logique conditionnelle avancée.

• Ce composant doit s'afficher :

  • Choisissez si le composant doit être « Affiché » ou « Masqué » (options implicites) en fonction de la condition.

• Lorsque le composant du formulaire :

  • Sélectionnez un autre composant de votre formulaire dont la valeur déclenchera la condition.

• A la valeur :

  • Précisez la valeur exacte que doit avoir le composant de formulaire sélectionné pour que la condition soit remplie.

  Exemple : vous pouvez configurer une règle pour que le champ « E-mail secondaire » ne s’affiche que lorsque la case « Avez-vous une adresse e-mail secondaire ? » est cochée.

Panneau d’aperçu

Le panneau d’aperçu situé à droite de la boîte de dialogue vous montre à quoi ressemblera visuellement le champ de saisie « E-mail » sur votre formulaire. À mesure que vous modifiez des paramètres tels que le libellé, le texte de placeholder ou le préfixe/suffixe, vous verrez ces changements s’afficher immédiatement.

Actions situées au bas de la boîte de dialogue :

• Enregistrer : enregistre toutes les modifications apportées aux paramètres du composant « E-mail ».

• Annuler : annule toutes les modifications non enregistrées et ferme la boîte de dialogue.

• Supprimer : supprime le composant « E-mail » du formulaire.

Bonnes pratiques pour le composant « E-mail » :

• Libellé clair : utilisez un libellé simple tel que « Adresse e-mail » ou « E-mail de contact ».

• Fournissez un exemple de texte de remplacement : utilisez le « texte de remplacement » (par exemple, « name@example.com ») pour indiquer le format attendu.

• Rendez ce champ obligatoire pour la communication : si une adresse e-mail est indispensable pour le suivi ou la création d’un compte, cochez toujours la case « Obligatoire ».

• Activez l’option « Valeurs multiples » si nécessaire : si les utilisateurs peuvent avoir besoin de fournir plusieurs adresses e-mail (par exemple, pour les notifications), cochez « Valeurs multiples ».

• Utilisez l’affichage conditionnel : n’affichez le champ d’adresse e-mail que lorsqu’il est logiquement pertinent (par exemple, affichez « E-mail de contact d’urgence » si l’option « Contact d’urgence » est cochée).