🆕 Demande d'adresse électronique

Le bloc fonctionnel de “demande d’adresse électronique” permet d’aider un utilisateur à saisir une adresse électronique (=adresse email).

Il doit être utilisé quand votre service nécessite de récupérer une adresse électronique auprès d’un utilisateur, notamment dans les cas de création de compte ou de connexion. Des modèles de page pour ces deux usages sont à disposition : page de création de compte et page de connexion

Structure

Ce bloc utilise un champ de saisie classique et s’adapte en fonction du contexte de demande d’adresse électronique. Il est composé des éléments suivants:

  • Label - obligatoire, avec le titre par dĂ©faut “Adresse Ă©lectronique”
  • Description - obligatoire, intĂ©grant un exemple par dĂ©faut du format attendu
  • Champ input de type “email” - obligatoire

                    <div class="fr-input-group">
    <label class="fr-label" for="email-1">
        Adresse Ă©lectronique
        <span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
    </label>
    <input class="fr-input" name="email" autocomplete="on" id="email-1" type="email">
</div>
                    
                  

Le bloc de demande d’adresse électronique aide à la saisie de l’adresse électronique pour l’utilisateur car :

  • il permet le copier coller
  • il est paramĂ©trĂ© avec les bons attributs pour aider Ă  la saisie (pour ex :
  • il permet la saisie de n’importe quelle adresse Ă©lectronique avec pour taille maximale 256 caractères.

Règles d’utilisation

Textes du label et de la description

  • Utiliser les textes du label et de la description pour :
    • prĂ©senter le format attendu “Exemple : nom@domaine.fr “
    • prĂ©ciser, quand c’est nĂ©cessaire, pourquoi il nĂ©cessaire de rĂ©cupĂ©rer l’adresse Ă©lectronique et Ă  quoi elle sera utilisĂ©e afin de mettre en confiance l’utilisateur et pour qu’il puisse choisir la bonne adresse Ă©lectronique.

Erreur

  • Dans le cas d’une erreur de saisie, il faut reprendre l’affichage d’erreur du champ de saisie. Les textes d’erreur associĂ©s doivent ĂŞtre adaptĂ©s au contexte de Ă  la demande d’adresse et du type d’erreur rencontrĂ©.
    • Exemples message d’erreur :
      • “champ vide” : “entrer une adresse Ă©lectronique”,
      • “format invalide” : “saisissez une adresse avec un format valide, exemple : nom@exemple.fr”
  • Dans le cadre d’une demande d’adresse Ă©lectronique dans un formulaire de connexion, ne pas reprendre le message d’erreur, mais le bloc alerte et mettre un message spĂ©cifiant une erreur pour “le couple mot de passe/identifiant. Voir le modèle de page de connexion .

Bonne pratiques

Confirmation d’adresse électronique

  • si l’adresse Ă©lectronique est un Ă©lĂ©ment essentiel de votre service et que vous souhaitez confirmer le fonctionnement de l’adresse Ă©lectronique, Ă©viter la rĂ©pĂ©tition de champ (“confirmer votre adresse Ă©lectronique”) et passer par une boucle de validation par courriel.

Contenu

  • Terme Ă  utiliser “adresse Ă©lectronique”
    • Pour aider l’utilisateur Ă  bien comprendre l’information demandĂ©e, il est important de nommer correctement l’information demandĂ©e et garder de la consistance en utilisant le mĂŞme terme.
    • Le terme courriel dĂ©signe le message Ă©lectronique et non l’adresse.

Accessibilité

  • https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie
  • Utiliser l’attribut autocomplete="email" sur l’input