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

  • WordPress :5.5
  • Statut : résolu
  • Ce sujet contient 5 réponses, 3 participants et a été mis à jour pour la dernière fois par Insky, le il y a 5 mois.
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #2358081
    AmelieL0016
    Participant
    Initié WordPress
    5 contributions

    Bonjour à tous,

    Je voulais lire le sujet « Comment ouvrir un nouveau sujet sur le forum? » mais impossible, le message suivant apparait : « Privé. Vous n’avez pas la permission de voir ce forum. ». Je signale au cas ou ce serait une erreur, cas inverse désolé si j’oublie quelque chose ; il ‘agit de ma première publication.

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.4.11
    • Thème utilisé : Celui par défaut, mais j’utilise Elementor
    • Extensions en place : Contact Form 7, Elementor
    • Nom de l’hébergeur : o2switch
    • Adresse du site : Non publié
    • Version de WordPress : Version 5.5.3

    Problème(s) rencontré(s) : 

    J’aimerai personnaliser le champ radio des formulaires Contact Form 7 avec des images et/ou images. (en résumé 🙂 

    Après avoir passé plusieurs jours étalé sur un bon mois, j’ai essayé des tutos en anglais, des plug-ins.. parfis pas loin du but, mais rien n’y fait, je n’ai jamais réussi. 🙁

    J’utilise Elementor pour faire mon site, superbes plug-ins pour construire son site, mais même sur ce dernier il n’y a pas de plug-in pour personnaliser ces fameux champs radio. ça à pourtant l’air si simple, mais impossible à faire.

    Voilà pourquoi je fais appel à vous la communauté ! Pouvez-vous m’aider ? Je vous remercie.

    Amélie 🙂

    • Ce sujet a été modifié le il y a 3 années et 5 mois par AmelieL0016.
    #2358086
    momofr@free.fr
    Modérateur
    Maître WordPress
    6892 contributions

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

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2358093
    momofr@free.fr
    Modérateur
    Maître WordPress
    6892 contributions

    Il faut penser à jouter une règle media queries pour le mobile dans ce style :

    span.wpcf7-list-item {
    margin: 0 5% 20px 5%;
    width: 40%;
    text-align: center;
    }

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2358121
    AmelieL0016
    Participant
    Initié WordPress
    5 contributions

    Hello Momo !

    WHAAA ! J’en étais sûr que ça pouvait se faire simplement en CSS ! Je bidouille pas mal, mais je n’étais pas arrivé à ça du tout.

    Après essais de tes lignes de code, je ne sais que dire, heureusement que j’étais déjà assise…

    Tout fonctionne à merveille, tu as tout bien expliqué, j’ai tout compris, c’est clair, concis, avec exemple à la clé et fichiers joints. J’espère que ces messages seront référencés pour tous celles et ceux qui comme moi ont galéré !! Vraiment un énorme merci, c’est même mieux que ce que je voulais.

    J’ai même ajouté ceci pour un petit effet de fondu : « transition-duration: 0.5s; » 🙂

    Merci beaucoup d’avoir pris le temps de me répondre, et de faire vivre cette communauté ! Top ! Vous avez solutionné en 10 minutes mes nombreuses heures d’essais et de tests peu concluants… belle récompense !! Merci merci merciiiiii je suis ravie 😀

    PS : le site de démonstration en plus est vraiment chouette ! Quel plaisir de voir des beaux sites ! Je suis pas loin de Bordeaux alors j’y passerai avec plaisir, j’adore le thé !

    Amélie L. 😀

    #2358139
    momofr@free.fr
    Modérateur
    Maître WordPress
    6892 contributions

    Salut Amélie, you are welcome! 🙂

    #2463829
    Insky
    Participant
    Initié WordPress
    40 contributions

    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

6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.