IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Utilisation de GRID pour un formulaire de contact


Sujet :

Grille CSS (CSS Grid)

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    173
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 173
    Points : 80
    Points
    80
    Par défaut Utilisation de GRID pour un formulaire de contact
    Bonsoir,

    je voudrais styler un peu mon formulaire de contact ( contact form 7).
    sur le première ligne, d'un côté les infos( du type email, nom, prenom, ...), puis sur une deuxième colonne: le message.
    En dessous de cette première ligne, la case à cocher ( vous acceptez, ...etc )
    Enfin la dernière ligne: le bouton submit

    Alors , j'ai en html:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div class="contact-form-wrapper">
       <div class="contact-infos">...</div>
       <div class="contact-message">...</div>
       <div class="acceptance">...</div
       <div class="submit"></div>
    </div>


    J'ai rajouté les div dans mon code de wordpress: il y a dans ces div toutes les balises et classes de wordpress du contact form 7


    Et en css:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    .contact-infos {
            grid-area: contact_infos;
        }
        .contact-message {
            grid-area: contact_message;
        }
        .acceptance {
            grid-area: acceptance;
        }
        .submit {
            grid-area: submit;
        }
        .contact-form-wrapper {
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 
                "contact_infos contact_message"
                "acceptance acceptance"
                "submit submit";
        }

    Résultat: quelques défauts !
    La ligne acceptance est plus large que les deux blocs au-dessus ( elle dépasse de chaque côté )
    Et les infos ne prennent pas toutes la place: je voudrais que le dernier bloc () soit aligné avec la fin du bloc message
    Je pense que j'ai plus vite fais de modifier la taille du bloc message( ça je sais le faire !)
    Je vais aussi redéfinir la grille: plutôt 1fr 1fr 1Fr , pour que la partie message soit plus grande.

    J'avoue , mes compétences en grid s'arrètent là.
    S'il y a moyen de faire simple: c'est le but de mon post.
    J'ai posté sur le forum wordpress car, je me dis que d'autres que moi ont essayé avec wordpress et donc savent mieux que moi comment faire !
    Je vous mets des photos ( plus parlant )

    Merci,
    Bonne soirée,

    Laurent.
    Images attachées Images attachées   

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 487
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 487
    Points : 13 151
    Points
    13 151
    Par défaut
    le forum wordpress est plutôt là pour les soucis de développement en php des extensions ou des thèmes.
    pour vous j'ai l'impression que ça peut se régler directement avec du css donc demandez peut-être à un modérateur de déplacer votre message là :
    https://www.developpez.net/forums/f4...mise-page-css/

  3. #3
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    Bonjour,

    Je n'aime pas trop CSS Grid dans ce cas.
    C'est redondant, pas facile à écrire et pas souple.

    Je trouve que Flexbox serait beaucoup plus approprié. Voici un petit guide (en Anglais) : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Et voici un exemple que j'ai réalisé vite fait (j'ai mis des background-color afin qu'on voit mieux les colonnes ) https://codepen.io/DarkStar123456/pen/VwWVGgQ
    Les noms des classes est basé sur Bootstrap, et au moins il est réutilisable ^^

    C'est basé sur une grille à 12 colonnes. Donc si on veut la moitié du containeur, on écrit donc class="col-6".
    Dans les captures d'écran, j'imagine qu'il s'agit plutôt de 2/3 - 1/3
    Soit : col-8 (12 /3 = 4 * 2 = 8) & col-4 (12 /3 = 4 * 1 = 4)

  4. #4
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    173
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 173
    Points : 80
    Points
    80
    Par défaut
    Bonsoir,

    j'ai finalement réussi: un problème de gap ou chose dans le genre (j'ai tellement fait de choses aujourd'hui que je ne me souvient déjà plus ce que j'ai fait ce matin )
    Mais finalement , tout est rentré dans l'ordre ( comme j'imaginais que ça devait fonctionner ! )

    Ta solution est bien aussi, mais comme je suis sur wordpress et que je ne connais pas très bien bootstrap ( je débute alors je fais plus de CSS et HTML pour l'instant ).
    Après, wordpress rajoute déjà plein de balises et class de son cru, alors je préfère en rajouter le moins possible pour m'y retrouver

    Merci quand même, je ferais ça à l'avenir si je ne suis pas sous wordpress.

    P.S: effectivement , je ne suis pas sur le bon forum, mais j'ai toujours tendance à croire que si ça marche pas , c'est la faute de Wordpress plutôt que la mienne...

  5. #5
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 715
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 715
    Points : 2 457
    Points
    2 457
    Par défaut
    Bonjour,

    J'ai dit que les noms des classes étaient inspirés par Bootstrap mais j'ai écrit toute la CSS nécessaire donc pas de connaissances supplémentaires à avoir ;-)
    Flexbox est une fonctionnalité des navigateurs et non pas de Bootstrap

    Et vu que le CSS autant que l'HTML est rédigé par toi, ce n'est pas la faute de Wordpress :p

    Cependant, certains plugins viennent avec leur propre CSS qu'il est parfois plus simple de désactiver plutôt que d'écrire par dessus

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 08/10/2020, 15h14
  2. [CSS 3] Utilisation des Grids pour réaliser le design suivant ?
    Par thirt dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 27/08/2019, 09h17
  3. Problème avec le fichier PHP pour le formulaire de contact
    Par °°° Zen-Spirit °°° dans le forum Langage
    Réponses: 4
    Dernier message: 25/03/2011, 19h29
  4. Réponses: 4
    Dernier message: 19/01/2010, 22h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo