🆕 Lettre d'information et réseaux sociaux - Newsletter & Follow us

Ce composant est disponible depuis la dernière version (1.1.0).
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !


Ces composants permettent à l’utilisateur d’avoir accès à des services complémentaire du site : l’inscription à (aux) lettre(s) d’information proposée(s), ainsi que des liens vers les comptes de réseaux sociaux de l’entité.

Ces deux composants s’affichent l’un à coté de l’autre dans le cas ou les deux ‘services’ sont proposés , ou bien seuls si l’entité ne propose qu’une possibilité.

Ils précèdent immédiatement le footer.

Mise en avant des réseaux sociaux (RS)

Ce composant permet à l’utilisateur d’accéder aux réseaux sociaux de l’organisation.

  • un texte : « Suivez-nous sur les réseaux sociaux : »  

  • des pictos réseau sociaux : chaque picto est cliquable et renvoie vers la page du réseau social en question

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12"> <div class="fr-follow__social"> <p class="fr-h5 fr-mb-3v fr-mb-3v">Suivez-nous <br> sur les réseaux sociaux</p> <ul class="fr-links-group fr-links-group--lg"> <li> <a class="fr-link--facebook fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le facebook de l'organisation]" target="_blank">facebook</a> </li> <li> <a class="fr-link--twitter fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le twitter de l'organisation]" target="_blank">twitter</a> </li> <li> <a class="fr-link--instagram fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers l'instagram de l'organisation]" target="_blank">instagram</a> </li> <li> <a class="fr-link--linkedin fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le linkedin de l'organisation]" target="_blank">linkedin</a> </li> <li> <a class="fr-link--youtube fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le youtube de l'organisation]" target="_blank">youtube</a> </li> </ul> </div> </div> </div> </div> </div> <footer class="fr-footer" role="contentinfo" id="fr-footer-1"> (...) </footer>

 

Lettre d’information

Ce composant à l’utilisateur de s’inscrire à la newsletter de l’organisation.

Ce composant est proposé selon deux variantes :

  • une première variante qui propose un pied de page intégrant directement le champ de saisie de l’email

  • une seconde variante qui est une simple zone de mise en avant de la newsletter avec un call to action redirigeant vers un formulaire d’inscription plus riche.


Formulaire d’inscription à la newsletter

A utiliser pour les newsletters simples avec nécessité de recueillir uniquement l’adresse mail et le consentement de l’utilisateur.

Le texte de description qui accompagne le titre du bloc sert à présenter la Newsletter.

Les mentions pour obtenir le consentement et les indications pour la désinscription sont à adaptés en fonction des cas de figure.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12"> <div class="fr-follow__newsletter"> <div> <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5> <p class="fr-text--sm fr-follow__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p> </div> <div> <form action=""> <label class="fr-label" for="newsletter-email">Votre adresse électronique (ex. : nom@domaine.fr) </label> <div class="fr-input-wrap fr-input-wrap--addon"> <input class="fr-input" aria-describedby="fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email"> <button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit"> S&#39;abonner </button> </div> <p id="fr-newsletter-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p> </form> </div> </div> </div> </div> </div> </div>


La gestion des messages d'erreurs lors de la soumission se fait avec l'état “erreur” du champ de saisie.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12"> <div class="fr-follow__newsletter"> <div> <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5> <p class="fr-text--sm fr-follow__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p> </div> <div> <form action=""> <label class="fr-label" for="newsletter-email">Votre adresse électronique (ex. : nom@domaine.fr) </label> <div class="fr-input-wrap fr-input-wrap--addon"> <input class="fr-input" aria-describedby="fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email"> <button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit"> S&#39;abonner </button> </div> <p id="fr-newsletter-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p> </form> </div> </div> </div> </div> </div> </div>


Cette variante peut également servir à pré-saisir l’adresse mail de l’utilisateur pour ensuite renvoyer vers une page de formulaire plus détaillée. l


Mise en avant de la lettre d’information 

A utiliser pour les newsletters plus complexes avec nécessité de recueillir plusieurs informations.

Le texte de description qui accompagne le titre du bloc sert à présenter la Newsletter, et le bouton redirige vers la page d’inscription

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12"> <div class="fr-follow__newsletter"> <div> <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5> <p class="fr-text--sm fr-follow__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p> </div> <div> <button class="fr-btn" title="S‘abonner à notre lettre d’information" type="button"> S&#39;abonner </button> </div> </div> </div> </div> </div> </div>


Lettre d’information et reseaux sociaux

Si les deux élements sont proposés, il doivent s’afficher l’un à coté de l’autre. Il est possible d’utiliser les différentes déclinaisons de la lettre d’information (formulaire ou mise en avant).

Formulaire d’inscription à la lettre d’information et Réseaux sociaux 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12 fr-col-md-8"> <div class="fr-follow__newsletter"> <div> <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5> <p class="fr-text--sm fr-follow__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p> </div> <div> <form action=""> <label class="fr-label" for="newsletter-email">Votre adresse électronique (ex. : nom@domaine.fr) </label> <div class="fr-input-wrap fr-input-wrap--addon"> <input class="fr-input" aria-describedby="fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email"> <button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit"> S&#39;abonner </button> </div> <p id="fr-newsletter-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p> </form> </div> </div> </div> <div class="fr-col-12 fr-col-md-4"> <div class="fr-follow__social"> <p class="fr-h5 fr-mb-3v fr-mb-3v">Suivez-nous <br> sur les réseaux sociaux</p> <ul class="fr-links-group fr-links-group--lg"> <li> <a class="fr-link--facebook fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le facebook de l'organisation]" target="_blank">facebook</a> </li> <li> <a class="fr-link--twitter fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le twitter de l'organisation]" target="_blank">twitter</a> </li> <li> <a class="fr-link--instagram fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers l'instagram de l'organisation]" target="_blank">instagram</a> </li> <li> <a class="fr-link--linkedin fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le linkedin de l'organisation]" target="_blank">linkedin</a> </li> <li> <a class="fr-link--youtube fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le youtube de l'organisation]" target="_blank">youtube</a> </li> </ul> </div> </div> </div> </div> </div>


Mise en avant de la lettre d’information et Réseaux sociaux 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <div class="fr-follow"> <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col-12 fr-col-md-8"> <div class="fr-follow__newsletter"> <div> <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5> <p class="fr-text--sm fr-follow__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p> </div> <div> <button class="fr-btn" title="S‘abonner à notre lettre d’information" type="button"> S&#39;abonner </button> </div> </div> </div> <div class="fr-col-12 fr-col-md-4"> <div class="fr-follow__social"> <p class="fr-h5 fr-mb-3v fr-mb-3v">Suivez-nous <br> sur les réseaux sociaux</p> <ul class="fr-links-group fr-links-group--lg"> <li> <a class="fr-link--facebook fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le facebook de l'organisation]" target="_blank">facebook</a> </li> <li> <a class="fr-link--twitter fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le twitter de l'organisation]" target="_blank">twitter</a> </li> <li> <a class="fr-link--instagram fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers l'instagram de l'organisation]" target="_blank">instagram</a> </li> <li> <a class="fr-link--linkedin fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le linkedin de l'organisation]" target="_blank">linkedin</a> </li> <li> <a class="fr-link--youtube fr-link" title="[À MODIFIER | XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER | Lien vers le youtube de l'organisation]" target="_blank">youtube</a> </li> </ul> </div> </div> </div> </div> </div>


Règles d’utilisation

Usage

Le ou les composants sont présents sur l’ensemble des pages du site, juste au dessus du footer.

Accessibilité

Formulaire d’inscription

Idéalement, un élément <label> explicite doit précéder le champ <input>. Cependant, il est possible s’en passer dans ce cas en respectant les règles suivantes :

  • L’attribut placeholder contient un exemple de format attendu placeholder="exemple : nom@exemple.fr"

  • Si le <label> est présent et masqué (ce qui est le cas ici), il faut ajouter un attribut title à l'<input> (nul besoin de aria-label).
    Si , pour quelques raisons, il ne peut y avoir de <label> , alors on ajoute un attribut title ET un attribut aria-label (ces 2 attributs doivent être strictement identiques).
    Exemple :

1 2 3 <input type="email" placeholder="exemple : nom@exemple.fr" title="Saisissez votre adresse électronique (exemple : nom@exemple.fr)" aria-label="Saisissez votre adresse électronique (exemple : nom@exemple.fr)" >

Liens Réseaux sociaux

  • Pour rendre accessibles les liens réseaux sociaux, il suffit de renseigner l’attribut title du lien de façon à ce qu’il indique explicitement sa fonction.

Exemple :

1 2 3 <a class="fr-link--twitter fr-link" target="_blank" title="Twitter - ouvre une nouvelle fenêtre" href="#" >twitter</a>

Contenu

  • Le titre et le texte d’explication est adapté en fonction du contexte. Il s’agit ici de présenter la lettre d’information et la nature des contenus qu’elle traite.

  • Le texte de description “rgpd” sur l’utilisation des données personnels sont à adapter en fonction de la politique de l’organisation.

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :