[Résolu] Contact Form 7 : mettre des images à des boutons radio (Créer un compte)

  • WordPress :6.3
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #2463883
    Insky
    Participant
    Initié WordPress
    40 contributions

    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,
    Laurent

    #2463885
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Bonjour,

    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.
    #2463888
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Autrement, 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 7 mois et 3 semaines par ferman.
    #2464058
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonjour @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"]
    Avant

    Alors que maintenant, l’équivalent doit être :

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

    Du 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) :-/

     

     

    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par Insky.
    #2464080
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Bonjour, 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 7 mois et 2 semaines par ferman.
    #2464085
    Insky
    Participant
    Initié WordPress
    40 contributions

    Re,
    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;}

    #2464086
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Je 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

    1. En demandant à ce que tous les input radio soient affichés.
    2. 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 7 mois et 2 semaines par ferman.
    #2464120
    Insky
    Participant
    Initié WordPress
    40 contributions

    Bonsoir @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.
    #2464127
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Vous 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;
    }

     

    #2464133
    Insky
    Participant
    Initié WordPress
    40 contributions

    Je 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

    #2464135
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Bonjour,

    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;
    }

    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par ferman.
    • Cette réponse a été modifiée le il y a 7 mois et 2 semaines par ferman.
    #2464141
    Insky
    Participant
    Initié WordPress
    40 contributions

    Cela 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 {}

     

    #2464168
    ferman
    Participant
    Maître WordPress
    7052 contributions

    Bonjour,

    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 7 mois et 2 semaines par ferman.
    #2464183
    Insky
    Participant
    Initié WordPress
    40 contributions

    Je 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é!

    #2464184
    Insky
    Participant
    Initié WordPress
    40 contributions
    Cette réponse a été marquée comme privée.
15 sujets de 1 à 15 (sur un total de 16)
  • Vous devez être connecté pour répondre à ce sujet.