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.
Partager