Webflow Filtrage CMS avancé avec Custom Select Dropdown

Voir l’exemple — explorez le filtre final dans un projet réel avant de passer au tutoriel pas-à-pas.

Webflow est une plateforme puissante sans code ou à faible code qui permet un développement visuel.
Cependant, pour des interactions avancées avec l’interface utilisateur (UI) et le CMS, combiner la logique native
avec des outils no-code est essentiel.

Un bon exemple est l’élément natif <select>. Il est notoirement difficile à styliser de manière
cohérente entre navigateurs avec du CSS, c’est pourquoi de nombreux développeurs préfèrent utiliser des composants
de menu déroulant personnalisés. Mais que se passerait-il si l’on pouvait garder la fonctionnalité native et
l’accessibilité — tout en l’intégrant parfaitement à Webflow ?

Dans ce tutoriel, je vais vous montrer comment créer un filtre déroulant personnalisé en combinant :

• La fonctionnalité Custom Element de Webflow — pour intégrer un élément HTML
  <select> natif qui remplit dynamiquement ses options depuis une Collection CMS.
• Les Filter Attributes de Finsweet — pour connecter l’interface du menu déroulant avec
  la logique de filtrage du CMS Webflow, permettant de filtrer le contenu et personnaliser le comportement sans
  écrire une seule ligne de code.

Il ne s’agit pas ici d’écrire du JavaScript depuis zéro, mais de comprendre comment combiner des outils
no-code avec les standards du web natif pour obtenir un contrôle total sur l’expérience utilisateur. C’est une
approche propre, évolutive, idéale pour filtrer des contenus CMS tels que des blogs, des projets ou des annonces.

Chez Pixerry Studio, nous appliquons quotidiennement cette approche hybride — sans dépendre de modèles ou de
solutions de fortune, mais en utilisant les bons outils avec la bonne logique pour créer des sites intelligents,
flexibles et performants.

Vous voulez sauter l’installation et voir le résultat tout de suite ? Accédez directement au projet Webflow avec tous les filtres, la structure CMS et l’intégration Finsweet déjà configurés.
Clonez le projet Webflow

Explorez-le, décortiquez-le, et appropriez-vous-le.

Étape 1 : Créez votre structure CMS

Configurez le CMS Webflow avec les collections que vous souhaitez filtrer.

• Collection principale : par exemple, une collection “Offres d’emploi” (avec des champs
  comme Nom, Département, Localisation).
• Collections de référence : créez des collections distinctes pour les départements,
  localisations, etc.
• Dans la collection principale, ajoutez des champs de référence qui pointent vers ces collections de filtre.

Pourquoi utiliser des valeurs dynamiques dans les balises <option> ?
Cela évite d’ajouter des valeurs en dur. Vos filtres resteront automatiquement synchronisés avec le contenu CMS —
mis à jour automatiquement, plus faciles à gérer, et durables.

Étape 2 : Construisez le filtre et la liste de résultats dans Webflow

Section de filtre :

• Ajoutez un bloc de formulaire — Webflow exige un formulaire pour que l’élément <select>
  fonctionne correctement.
• À l’intérieur, ajoutez un composant Dropdown.
• Dans le menu du dropdown, insérez un élément personnalisé (Custom Element).
  • Définissez son tag sur select.
  • Attribuez-lui un nom (par exemple, department).
  • À l’intérieur de <select>, ajoutez un autre élément personnalisé avec le tag
    option.
    • Important : ajoutez un attribut value vide (par ex. value="").
      C’est nécessaire pour que le filtre Finsweet fonctionne.

Lier dynamiquement les options :

• Ajoutez une liste de collection (Collection List) juste après votre élément
  <option> personnalisé.
• Liez-la à votre collection de référence (ex. : départements).
• Dans chaque élément de collection :
  • Ajoutez un Custom Element avec le tag option.
  • Liez l’attribut value au champ CMS référencé (ex. : nom du département).
  • Affichez dynamiquement le texte du label.

Liste de résultats :

• Dans une autre section ou div, ajoutez une nouvelle liste de collection.
• Liez-la à votre collection principale (par ex. “Offres d’emploi”).
• Affichez dynamiquement les champs :
  • Titre de l’offre
  • Département (via champ de référence)
  • Localisation
• Stylisez la présentation comme vous le souhaitez.

Étape 3 : Appliquez les attributs Finsweet Custom Form Select

• Suivez la documentation de Finsweet sur fs-selectcustom-element pour appliquer
  les bons attributs.
• Le premier <option> doit avoir un attribut value vide
  (value="") — c’est le filtre « Tous ».

Améliorations UX possibles :

• Utilisez fs-customselect-reset, fs-customselect-hideinitial, etc.
• Ajoutez une hauteur fixe, une liste scrollable, une barre de défilement pour améliorer l’expérience.

Étape 4 : Connectez les filtres à la liste CMS avec Finsweet

• Appliquez les attributs fs-list-element depuis la documentation Finsweet :
  • Ajoutez fs-list-element="filters" au conteneur du formulaire de filtre.
  • Ajoutez fs-list-element="list" à la liste CMS des éléments filtrés.
  • Ajoutez fs-list-field="IDENTIFIANT" à l’élément <select> —
    où IDENTIFIANT correspond au champ CMS utilisé (ex. : department).
  • Assurez-vous que <select> possède un attribut name —
    c’est requis pour que le filtre fonctionne.

Étape 5 : Publiez et testez votre site

• Cliquez sur Publier pour prévisualiser en ligne.
• Testez le comportement du filtre.
• Affinez les détails UX : boutons de réinitialisation, états de chargement, etc.