Tableau Contact form 7 et CSS

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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

30/08/2018, 12h30
mathieu

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

Bonjour,

Code:

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

30/08/2018, 13h36
Gilles_75

Citation:

Envoyé par mathieu

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

J'ai ajouté une pièce jointe

Citation:

Envoyé par jreaux62

Bonjour,

Code:

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 !

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

Code:

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

30/08/2018, 14h16
Invité
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:

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:

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:

1 2 3 .wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-number { width: 50% !important; }
A toi d'adapter au mieux.
30/08/2018, 14h31
Gilles_75

1 pièce(s) jointe(s)

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

Citation:

Envoyé par Gilles_75

...mais elles sont toutes formatés de la même façon ( hauteur et longueur ).

Ben oui, c'est le but.
C'est plus esthétique et ergonomique comme ça.

A la rigueur, tu peux diminuer les input "date" et "number" (comme je l'ai écrit plus haut).

QUESTION :

c'est TOI qui a décidé de les mettre dans une <table> ??
Car ce n'est pas du tout une bonne idée...

Une mise en page avec <div> est recommandée.

Voici un exemple simple : (voir ici)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
    <label> Votre nom <em>(obligatoire)</em>
    [text* your-name] </label>
 
    <label> Votre adresse de messagerie <em>(obligatoire)</em>
    [email* your-email] </label>
 
    <label> Votre téléphone
    [tel your-tel] </label>
</div>
<div>
    <label> Objet du message
    [text your-subject] </label>
 
    <label> Votre message <em>(obligatoire)</em>
    [textarea* your-message] </label>
</div>
<div>
    [submit "Envoyer"]
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* -------------------------------------- */
/* ------------ FORMULAIRES ------------- */
@media screen and (min-width: 801px) {
	.entry-content form > div { float:left; width:50%; } /* 2 colonnes sur desktop (>= 801px) */
}
.entry-content form label input, .entry-content form label select, .entry-content form label textarea { margin-top:10px; }
.entry-content form select, .entry-content form textarea, .entry-content form input[type="text"], 
.entry-content form input[type="email"], .entry-content form input[type="url"], .entry-content form input[type="password"], 
.entry-content form input[type="search"], .entry-content form input[type="tel"] { 
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px; width: 90%; 
}
/* bouton submit */
.entry-content form input[type="submit"] { margin-top:15px; padding:20px 30px; font-weight:bold; min-width:25%; 
font-size:120%; color:rgba(30,107,194,1);/*bleu VHS*/ background-color:rgba(30,107,194,0.2);
}
.entry-content form input[type="submit"]:hover { box-shadow:0 0 0 transparent;
color:#fff !important; background-color:rgba(30,107,194,1);/*bleu VHS*/
}
/* ------------ PAGE CONTACT ------------ */
/* Formulaire CONTACT */
.entry-content form.wpcf7-form input[type="submit"] { min-width:90%; }

1 pièce(s) jointe(s)

Rendre responsive sur Mobile le Formulaire

J'ai réussi a construire mon formulaire de façon plus propre en utilisant l'option Table plutôt que div

Vous pouvez voir le formulaire ICI

Le souci c'est que le formulaire n'est pas du tout responsive sur Mobile
Je ne sais pas quoi coder aprés le code

Code:

@media screen and (max-width:868px) {

Merci pour votre aide

Voici le code HTML

Code:

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
<table  >
<caption class=texte_caption_form>Les champs marqués d’une <span class=texte_aste> *</span> sont obligatoires </caption>
<tr>
<td class=texte_param_form>
Civilité <span class=texte_aste> *</span>
[radio your-MR class:choix_box_form  label_first default:1 "Mr" "Mme" "Mlle"] 
</td>
</tr>
 
<tr>
<td class=texte_param_form>  
Prénom <span class=texte_aste> *</span>    
[text* your-firstname class:name_firstname_form] 
</td>     
 
<td class=texte_param_form> 
Nom <span class=texte_aste> *</span> 
[text* your-name class:name_firstname_form]   
</td>   
</tr>
 
 
 
<tr>
<td class=texte_param_form> 
E-mail <span class=texte_aste> *</span>     
[email* your-mail class:email_form]  
</td>   
 
<td class=texte_param_form> 
N° téléphone  
[tel your-tel class:tel_form]     
</td>     
</tr>
 
<tr>
<td class=texte_param_form> 
Pays de résidence <span class=texte_aste> *</span>    
[select* country-home class:pays_form include_blank
"France" 
"Afghanistan"    
 ] 
</td>
</tr>
 
<tr>
<td class=texte_param_form> 
Pays de recherche <span class=texte_aste> *</span>    
[select* your-pays-guide class:pays_form include_blank 
"Albanie"
"Algérie"
 ]      
</td> 
 
<td class=texte_param_form> 
Région/ville/lieu recherché 
[text your-lieu-guide class:region_ville_form]      
</td>
</tr>
 
<tr>
<td 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]
</td>  
<td 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]
</td>  
</tr>
 
<tr>
<td 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  ]
</td>
 
<td 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"]    
</td>
</tr>
 
<tr>
<td colspan="2"  class=texte_param_form>
Message 
[textarea your-message-guide class:message_form]
</td>
</tr>
 
<tr>
<td>
[recaptcha] 
</td> 
</tr>
 
<tr>
<td colspan="2">
[submit "Envoyer" ]
</td>
</tr>
 
</table>

Et voici le code CSS

Code:

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
/* ******************************************** */
/* Paramétrer les textes                        */
/* ******************************************** */
.texte_aste {
font-weight: bold  !important;
color: red !important;
}
 
.texte_param_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: 3.125rem  !important;
font-size: 1.000rem  !important;
font-family: "Arial"  !important;
text-align: left  !important;
color: #0C376C !important;
font-weight: bold !important;	
}
 
.texte2_param_form {
font-size: 0.650rem  !important;
font-weight: normal !important;	
font-style: italic !important;	
}
 
.texte_caption_form {
text-align: left  !important;
}
/* ******************************************** */
/* Paramétrer le bouton submit                  */
/* du formulaire Recherchez un guide            */
/* ******************************************** */
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-submit {
    width: 30% !important;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background-color: #0C376C  !important;
color: #FD9F19   !important;
border-radius: 15px  !important; /* Coins arrondis */
cursor:pointer   !important; 
padding-left:2.000rem  !important; 
padding-right:2.000rem   !important; 
font-weight: bold  !important;
font-size: 1.250rem  !important;
 
}
 
input.wpcf7-form-control.wpcf7-submit {
background-color: #FD9F19 !important;
color: #0C376C !important;
border-radius: 15px !important; /* Coins arrondis */
cursor:pointer   !important; 
padding-left:2.000rem  !important; 
padding-right:2.000rem   !important; 
font-weight: bold  !important;
font-size: 1.250rem  !important;
}
 
/* ******************************************** */
/* Paramétrer le tableau                        */
/* ******************************************** */
 
.wpcf7 .wpcf7-form table
{
    background-color: #f7f7f7 !important;
    border: 2px solid #0C376C !important;
	width: 70% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
 
.wpcf7 .wpcf7-form table td {
    padding-left: 10px !important;
	width: 40% !important;
	vertical-align: top !important;
}
 
 
 
/* ******************************************** */
/* Paramétrer les cellules input                */
/* ******************************************** */
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.name_firstname_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-email.email_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-tel.tel_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-select.pays_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.region_ville_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-date.date_form {
width: 6.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;
}	
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-number.number_form {
width: 4.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;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-textarea.message_form {
width: 25.625rem  !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;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text.langue_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-url.web_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-url.reseau_form {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}
 
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-radio.choix_box_guide {
margin-top: 0px !important;
margin-bottom: 0px !important;
font-size: 0.850rem  !important;
font-family: "Arial"  !important;
text-align:	justify   !important;
color: #0C376C !important;
}