- WordPress :6.3
- Statut : résolu
- Ce sujet contient 15 réponses, 2 participants et a été mis à jour pour la dernière fois par
ferman, le il y a 1 année et 2 mois.
-
AuteurMessages
-
24 novembre 2023 à 23 h 22 min #2463883
Bonjour,
Ma configuration WP actuelle : 6.4.1
- Version de PHP/MySQL : Php 8.0.30
- Thème utilisé : Blocksy pro
- Extensions en place : blocksy pro, contact form 7, duplicate page, elementor, wp umbrella, wp forms (en attendant d’arriver à trouver la solution avec CF7), Yoast SEO, WP code lite
- Nom de l’hébergeur : o2switch
- Adresse du site : lela3644.odns.fr (pre-production)
Problème(s) rencontré(s) :
Bonsoir,
J’aimerai transformer les boutons radio à choix unique du formulaire par des images à sélectionner, à la manière de ce qu’on peut voir ici (mais avec CF7 car WPforms ne me permet pas de mettre en place des champs d’upload en version gratuite, contrairement à CF7 : https://www.lela3644.odns.fr/devis-en-ligne/
Une recherche sur google m’a permis de tomber sur cet ancien message du forum : https://wpfr.net/support/sujet/personnaliser-champ-radio-avec-des-images-avec-contact-form-7/#post-2463829
Ma tentative se trouve ici : https://www.lela3644.odns.fr/test-devis/
Voici le code complet ajouté dans mon Custom CSS :
input.image-radio {
height: 135px;
width: 135px;
display: block; /* You Can remove display block, since your buttons are already stacked */
}
input.image-radio:after {
background-image: url('https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg');
content: '';
width: 135px;
height: 135px;
display: inline-block;
background-size: cover;
margin-left: 35px;
}
.image-radio input[value="A"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="B"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-quart-tournant.jpg") no-repeat scroll center 25px;
}
.image-radio input[type="radio"] {display: none;}
.image-radio .wpcf7-list-item-label {
cursor: pointer;
border:solid 2px #ccc;
border-radius:15px;
padding: 100px 40px 40px 40px;
height: 135px !important;
background-color: #fff;
display: block;
opacity: 0.45;
}
.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;
}
.image-radio input[value="A"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="B"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-quart-tournant.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="C"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-2-quart-tournant.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="D"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-rond.jpg") no-repeat scroll center 25px;
}
.image-radio input[value="E"] + span.wpcf7-list-item-label {
background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-carre.jpg") no-repeat scroll center 25px;
}Mais il ne se passe rien et j’avoue ne pas savoir de quel côté çà coince. Le message datant, j’imagine que ce code ne fonctionne peut-être plus ?
On m’a conseillé d’ouvrir un nouveau message plutôt que de commenter l’ancien comme j’ai fait.En vous remerciant,
Laurent25 novembre 2023 à 9 h 51 min #2463885Bonjour,
Déjà ça ne peut pas marcher car dans vos CSS vous mentionnez une classe « .image-radio » qui n’existe pas. Si dans input.image-radio { height: 135px; width: 135px; display: block; /* You Can remove display block, since your buttons are already stacked */ } vous enlevez « .image-radio » vous verrez un effet.
Je n’ai pas réexaminé tout le code. Ci-dessous quelques exemples avec un autre code, si ça vous intéresse. (voir pj) Soit vous gardez la valeur A, B, C…soit pas.
/*commun à tous les exemples: on cache les boutons-radio*/
.wpcf7-list-item input{
visibility:hidden;
}
/*Exemple 1 On met une image avant la valeur (A). Dans ce cas l'image doit être prédimensionnée*/
.wpcf7-list-item:nth-child(1) span.wpcf7-list-item-label:before{
content:url("https://www.lela3644.odns.fr/wp-content/uploads/2023/10/escalier-metal-bois-64-img2-150x150.jpg");
visibility:visible;
}
/*Exemple 2 On met une image de fond on conserve ou pas (color:transparent) la valeur B.*/
/*L'image se redimensionne toute seule*/
.wpcf7-list-item:nth-child(2) span.wpcf7-list-item-label {background-image:url("https://www.lela3644.odns.fr/wp-content/uploads/2023/10/escalier-metal-bois-64-img2-150x150.jpg");
visibility:visible;
background-size: cover;
color:transparent;
border-style:solid;
border-width:1px;
}
/*Exemple 3: comme exemple 2 style un peu différent.*/
.wpcf7-list-item:nth-child(3) span.wpcf7-list-item-label {background-image:url("https://www.lela3644.odns.fr/wp-content/uploads/2023/10/escalier-metal-bois-64-img2-150x150.jpg");
visibility:visible;
background-size: cover;
color:transparent;
border-style:solid;
border-width:1px;
border-color:red;
border-radius:10px
}Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.25 novembre 2023 à 10 h 42 min #2463888Autrement, avec votre code modifié comme dit plus haut ( si vous enlevez les .image-radio) je pense que vous aurez en gros ce que vous souhaitez. qui est différent de ce que je vous proposais. Vous avez le choix.
-
Cette réponse a été modifiée le il y a 1 année et 2 mois par
ferman.
28 novembre 2023 à 14 h 37 min #2464058Bonjour @ferman
Merci pour ce retour. Le grain de sable était sous mes yeux sans que j’arrive à le voir. En fait l’ensemble du code était bon, c’est la définition de la class sur la ligne du bouton radio qui semble avoir changé. Sur le message original, on peut lire :
[radio image-radio use_label_element default:1 "Moto" "Auto" "Bus" "Tram"]
AvantAlors que maintenant, l’équivalent doit être :
[radio vehicules class:image-radio use_label_element default:1 "Moto" "Auto" "Bus" "Tram"]
MaintenantDu coup j’ai pu reprendre le code dont le rendu me convient très bien. J’ai peaufiné un peu en fonction de mes besoins. J’ai mis le résultat ici : lela3644.odns.fr/devis-en-ligne/
Par contre, hormis ce champ avec les images, tous les autres boutons radio ne semblent pas fonctionner (impossible à cliquer dessus) :-/
28 novembre 2023 à 18 h 17 min #2464080Bonjour, dans votre code vous avez une ligne « display-none » qui empêche l’affichage de tous les boutons radio. Il faut limiter le champ d’application de cette règle (voir code ci-dessous)
/*ligne de votre code*/
.uael-cf7-style .wpcf7-radio input[type=radio] {
display:none
}
/*à remplacer par*/
.uael-cf7-style .wpcf7-radio input[type="radio"][name="image-radio"]{
display:none;
}
/*ajouter*/
#main .wpcf7-list-item-label:before{
border:none;
}Par contre vous avez un problème de html avec les boutons: Les boutons « Sens de la montée désiré » et ceux « Souhaitez-vous un garde-corps » ne sont pas indépendants donc vous ne pouvez pas sélectionner « Sens de la montée désiré » et « Souhaitez-vous un garde-corps « ; seulement l’un ou l’autre.
-
Cette réponse a été modifiée le il y a 1 année et 2 mois par
ferman.
28 novembre 2023 à 19 h 25 min #2464085Re,
En effet, j’avais oublié de nommer différemment « Garde-corps », merci. C’est corrigé.Je viens de modifier le code en reprenant le vôtre mais cela ne change rien (mis à part enlever les bordures autour). Toujours impossible de cliquer. Voici le contenu du code mis à jour.
Je n’avais pas dans mon code la classe suivante mais je l’ai ajouté :
.uael-cf7-style
input.image-radio {height: 135px; width: 135px;}
input.image-radio:after {
background-image: url('https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg');
content: '';
width: 135px;
height: 135px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
#main .wpcf7-list-item-label:before{
border:none;
}
.uael-cf7-style .wpcf7-radio input[type="radio"][name="image-radio"]{
display:none;}
.image-radio .wpcf7-list-item-label {cursor: pointer; border:solid 1px #ccc; margin:5px; padding: 135px 0px 0px 0px; height: 135px !important; width:135px !important; background-color: #fff; display: block; opacity: 0.45; text-align: center;}
.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 1px #000;}
.image-radio input[value="Escalier droit simple"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-droit-simple.jpg") no-repeat scroll center;}
.image-radio input[value="Escalier 1/4 tournant"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-quart-tournant.jpg") no-repeat scroll center ;}
.image-radio input[value="Escalier 2/4 tournant"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-2-quart-tournant.jpg") no-repeat scroll center;}
.image-radio input[value="Escalier hélicoïdal rond"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-rond.jpg") no-repeat scroll center;}
.image-radio input[value="Escalier hélicoïdal carré"] + span.wpcf7-list-item-label {background: transparent url("https://www.lela3644.odns.fr/wp-content/uploads/2023/11/devis-escalier-helicoidal-carre.jpg") no-repeat scroll center;}28 novembre 2023 à 19 h 28 min #2464086Je le craignais un peu mais j’espérais me tromper car c’était le plus simple (j’avais tort d’être optimiste). C’est que ce display-none apparaît aussi dans les CSS principales d’elementor (ici: /wp-content/plugins/ultimate-elementor/assets/min-css/uael-frontend.min.css , ligne 2800). Je ne sais pas pourquoi.
Il faut donc surmonter cette règle
- En demandant à ce que tous les input radio soient affichés.
- En masquant sélectivement les input radio radio-image.
Vous pouvez enlever le remplacement (garder la règle pour les bordures) et ajouter le code ci-dessous:
#main .uael-cf7-style .wpcf7-radio input[type=radio] {
display:inline-block;
}
#main .uael-cf7-style .wpcf7-radio input[type="radio"][name="image-radio"]{
display:none;
}Essayez, ça devrait fonctionner.
-
Cette réponse a été modifiée le il y a 1 année et 2 mois par
ferman.
29 novembre 2023 à 20 h 53 min #2464120Bonsoir @ferman,
Effectivement, cela fonctionne. Il reste encore un détail étrange, c’est l’affichage d’une ombre en décalé de chaque bouton radio. On le voit en zoomant, à droite de chaque « rond » radio, il y a un autre rond (très légèrement plus bas, en gris très très clair) et ils sont également présents sur les boutons radio avec images (à gauche de l’intitulé) (un peu plus visible lors du survol pour les radio avec image).
Un immense merci pour tout çà. Je ne pensais pas que çà serait si galère. Pour le coup, WP Forms est bien plus accessible (dommage que çà limite en version gratuite soit plus vite atteinte).
Si jamais vous voyez d’où provient ces « ombres », je reste bien entendu preneur.
Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.29 novembre 2023 à 23 h 36 min #2464127Vous avez vraiment l’œil acéré. J’ai failli me crever les yeux à essayer de repérer cet « autre rond » mais voila:
#main .wpcf7-radio input[type="radio"]:checked + span::before{
box-shadow:none;
}30 novembre 2023 à 0 h 32 min #2464133Je ne comprenais pourquoi il y avait autant de marge entre la case et le libellé, cela a attiré mon attention.
En ajoutant le code ci-dessus, cela fonctionnement uniquement pour l’option choisie (les ombres restent pour les autres).J’ai tenté de rajouter une autre pseudo-classe (:default et :blank) mais cela n’a aucun effet sur les options non choisies.
Laurent
30 novembre 2023 à 9 h 11 min #2464135Bonjour,
Enlevez simplement le :checked. C.a.d:
#main .wpcf7-radio input[type="radio"] + span::before {
box-shadow: none!important;
}et pour réduire les espaces essayez:
#main .wpcf7-list-item-label::before {
width: 0px;
}30 novembre 2023 à 10 h 28 min #2464141Cela fonctionne merci. Par contre, j’hésite au final à revenir en arrière car cela a affecté également le champ RGPD plus bas (checkbox), si bien qu’on ne voit plus du tout la case à cocher (on ne voit que le message) donc niveau UX, çà ne va pas.
J’ai tenté de lui donner un nom et une classe dans le formulaire CF7 puis de les appeler avec le code suivant dans le CSS mais cela n’a rien changé (j’avais indiqué une largeur grossière de 100px et une bordure rouge juste pour voir si çà fonctionnait) :
#main .wpcf7-radio input[type="checkbox"][name="rgpd"]{}
#main .rgpd::before {}30 novembre 2023 à 16 h 43 min #2464168Bonjour,
Par contre, j’hésite au final à revenir en arrière car cela a affecté également le champ RGPD plus bas.
Ça ne vient pas du code ajouté. C’est encore dans la feuille de style « uael-frontend.min.css » dans laquelle on trouve ce code entre les lignes 2798 et 2802:
Trois éléments sont masqués.
.uael-cf7-style .wpcf7-acceptance input[type=checkbox],
.uael-cf7-style .wpcf7-checkbox input[type=checkbox],
.uael-cf7-style .wpcf7-radio input[type=radio] {
display:none
}On en a déjà démasqué un:
#main .uael-cf7-style .wpcf7-radio input[type=radio] {
display:inline-block;
}Il faut maintenant démasquer celui des rgpd:
#main .uael-cf7-style .wpcf7-acceptance input[type=checkbox]{
display:inline-block;
}Et il y en un troisième dont on ne s’est pas occupé.
Bon, franchement il est anormal de devoir faire ce genre d’opérations de « démasquage ». En effet quand on supprime directement le code entre les lignes 2798 et 2802 (dans l’inspecteur Firfox), on voit exactement la même chose. Cela signifie que, au départ, les éléments apparaissent bien mais qu’ils sont masqués par Ultimate addons (je me demande bien pourquoi?) si bien que l’on doit les démasquer en défaisant ce qu’Elementor a fait. Ça n’a pas de sens. Je soupçonne un problème dans les CSS d’Elementor mais comme je ne l’utilise pas, je ne peux pas en dire plus. Vous devriez vérifier soigneusement de votre côté et regarder ce que vous avez paramétré.
-
Cette réponse a été modifiée le il y a 1 année et 2 mois par
ferman.
30 novembre 2023 à 20 h 44 min #2464183Je vois surtout que j’ai encore de beaux progrès à faire sur la compréhension globale. Vos retours sont vraiment instructifs.
UAEL est une extension d’elementor. Je n’avais jamais utilisé sur le même site CF7 et UAEL mais tout est clair maintenant. UAEL propose un widget pour différentes extensions de formulaires, dont CF7 – qui rajoutent tout un tas d’options de mise en forme etc… dont je n’avais pas besoin mais qui sont toutes actives par défaut!
J’ai donc pris le problème dans le bon sens, en désactivant les modules de formulaire d’UAEL et bien entendu, tout est rentré dans l’ordre.
Un immense et sincère merci pour tout ce temps accordé!
30 novembre 2023 à 20 h 48 min #2464184Cette réponse a été marquée comme privée. -
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.