Tableau Contact form 7 et CSS

**Gilles_75** · 30/08/2018, 11h33

Bonjour

J'ai un souci sur un Tableau créé via le plugin ContactForm7
Tout s'affiche parfaitement mais je n'arrive pas à optimiser la largeur du Tableau , de la ligne (TR) ou de la cellule (TD)
Mon Tableau se trouve ici
J'aimerais obtenir moins d'espace entre les celules afin que mon Tableau soit mieux "tassé" au centre
Voici mon code HTML

Code HTML :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<table  >
<tr  >
<td>
<p class=texte_param_form>
Civilité <span class=texte_aste> *</span>
[radio your-MR class:choix_box_guide  label_first default:1 "Mr" "Mme" "Mlle"] 
</p>
</td>
</tr>
 
<tr>
<td>
<p class=texte_param_form>  
Prénom <span class=texte_aste> *</span>    
[text* your-firstname class:name_firstname_form] 
</p>
</td>     
 
<td>
<p class=texte_param_form> 
Nom <span class=texte_aste> *</span> 
[text* your-name class:name_firstname_form]   
</p>
</td>   
 
</tr>
 
<tr>
<td>
<p class=texte_param_form> 
E-mail <span class=texte_aste> *</span>     
[email* your-mail class:email_form]  
</p>
</td>   
 
<td>
<p class=texte_param_form>  
N° téléphone  
[tel your-tel class:tel_form]     
</p>
</td>     
</tr>
 
<tr>
<td>
<p class=texte_param_form>  
Pays de résidence <span class=texte_aste> *</span>    
[select* country-home class:pays_form include_blank
"France" 
"Afghanistan"                 
"Afrique Centrale"	          
] 
</p>
</td>
</tr>
 
<tr>
<td>
<p class=texte_param_form> 
Pays de recherche <span class=texte_aste> *</span>    
[select* your-pays-guide class:pays_form include_blank 
"Albanie"
"Algérie"
 ]      
</p>
</td> 
 
<td>
<p class=texte_param_form>
Région/ville/lieu recherché 
[text your-lieu-guide class:region_ville_form]      
</p>
</td>
</tr>
 
<tr>
<td>
<p class=texte_param_form> 
Début visite <span class=texte_aste> *</span> 
[date* day-deb class:date_form date-format:dd/mm/yy min-date:0 first-day:1]
</p>
</td>  
<td>
<p class=texte_param_form> 
Fin visite <span class=texte_aste> *</span> 
[date* day-fin class:date_form date-format:dd/mm/yy min-date:0 first-day:1]
</p>
</td>  
</tr>
 
<tr>
<td>
<p class=texte_param_form> 
 Combien de personnes <span class=texte_aste> *</span> 
[number* your-number-guide class:number_form  min:1 max:21 include_blank  ]
</p>
</td>
 
<td>
<p class=texte_param_form>
Langue(s) parlée(s) <span class=texte_aste> *</span>
[checkbox* your-langue class:choix_box_form label_first "Français" "Anglais" "Espagnol" "Allemand" "Italien"]    
</p>
</td>
</tr>
 
<tr>
<td>
<p class=texte_param_form >
Message 
[textarea your-message-guide class:message_form]
</p>
</td>
</tr>
 
<tr>
<td>
[recaptcha] 
</td> 
</tr>
 
<tr>
<td>
[submit "Envoyer" ]
</td>
</tr>
 
</table>

Et voici mon code CSS

Code :

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
/* ******************************************** */
/* Enlever bordures sur Tableaux des formlaires */
/*                                              */
/* ******************************************** */
 
.wpcf7 form table  {
border:0  !important;
border-spacing: 0 !important;
margin-left: auto !important;	
margin-right: auto !important;	
}
 
.wpcf7 form tr  {
border:0  !important;
}
 
.wpcf7 form td  {
border:0  !important;
width:33% 	!important;
}

J'ai essayé de rajouter un paramétrage width mais ça ne change rien

Voir en pj comment j'aimerais ajuster le Tableau

Merci pour votre aide

**mathieu** · 30/08/2018, 12h30

pouvez-vous rajouter des capture d'écran pour montrer ce que vous avez pour le moment et ce que que vous souhaitez obtenir ?

Invité · 30/08/2018, 13h32

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.wpcf7 .wpcf7-form table td {
    padding: 0 5px;
}
.wpcf7 .wpcf7-form .wpcf7-form-control {
    padding: 8px 5px !important;
    height: auto !important;
    width: 90% !important;
}

**Gilles_75** · 30/08/2018, 13h46

Envoyé par jreaux62

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.wpcf7 .wpcf7-form table td {
    padding: 0 5px;
}
.wpcf7 .wpcf7-form .wpcf7-form-control {
    padding: 8px 5px !important;
    height: auto !important;
    width: 90% !important;
}

Merci beaucoup !

**Gilles_75** · 30/08/2018, 13h59

Cela fonctionne bien mais le souci est que je perd le formatage spécifique des cellules
par exemple pour la cellule prénom

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.name_firstname_form {
height: 1.25rem  !important;
width: 12.50rem  !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}

Invité · 30/08/2018, 14h16

OK.

Au cas où tu ne sais pas : on peut voir le CSS appliqué (entre autres) en cliquant sur la touche "F12" du clavier.

Par exemple, on voit :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.wpcf7 form td {
    border: 0 !important;
    width: 33% !important;
}

Donc, le formulaire est prévu pour 3 colonnes. Or, le tien n'en fait que 2.

Si tu veux 2 colonnes, rajoute :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.wpcf7 form.wpcf7-form td {
    width: 45% !important;
}

Quant aux largeur pré-formatée... elles ne sont pas terribles.
Il vaut mieux utiliser ce que j'ai donné.

Pour des input spécifiques (par exemple "Combien de personnes"), on peut rajouter une règles :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-number {
    width: 50% !important;
}

A toi d'adapter au mieux.

**Gilles_75** · 30/08/2018, 14h31

En effet, le souci est comme expliqué avec la pj
Que quand on ajoute tes modifs les cellules se positionnent bien mais elles sont toutes formatés de la m^me façon ( hauteur et longueur )
mon css de formatage des cellule n'est pas pris en compte