Radio button Webflow : ajouter et personnaliser un bouton radio

Qu'est-ce qu'un radio button ?

Un radio button (bouton radio) est un champ de formulaire HTML, l'élément input de type radio, qui permet de choisir une seule option dans un groupe. Les boutons d'un même groupe partagent le même attribut name : cocher l'un décoche les autres, comme le détaille la documentation MDN sur input type radio.

Comment ajouter un radio button dans Webflow ?

1. Ajoutez un formulaire. Ouvrez le panneau Add (touche A), catégorie Forms, et glissez un Form Block sur la page. Tout champ doit se trouver à l'intérieur d'un Form Block.
2. Ajoutez la question. Placez un texte ou un Label qui pose la question (« Quel est votre délai ? »).
3. Glissez un Radio Button depuis la même catégorie Forms, puis dupliquez-le autant de fois qu'il y a d'options. Modifiez le libellé affiché de chaque option directement sur le canvas.
4. Réglez chaque bouton dans le panneau Settings de l'élément (voir ci-dessous) : même Group name pour toutes les options, un Choice value distinct pour chacune.
5. Publiez et testez en envoyant le formulaire depuis le site publié, puis vérifiez la valeur reçue dans les soumissions du formulaire.

Les réglages d'un radio button Webflow

Selon l'aide Webflow sur les checkboxes, radio buttons et selects (mise à jour le 10 août 2026), les paramètres du champ radio sont les suivants.

Attention au piège signalé par Webflow : un bouton marqué Required sans Group name doit lui-même être coché pour que le formulaire parte. Renseignez toujours le Group name en premier.

Comment personnaliser un radio button sur Webflow ?

Méthode native : le style Custom et l'état Checked

1. Sélectionnez le bouton radio, ouvrez ses Settings et choisissez Custom dans le réglage Style.
2. Dans le Style panel, donnez une classe au cercle, puis réglez taille (par exemple 1.25rem), bordure, rayon de 50 % et couleur de fond.
3. Ouvrez le menu des états (States) à côté du sélecteur et choisissez Checked : définissez l'apparence cochée (couleur de fond, bordure épaisse ou point central).
4. Choisissez l'état Focused et gardez un contour bien visible pour la navigation au clavier.
5. Si vous réutilisez la classe sur un autre bouton, vérifiez que celui-ci est aussi réglé sur Custom, sinon le style ne s'applique pas.

Option rapide : accent-color en CSS

Si vous voulez seulement changer la couleur du bouton natif, gardez le style Default et ajoutez une règle CSS dans le code personnalisé du site ou un Code Embed : input[type="radio"] { accent-color: #1a1a1a; }. La propriété accent-color (MDN) est prise en charge par les navigateurs actuels et conserve le comportement natif du champ.

Option avancée : des cartes cliquables

Pour transformer chaque option en carte (icône, titre, description), placez le bouton radio et son contenu dans le même label, puis stylisez la carte. Le clic sur toute la carte coche l'option. Pour que la carte change d'apparence quand elle est sélectionnée, une ligne de CSS suffit dans les navigateurs actuels : .radio-card:has(input:checked) { border-color: #1a1a1a; }. Évitez de recréer le comportement en JavaScript : le champ natif gère déjà la sélection, le clavier et l'envoi.

Sur les formulaires de contact que nous construisons chez Synqro, nous réservons les boutons radio aux questions de qualification courtes (type de projet, délai), et nous passons à une liste déroulante au-delà de cinq options pour garder un formulaire compact sur mobile.

Rendre un radio button accessible

• Regroupez les options sous une question explicite. Le tutoriel du W3C sur le regroupement des champs recommande un fieldset avec une legend, que les lecteurs d'écran annoncent avant chaque option. Dans Webflow, cela passe par un Code Embed ou par des attributs personnalisés (role="radiogroup" et aria-labelledby sur le conteneur).
• Gardez le libellé cliquable : dans l'élément Radio Button de Webflow, le texte est déjà lié au champ.
• N'ajoutez pas aria-checked sur un input radio natif : le navigateur transmet déjà l'état coché. Cet attribut ne sert que pour un faux bouton construit en div.
• Testez au clavier : Tab entre dans le groupe, les flèches passent d'une option à l'autre, la barre d'espace coche l'option active.
• Vérifiez le contraste du cercle et de l'état Focused sur votre fond. Plus de règles dans notre guide de l'accessibilité web.

Les erreurs fréquentes

• Plusieurs options cochables en même temps : le Group name diffère d'un bouton à l'autre.
• Le style ne s'applique pas : le réglage Style est resté sur Default.
• Des valeurs illisibles dans les soumissions : le Choice value n'a pas été renseigné.
• Un contour de focus supprimé pour des raisons esthétiques, qui rend le formulaire inutilisable au clavier.

Un formulaire court et clair compte autant que le design du bouton. Pour l'intégrer dans une page de conversion, voir notre guide pour créer une landing page sur Webflow. Et si vous voulez des formulaires sur mesure reliés à votre CRM, l'équipe Webflow de Synqro peut s'en charger.