[Résolu] Personnaliser champ radio avec des images avec Contact Form 7 (Créer un compte)

Salut, cela peut se faire via CSS avec un peu d’astuce, le principe et de masquer l’input et de se servir du label pour afficher l’image.

J’ai fait ce genre de chose dans cette boutique avec les variations produits.

Si tu n’y connais rien en CSS c’est un peu compliqué, petites explications :

1 – J’ai ajouté ce champ de boutons radio à mon formulaire CF7 :

[radio image-radio use_label_element default:1 "Moto" "Auto" "Bus" "Tram"]

Note que je l’ai appelé « image-radio » ce qui ajoute la classe CSS .image-radio.

2 – Je masque les inputs boutons radio avec cette règle CSS :

.image-radio input[type="radio"] {
	display: none;
}

3 – Je donne des dimensions au pseudo Label qui sont en réalité des span.wpcf7-list-item-label avec cette règle CSS :

.image-radio .wpcf7-list-item-label {
	cursor: pointer;
	border:solid 2px #ccc;
	border-radius:15px;
	padding: 100px 40px 40px 40px;
	height: 100px !important;
	background-color: #fff;
	display: block;
	opacity: 0.45;
}

L’opacité à 0.45 met les boutons image en fondu sur le fond pour être moins présent, on va les mettre en surbrillance au survol et lorsque l’input et sélectionné.

4 – Je met en surbrillance les boutons image selon que je les survole ou que l’input est sélectionné avec cette règle :

.image-radio input[type="radio"]:checked + span.wpcf7-list-item-label, .image-radio .wpcf7-list-item-label:hover {
	opacity: 1 !important;
	color: #000;
	border:solid 2px #000;
}

Tu peux changer la couleur de l’intitulé du bouton à ce stade.

5 – J’ajoute pour chaque bouton une image d’arrière-plan au span.wpcf7-list-item-label selon la valeur de l’input qui reprend les noms de tes choix des boutons radio (syntaxe identique) avec ces 4 règles dans mon exemple :

.image-radio input[value="Moto"] + span.wpcf7-list-item-label {
	background: transparent url("http://wordpress.local/wp-content/uploads/2020/11/picto-moto.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="Auto"] + span.wpcf7-list-item-label {
	background: transparent url("http://wordpress.local/wp-content/uploads/2020/11/picto-auto.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="Bus"] + span.wpcf7-list-item-label {
	background: transparent url("http://wordpress.local/wp-content/uploads/2020/11/picto-bus.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="Tram"] + span.wpcf7-list-item-label {
	background: transparent url("http://wordpress.local/wp-content/uploads/2020/11/picto-tram.jpg") no-repeat scroll center 25px;
}

Bonjour,
Je ne sais pas si je peux ré ouvrir ce message, qui m’intéresse beaucoup.  J’ai tenté la manipulation en vain. Vu que le message date, je ne sais pas si c’est toujours d’actualité.

Serait-il possible d’avoir un petit coup de pouce ?

P.S : dans mon cas, après avoir remplacer l’url des images dans le CSS et avoir mis le reste du code, il ne se passe rien (la mise en page du formulaire reste par défaut, avec le texte et sans image