Comment personnaliser un radio button | Webflow Tutoriel

Tutoriel
3 min
Publié le Dec 15, 2021
Dernière mise à jour le
#webflow tuto avec des radios bouttons webflow
Résumez cet article avec une IA
Points clés de l'article

Vous avez ajouté un <!-- fs-richtext-ignore --><radio button> dans votre formulaire natif sur Webflow et vous souhaitez lui donner un design particulier ? C'est possible. Suivi le guide avec un "How to Webflow" en Français ! 🇫🇷

Rappel 1 : dans webflow, tout est possible (ou va le devenir 🚀)

Tutoriel Vidéo pour personnaliser un radio button Webflow

Tutoriel texte par étape

Étape 1 : Cliquez-sur l'élément <!-- fs-richtext-ignore --><radio button>

Sélectionner votre bouton et cliquer sur le cercle du radio bouton dans votre designer Webflow.

Étape 2 : Ouvrez les "Settings"

Cliquez-sur l'icône ⚙️ paramètre à droite de "Radio Button" qui ouvrira les paramètres propre à ce bouton .

Étape 3 : Changez le style pour "Custom"

Automatiquement, les boutons radio dans Webflow sont configurés avec un style par défaut activé. Pour pouvoir les designer, vous devez cliquer sur Custom. Passez facilement d'un style à l'autre en cliquant sur Custom ou defaut.

Étape 4 : Donnez un nom à cette classe

Vert, rouge, bleu, rose, jaune... grand ou petit ! Quelle est votre couleur préférée ? Laissez parler votre créativité :)

Étape 5 : Pensez à définir le style pour le mode "checked"

Ici vous pouvez définir le style lorsque que bouton est coché et la désactiver quand il n'est pas coché ✅

Voilà, vous n'avez plus qu'a créer des boutons captivants pour vos formulaires Webflow !

Envie d'en apprendre plus sur Webflow ? Retrouvez pleins de tutoriels Webflow en Français sur notre chaîne youtube 🍿

{{custom-blog-cta}}

Formation Webflow Gratuite
Commencer la formation
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Visuel promotionnel de Webflow Conf 2026 mettant en avant Lucas Clairet, finaliste dans la catégorie « Developer of the Year ». Son portrait en noir et blanc est placé devant un fond graphique abstrait aux couleurs bleu, orange, vert et rose, avec une identité visuelle moderne et contrastée. Le logo vertical de Webflow Conf ’26 apparaît à gauche, tandis que son nom et la mention « Finalist – Developer of the Year » sont affichés dans un encadré noir.
News
Webflow

Lucas Clairet finaliste des Webflow Awards 2026 dans la catégorie Developer of the Year

Lucas Clairet finaliste des Webflow Awards 2026 dans la catégorie Developer of the Year
Vue d’ensemble de Webflow AEO regroupant les recommandations IA, les analytics, le suivi des prompts et les optimisations SEO dans une interface unique.
Documentation
Webflow

Webflow AEO : l’Answer Engine Optimization directement intégré à la plateforme

Webflow AEO : l’Answer Engine Optimization directement intégré à la plateforme
Document de cadrage pour la refonte du site web intitulé « Brief » sur fond bleu marine
Documentation

Brief, cahier des charges et appel d'offres : cadrer sa refonte de site web et choisir la bonne agence

Brief, cahier des charges et appel d'offres : cadrer sa refonte de site web et choisir la bonne agence
Les meilleurs projets web
commencent par une conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.