[Résolu] Contact form 7 : ajouter une image en CSS ?

Bonjour,

Dans mon site WordPress, j'ai un formulaire avec 3 boutons radios :
[radio radio-509 label_first use_label_element default:1 “Imprimante 1” “Imprimante 2” “Imprimante 3”]

Je voudrais ajouter une image pour illustrer chaque imprimante. Je suis tombée sur ce sujet https://stackoverflow.com/questions/54426310/contact-form-7-add-image-to-every-single-radio-input/54427320

Mais je ne vois pas dans mon cas, comment attribuer une classe à chaque valeur pour lui mettre une image en background ou en ::before ou autre.

Pouvez-vous m'aider ?
Merciiiiii et bonne journée
Marine

Salut,

Et ouais si tu rajoute une class il la met sur le wrapper...
Alors soit tu passes par :

.wpcf7-list-item:nth-child(1) { }

Mais c'est peut etre pas ouf.. soit tu peux séparer les radio bouton du moment que tu laisses le même name :

[radio radio-509 label_first use_label_element default:1 class:print1 "Imprimante 1"]
[radio radio-509 label_first use_label_element class:print2 "Imprimante 2"]
[radio radio-509 label_first use_label_element class:print3 "Imprimante 3"]

Ca rajoute un wrapper autour de chaque champs c'est pas hyper beau ou efficient mais tu peux mettre les classes que tu veux et limite éviter les :before

Bonne journée

[EDIT] J'avais oublié les classes dans l'exemple
Modifié par _laurent (15 Mar 2021 - 11:58)

Effectivement cette seconde solution est mieux car j'ai pas mal d'autres formulaires dans le site donc nth-child risque de mettre le bazar.

Je viens de séparer les boutons ils apparaissent les uns au dessous des autres.
Pour les mettre côte à côte, j'enrobe le tout d'un div avec un display: flex ?

Et pour mettre l'image au dessus de chaque libellé, tu ferais comment ? Je suis un peu perdue...
Merciiiii

Newki75 a écrit :
Je viens de séparer les boutons ils apparaissent les uns au dessous des autres.
Pour les mettre côte à côte, j'enrobe le tout d'un div avec un display: flex ?

Ecris comme ça il rajoute des <br> a chaque saut de ligne. Si tu ne les veux pas ecris tout à la suite :

[radio radio-509 label_first use_label_element default:1 class:print1 "Imprimante 1"][radio radio-509 label_first use_label_element class:print2 "Imprimante 2"][radio radio-509 label_first use_label_element class:print3 "Imprimante 3"]

Et sinon un wrapper autour n'es jamais de trop oui :

<div class="wrapper">
[radio radio-509 label_first use_label_element default:1 "Imprimante 1"][radio radio-509 label_first use_label_element "Imprimante 2"][radio radio-509 label_first use_label_element "Imprimante 3"]
</div>

Newki75 a écrit :
Et pour mettre l'image au dessus de chaque libellé, tu ferais comment ? Je suis un peu perdue...

heu je vois pas trop ce que tu veux dire mais si tu veux que l'image soit cliquable il faudra la rajouter sur le label ou un élément à l'intérieur (background image, ::before ou ::after...)

Merci _laurent, les images vont être là pour illustrer chaque radio button qui comprendre le texte et un prix donc je vais utiliser le calculator Contact Form 7. Je vais tester avec 3 colonnes.

Merci !