🆕 Modèle de page de création de compte

Le modèle de “page de création de compte” permet de demander à l’utilisateur de créer un compte.

Ce modèle est à utiliser lorsque vous souhaitez que l’utilisateur se crée un compte. De manière générale, permettez aux utilisateurs d'accéder à autant de services ou contenus possibles sans avoir à se connecter, les formulaires de connexion étant une barrière entre l’utilisateur et les contenus qu’il est souhaitable de limiter au maximum.

Structure

Ce modèle est une page de référence prête à l’emploi et directement réutilisable.

Le modèle est une page prête à l’emploi composé des composants suivant :

La page de connexion est composée des éléments suivants :

  • Un header et un footer par dĂ©faut : obligatoire - Ă  remplacer par le header et footer rĂ©els de votre site
  • Un titre, un chapo : obligatoire - Ă  ajuster en fonction du contexte pour prĂ©senter et contextualiser la procĂ©dure de crĂ©ation de compte et les Ă©ventuelles pièces Ă  fournir
  • Le formulaire de crĂ©ation de compte :La crĂ©ation de compte avec “France connect” : obligatoireLa crĂ©ation de compte avec “avec identifiants” : obligatoireLes actions : cases Ă  cocher mentions CNIL + bouton “crĂ©er un compte” - obligatoire
  • La crĂ©ation de compte avec “France connect” : obligatoire
  • La crĂ©ation de compte avec “avec identifiants” : obligatoire
  • Les actions : cases Ă  cocher mentions CNIL + bouton “crĂ©er un compte” - obligatoire
  • Un accès Ă  la connexion : obligatoire - textes Ă  ajuster en fonction du contexte

<main role="main" id="content">
    <div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <h2>Création de compte sur [Nom de service-site]</h2>
                <p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
            </div>
        </div>
    </div>
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
                            <div class="fr-mb-6v">
                                <h6>Se créer un compte avec FranceConnect</h6>
                                <p class="fr-text--sm fr">FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.</p>
                                <div class="fr-connect-group">
                                    <button class="fr-connect">
                                        <span class="fr-connect__login">S’identifier avec</span>
                                        <span class="fr-connect__brand">FranceConnect</span>
                                    </button>
                                    <p>
                                        <a href="https://franceconnect.gouv.fr/" target="_blank" rel="noopener" title="Qu’est ce que FranceConnect ? - nouvelle fenêtre">Qu’est ce que FranceConnect ?</a>
                                    </p>
                                </div>
                            </div>
                            <p class="fr-hr-or">ou</p>
                            <div>
                                <form class="fr-mb-0" id="login-1797">
                                    <fieldset class="fr-mb-0 fr-fieldset" id="login-1797-fieldset" aria-labelledby="login-1797-fieldset-legend login-1797-fieldset-messages">
                                        <legend class="fr-fieldset__legend" id="login-1797-fieldset-legend">
                                            <h6>Se créer un compte en choisissant un identifiant</h6>
                                        </legend>
                                        <div class="fr-fieldset__element">
                                            <p class="fr-text--sm">Description — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-input-group">
                                                <label class="fr-label" for="username-1793">
                                                    Identifiant
                                                    <span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
                                                </label>
                                                <input class="fr-input" aria-describedby="username-1793-messages" name="username" id="username-1793" type="text">
                                                <div class="fr-messages-group" id="username-1793-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-password" id="password-1794">
                                                <label class="fr-label" for="password-1794-input">
                                                    Mot de passe
                                                </label>
                                                <div class="fr-input-wrap">
                                                    <input class="fr-password__input fr-input fr-password__input fr-input" aria-describedby="password-1794-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-1794-input" type="password">
                                                </div>
                                                <div class="fr-messages-group" id="password-1794-input-messages" aria-live="assertive">
                                                </div>
                                                <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
                                                    <input aria-label="Afficher le mot de passe" id="password-1794-show" type="checkbox" aria-describedby="password-1794-show-messages">
                                                    <label class="fr-password__checkbox fr-label" for="password-1794-show">
                                                        Afficher
                                                    </label>
                                                    <div class="fr-messages-group" id="password-1794-show-messages" aria-live="assertive">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                <input name="checkbox-cnil" id="checkbox-cnil-1795" type="checkbox" aria-describedby="checkbox-cnil-1795-messages">
                                                <label class="fr-label" for="checkbox-cnil-1795">
                                                    Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
                                                </label>
                                                <div class="fr-messages-group" id="checkbox-cnil-1795-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                <input name="checkbox-cnil" id="checkbox-cnil-1796" type="checkbox" aria-describedby="checkbox-cnil-1796-messages">
                                                <label class="fr-label" for="checkbox-cnil-1796">
                                                    Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
                                                </label>
                                                <div class="fr-messages-group" id="checkbox-cnil-1796-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline fr-btns-group fr-btns-group--inline">
                                                <li>
                                                    <button class="fr-mt-2v fr-btn fr-btn" type="submit">
                                                        Valider
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="fr-messages-group" id="login-1797-fieldset-messages" aria-live="assertive">
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Règles d’utilisation

Structure du formulaire de création de compte :
  • L’ordre et la structure des modalitĂ©s de crĂ©ation de compte sont Ă  respecter comme prĂ©senter dans le modèle :
  • 1) Le formulaire de crĂ©ation de compte avec :La crĂ©ation de compte avec FranceConnect en premierle “ou”La crĂ©ation de compte avec identifiants en second
  • La crĂ©ation de compte avec FranceConnect en premier
  • le “ou”
  • La crĂ©ation de compte avec identifiants en second
  • 2) L’accès Ă  la connexion
Création de compte avec FranceConnect :

La connexion avec FranceConnect est un impératif pour tous les service de l’Etat. C’est la première modalité de connexion qui doit présenté à l’utilisation. Les éléments de connexion FranceConnect (textes, bouton, lien) sont à reprendre en l'état. La mise en place de l’identification FranceConnect doit suivre une implantation technique précise à mener directement avec le service FranceConnect via leur plateforme ici

  • La crĂ©ation de compte avec identifiants est proposĂ©e une structure minimale avec la demande du couple “adresse Ă©lectronique” et “mot de passe”, et reprend le  “modèle de demande d’adresse mail” et le  “modèle de demande de mot passe”
  • Si votre service nĂ©cessite de demander d’autres information des champs peuvent ĂŞtre ajoutĂ©s/remplacĂ©s les champs proposĂ©s.
  • De manière gĂ©nĂ©rale, limiter le nombre d’informations demandĂ©es lors de la crĂ©ation de compte en les rĂ©duisant au strict nĂ©cessaire pour l’utilisation du service.
Mentions CNIL

Les mentions CNIL permettent de :

  • prĂ©ciser comment seront utiliser les donnĂ©es recueillies auprès de l’utilisateur
  • demander le consentement de l’utilisateur
Message d'erreur
  • Dans le cas d’erreur de saisie, afficher les erreur directement au niveau de chaque champ input en reprenant le style de message d’erreur associĂ© au champs input text
Étapes

Si vous souhaitez demander des informations supplémentaires sur l’utilisateur dès la phase de création de compte, lors d’une phase de validation de compte, ou bien dans un espace connecté, vous pouvez “découper” le formulaire en plusieurs étapes, en utilisant l’indicateur d'étapes ainsi que des boutons de validations en bas de formulaire. Limitez vos demandes aux champs strictement nécessaires à vos traitements.

Étape 1 - Identifiant

<main role="main" id="content">
    <div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <h2>Création de compte sur [Nom de service-site]</h2>
                <p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
            </div>
        </div>
    </div>
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
                            <div class="fr-stepper">
                                <h2 class="fr-stepper__title">
                                    <span class="fr-stepper__state">Étape 1 sur 3</span>
                                    Choisir un identifiant
                                </h2>
                                <div class="fr-stepper__steps" data-fr-current-step="1" data-fr-steps="3"></div>
                                <p class="fr-stepper__details">
                                    <span class="fr-text--bold">Étape suivante :</span> Renseigner une identité
                                </p>
                            </div>
                            <hr>
                            <div class="fr-mb-6v">
                                <h6>Se créer un compte avec FranceConnect</h6>
                                <p class="fr-text--sm fr">FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.</p>
                                <div class="fr-connect-group">
                                    <button class="fr-connect">
                                        <span class="fr-connect__login">S’identifier avec</span>
                                        <span class="fr-connect__brand">FranceConnect</span>
                                    </button>
                                    <p>
                                        <a href="https://franceconnect.gouv.fr/" target="_blank" rel="noopener" title="Qu’est ce que FranceConnect ? - nouvelle fenêtre">Qu’est ce que FranceConnect ?</a>
                                    </p>
                                </div>
                            </div>
                            <p class="fr-hr-or">ou</p>
                            <div>
                                <form class="fr-mb-0" id="login-1813">
                                    <fieldset class="fr-mb-0 fr-fieldset" id="login-1813-fieldset" aria-labelledby="login-1813-fieldset-legend login-1813-fieldset-messages">
                                        <legend class="fr-fieldset__legend" id="login-1813-fieldset-legend">
                                            <h6>Se créer un compte en choisissant un identifiant</h6>
                                        </legend>
                                        <div class="fr-fieldset__element">
                                            <p class="fr-text--sm">Description — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-input-group">
                                                <label class="fr-label" for="username-1809">
                                                    Identifiant
                                                    <span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
                                                </label>
                                                <input class="fr-input" aria-describedby="username-1809-messages" name="username" id="username-1809" type="text">
                                                <div class="fr-messages-group" id="username-1809-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-password" id="password-1810">
                                                <label class="fr-label" for="password-1810-input">
                                                    Mot de passe
                                                </label>
                                                <div class="fr-input-wrap">
                                                    <input class="fr-password__input fr-input fr-password__input fr-input" aria-describedby="password-1810-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-1810-input" type="password">
                                                </div>
                                                <div class="fr-messages-group" id="password-1810-input-messages" aria-live="assertive">
                                                </div>
                                                <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
                                                    <input aria-label="Afficher le mot de passe" id="password-1810-show" type="checkbox" aria-describedby="password-1810-show-messages">
                                                    <label class="fr-password__checkbox fr-label" for="password-1810-show">
                                                        Afficher
                                                    </label>
                                                    <div class="fr-messages-group" id="password-1810-show-messages" aria-live="assertive">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                <input name="checkbox-cnil" id="checkbox-cnil-1811" type="checkbox" aria-describedby="checkbox-cnil-1811-messages">
                                                <label class="fr-label" for="checkbox-cnil-1811">
                                                    Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
                                                </label>
                                                <div class="fr-messages-group" id="checkbox-cnil-1811-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                <input name="checkbox-cnil" id="checkbox-cnil-1812" type="checkbox" aria-describedby="checkbox-cnil-1812-messages">
                                                <label class="fr-label" for="checkbox-cnil-1812">
                                                    Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
                                                </label>
                                                <div class="fr-messages-group" id="checkbox-cnil-1812-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline fr-btns-group fr-btns-group--inline">
                                                <li>
                                                    <button class="fr-mt-2v fr-btn fr-btn" type="submit">
                                                        Valider
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="fr-messages-group" id="login-1813-fieldset-messages" aria-live="assertive">
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Étape 2 - Identité

<main role="main" id="content">
    <div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <h2>Création de compte sur [Nom de service-site]</h2>
                <p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
            </div>
        </div>
    </div>
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
                            <div class="fr-stepper">
                                <h2 class="fr-stepper__title">
                                    <span class="fr-stepper__state">Étape 2 sur 3</span>
                                    Renseigner une identité
                                </h2>
                                <div class="fr-stepper__steps" data-fr-current-step="2" data-fr-steps="3"></div>
                                <p class="fr-stepper__details">
                                    <span class="fr-text--bold">Étape suivante :</span> Saisir des coordonnées
                                </p>
                            </div>
                            <hr>
                            <div>
                                <form class="fr-mb-0" id="identity">
                                    <fieldset class="fr-mb-0 fr-fieldset" id="identity-fieldset" aria-labelledby="identity-fieldset-legend identity-fieldset-messages">
                                        <legend class="fr-fieldset__legend" id="identity-fieldset-legend">
                                            <h6>Identité personnelle</h6>
                                        </legend>
                                        <div class="fr-fieldset__element">
                                            <span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <fieldset class="fr-fieldset" id="sex-1825" aria-labelledby="sex-1825-legend sex-1825-messages">
                                                <legend class="fr-fieldset__legend" id="sex-1825-legend">
                                                    Sexe
                                                </legend>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="female-1826" name="sex">
                                                        <label class="fr-label" for="female-1826">
                                                            Feminin
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-radio-group">
                                                        <input type="radio" id="male-1827" name="sex">
                                                        <label class="fr-label" for="male-1827">
                                                            Masculin
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="fr-messages-group" id="sex-1825-messages" aria-live="assertive">
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <fieldset class="fr-fieldset" id="name-1836" aria-labelledby="name-1836-messages">
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="family-name-1829">
                                                            Nom
                                                        </label>
                                                        <input class="fr-input" spellcheck="false" autocomplete="family-name" aria-describedby="family-name-1829-messages" name="family-name" id="family-name-1829" type="text">
                                                        <div class="fr-messages-group" id="family-name-1829-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <fieldset class="fr-fieldset" id="firstname-fieldset-1834" aria-labelledby="firstname-fieldset-1834-messages">
                                                        <div class="fr-fieldset__element">
                                                            <div class="fr-input-group">
                                                                <label class="fr-label" for="given-1833">
                                                                    Prénom
                                                                </label>
                                                                <input class="fr-input" spellcheck="false" autocomplete="given-name" aria-describedby="given-1833-messages" name="given-name" id="given-1833" type="text">
                                                                <div class="fr-messages-group" id="given-1833-messages" aria-live="assertive">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="fr-messages-group" id="firstname-fieldset-1834-messages" aria-live="assertive">
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                        <input onclick="const fieldset = document.getElementById('firstname-fieldset-1834');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-1835" type="checkbox" aria-describedby="disabler-1835-messages">
                                                        <label class="fr-label" for="disabler-1835">
                                                            Je n'ai pas de prénom
                                                        </label>
                                                        <div class="fr-messages-group" id="disabler-1835-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-messages-group" id="name-1836-messages" aria-live="assertive">
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <ul class="fr-btns-group--right fr-mt-2v fr-btns-group fr-btns-group--inline fr-btns-group fr-btns-group--inline">
                                                <li>
                                                    <button class="fr-btn fr-btn--secondary">
                                                        Précédent
                                                    </button>
                                                </li>
                                                <li>
                                                    <button class="fr-btn" type="submit">
                                                        Valider
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="fr-messages-group" id="identity-fieldset-messages" aria-live="assertive">
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Étape 3 - Coordonnées

<main role="main" id="content">
    <div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <h1>Création de compte sur [Nom de service-site]</h1>
                <p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
            </div>
        </div>
    </div>
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
                            <div class="fr-stepper">
                                <h2 class="fr-stepper__title">
                                    <span class="fr-stepper__state">Étape 3 sur 3</span>
                                    Saisir des coordonnées
                                </h2>
                                <div class="fr-stepper__steps" data-fr-current-step="3" data-fr-steps="3"></div>
                            </div>
                            <hr>
                            <div>
                                <form class="fr-mb-0" id="identity">
                                    <fieldset class="fr-mb-0 fr-fieldset" id="identity-fieldset" aria-labelledby="identity-fieldset-legend identity-fieldset-messages">
                                        <legend class="fr-fieldset__legend" id="identity-fieldset-legend">
                                            <h3>Coordonnées personnelles</h3>
                                        </legend>
                                        <div class="fr-fieldset__element">
                                            <span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <fieldset class="fr-fieldset" id="address-1852" aria-labelledby="address-1852-messages">
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="address-1848">
                                                            Adresse
                                                            <span class="fr-hint-text">Numéro et voie</span>
                                                        </label>
                                                        <input class="fr-input" aria-describedby="address-1848-messages" name="address-line1" id="address-1848" type="text">
                                                        <div class="fr-messages-group" id="address-1848-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="complement-1849">
                                                            Complément d’adresse (optionnel)
                                                            <span class="fr-hint-text">Bâtiment, immeuble, escalier et numéro d’appartement</span>
                                                        </label>
                                                        <input class="fr-input" aria-describedby="complement-1849-messages" name="address-line2" id="complement-1849" type="text">
                                                        <div class="fr-messages-group" id="complement-1849-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="postal-1850">
                                                            Code postal
                                                        </label>
                                                        <input class="fr-input" aria-describedby="postal-1850-messages" name="postal-code" id="postal-1850" type="text">
                                                        <div class="fr-messages-group" id="postal-1850-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="city-1851">
                                                            Ville ou commune
                                                        </label>
                                                        <input class="fr-input" aria-describedby="city-1851-messages" name="address-level2" id="city-1851" type="text">
                                                        <div class="fr-messages-group" id="city-1851-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-messages-group" id="address-1852-messages" aria-live="assertive">
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <ul class="fr-btns-group--right fr-mt-2v fr-btns-group fr-btns-group--inline fr-btns-group fr-btns-group--inline">
                                                <li>
                                                    <button class="fr-btn fr-btn--secondary">
                                                        Précédent
                                                    </button>
                                                </li>
                                                <li>
                                                    <button class="fr-btn" type="submit">
                                                        Valider
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="fr-messages-group" id="identity-fieldset-messages" aria-live="assertive">
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Confirmation de création et d’activation :

Un modèle de confirmation de création et d’activation de compte est aussi mis à disposition/

Le modèle composé des composants suivant :

  • Un header et un footer par dĂ©faut : Ă  remplacer par les headers et footer rĂ©els du site
  • Un titre et chapĂ´ - obligatoire
  • un bloc gris contenant une alerte et un texte additionnel

<main role="main" id="content">
    <div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <h1>Création de compte sur [Nom de service-site]</h1>
                <p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
            </div>
        </div>
    </div>
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
                            <div>
                                <div class="fr-mb-6v fr-alert fr-alert--success fr-alert--sm">
                                    <p>Votre compte a bien été activé. Vous pouvez dès maintenant commencer à l’utiliser.</p>
                                </div>
                                <span class="fr-hint-text">Détail — Si vous n’avez pas reçu de courriel (n’hésitez pas à vérifier dans les indérisables), vous pouvez re saisir votre adresse électronique.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Accessibilité

La structure des contenus de la page doit être cohérente et le code html conforme aux standards. Chaque composant du DSFR doit respecter les règles qui lui sont propres : contraste, intitulé, cohérence du contexte, pertinence, attributs aria, etc.

La page doit être structurée comme les autres pages correctement (ARIA Authoring Practices Guide) et avoir une hiérarchie de titre correcte.