Formulaire : mise en page après validation

**loucy** · 13/03/2009, 14h41

Bonjour,

Ne connaissant pas du tout le PHP, j'ai besoin d'aide.

J'ai inséré un formulaire PHP dans ma mise en page HTML en utilisant un code généré via un site internet.
Il fonctionne très bien au niveau technique (si un champ n'est pas complété, le message d'erreur apparait et après validation, je reçois bien les infos dans ma boîte mail) Pas de soucis à ce niveau là.

Mon problème apparaît après validation du formulaire par un utilisateur, à l'affichage du message de remerciement.

Le message apparaît mais ma mise en page est déformée.

Pour visualiser le problème : http://www.g-design.eu/test/probleme.html

J'ai comparé avec d'autres sites/codes mais ne trouve pas d'où vient le problème.

Je remercie d'avance toute personne qui pourra m'aider.

**RideKick** · 13/03/2009, 14h46

Bonjour et Bienvenue sur les forums de developpez.com.

Pour t'aider il va nous falloir un peu de code et que tu nous dise ce que tu attends comme comportement pour le remerciement.

**loucy** · 13/03/2009, 14h57

Boujour,

Merci pour ce message si rapide

Ce que j'attend est très simple : que la phrase "Merci d'avoir complété ce formulaire. Nous y donnerons suite rapidement." apparaisse à la place du formulaire.
Mais que le reste des éléments de la page ne bougent pas de place.
(pour le moment le logo, le menu, le titre et l'image en bas à droite de ma page bougent validation du formulaire, ils sont beaucoup plus bas.)

Voici le code de ma page :

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
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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?php
 
$email_dest = "monmail@monmail.com";
 
if ($_POST['envoi']) {
 
$message_remerciement = "Merci d'avoir complété ce formulaire. Nous y donnerons suite rapidement.";
 
// E-mail headers:
$headers ="MIME-Version: 1.0 \n";
$headers .="From: <a href="mailto:info@mail.com">info@mail.com</a> \n";
$headers .="Content-Type: text/html; charset=iso-8859-1 \n";
 
$subject = "Formulaire contact";
 
$partie_entete = "<html><head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>
</head>
<body bgcolor=#FFFFFF>";
 
for ($a=1; $a<= $_POST['nbre_champs_texte']; $a++) {
$partie_champs_texte .= "<font class='content'>" . $_POST['titre_champ'.$a] . " = " . $_POST['champ'.$a] . "</font><br>";
}
 
if ($_POST['nbre_zone_email'] != 0) {
$partie_zone_email = "<font class='content'>" . $_POST['titre_email'] . " = " . $_POST['zone_email'] . "</font><br>";
}
 
if ($_POST['nbre_zones_texte'] != 0) {
$partie_zone_texte = "<font class='content'>" . $_POST['titre_zone'] . " = " . $_POST['zone_texte'] . "</font><br>";
$partie_zone_texte = stripslashes($partie_zone_texte);
}
 
$fin = "</body></html>";
 
$sortie = $partie_entete . $partie_champs_texte . $partie_zone_email . $partie_zone_texte . $fin;
 
// Send the e-mail
if (@!mail($email_dest,$subject,$sortie,$headers)) {
echo("Envoi du formulaire impossible");
} // Closing if !mail...
 
} // Closing if edit
?>
 
<html>
<head>
<title>Assistant d'envoi de formulaires</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript"><!-- Hide script from older browsers
function verifSelection() {if (mail_form.champ1.value == "") {
alert("Veuillez indiquer votre nom")
return false
} if (mail_form.champ2.value == "") {
alert("Veuillez indiquer votre numéro de téléphone")
return false
} if (mail_form.zone_email.value == "") {
alert("Veuillez indiquer votre e-mail")
return false
}
 
invalidChars = " /:,;'"
 
for (i=0; i<invalidChars.length; i++) {	// does it contain any invalid characters?
badChar = invalidChars.charAt(i)
 
if (mail_form.zone_email.value.indexOf(badChar,0) > -1) {
alert("Votre adresse e-mail contient des caractères invalides. Veuillez vérifier.")
mail_form.zone_email.focus()
return false
}
}
 
atPos = mail_form.zone_email.value.indexOf("@",1)			// there must be one "@" symbol
if (atPos == -1) {
alert('Votre adresse e-mail ne contient pas le signe "@". Veuillez vérifier.')
mail_form.zone_email.focus()
return false
}
 
if (mail_form.zone_email.value.indexOf("@",atPos+1) != -1) {	// and only one "@" symbol
alert('Il ne doit y avoir qu\'un signe "@". Veuillez vérifier.')
mail_form.zone_email.focus()
return false
}
 
periodPos = mail_form.zone_email.value.indexOf(".",atPos)
 
if (periodPos == -1) {					// and at least one "." after the "@"
alert('Vous avez oublié le point "." après le signe "@". Veuillez vérifier.')
mail_form.zone_email.focus()
return false
}
 
if (periodPos+3 > mail_form.zone_email.value.length)	{		// must be at least 2 characters after the 
alert('Il doit y avoir au moins deux caractères après le signe ".". Veuillez vérifier.')
mail_form.zone_email.focus()
return false
}if (mail_form.zone_texte.value == "") {
alert("Veuillez laisser un message")
return false
} } // Fin de la fonction
 
</script>
 
<style type="text/css">
<!--
.language1 { color: #162731; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-decoration: none; } 
.language2 { color:#98002E; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; text-decoration:none; } 
.menuTitle1 { color:#162731; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; }
.menuTitle2 { color:#98002E; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; font-weight:bold; }
.menuContent1 { color:#162731; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; }
.menuContent2 { color:#98002E; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; text-decoration:none; }
.menuContent3 { color:#999999; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; }
.mainTitle { color:#98002E; font-family:Arial, Helvetica, sans-serif; font-size:21px; font-weight:bold; }
.subtitle { color:#162731; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; font-weight:bold; }
.content { color:#162731; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top: 10px;  }
.adresse { color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:9px }
-->
</style>
</head>
 
<body bgcolor="#959DA7">
<div><br><br><br>
<table width="900" height="600" border="0" align="center" cellpadding="0" cellspacing="0" background="images/cercles.gif" style="background-repeat:no-repeat; background-position:bottom left" bgcolor="#FFFFFF">
  <tr>
    <td height="105">&nbsp;</td>    <td align="left" valign="middle"><a href="index.html"><img src="images/g-design.gif" width="134" height="34" border="0" alt="G-Design Visual Communication"></a></td><td colspan="3" valign="top" align="right"><img src="images/header1.jpg" width="660" height="105" alt="Header G-Design"></td>
    <td width="65" rowspan="6" valign="top" align="right"><img src="images/brand-creators_01.gif" width="65" height="550" alt="Brand Creator"></td>
  </tr>
  <tr>
    <td width="30" height="30">&nbsp;</td>
    <td width="145">&nbsp;</td>
    <td width="535">&nbsp;</td>
    <td width="110" align="right"><a href="emailEN.html" class="language1">EN</a><a href="emailNL.html" class="language1">&nbsp;NL</a><a href="emailFR.html" class="language2">&nbsp;FR</a></td>
    <td width="15" align="center">&nbsp;</td>
  </tr>
  <tr>
    <td height="35">&nbsp;</td>
    <td rowspan="4" valign="top"><table width="120" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="3" class="menuTitle1">ENTREPRISE</td>
      </tr>
      <tr>
        <td width="15">&nbsp;</td>
        <td width="85"><a href="introFR.html" class="menuContent1">Introduction</a></td>
        <td width="20"><img src="images/black-bullet.gif" width="5" height="5"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><a href="ambitionFR.html" class="menuContent1">Ambition</a></td>
        <td><img src="images/black-bullet.gif" width="5" height="5"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><a href="philoFR.html" class="menuContent1">Philosophie</a></td>
        <td><img src="images/black-bullet.gif" width="5" height="5"></td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
        </tr>
      <tr>
        <td colspan="2" style="border-top: 1px solid #162731;">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3"><a href="exemplesFR.html" class="menuTitle1">EXEMPLES</a></td>
      </tr>
      <tr> 
        <td colspan="3" style="border-bottom-color:#162731;">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" style="border-top: 1px solid #162731;">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" class="menuTitle2">CONTACT</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><a href="adresseFR.html" class="menuContent1">Adresse</a></td>
        <td><img src="images/black-bullet.gif" width="5" height="5"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><a href="itineraireFR.html" class="menuContent1">Itin&eacute;raire</a></td>
        <td><img src="images/black-bullet.gif" width="5" height="5"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="menuContent2">e-mail</td>
        <td><img src="images/red-bullet.gif" width="5" height="5"></td>
      </tr>
    </table></td>
    <td class="mainTitle" valign="top">e-mail</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="35">&nbsp;</td>
    <td class="subtitle">C&nbsp;o&nbsp;n&nbsp;t&nbsp;a&nbsp;c&nbsp;t</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="165">&nbsp;</td>
    <td rowspan="2" valign="top" class="content" align="center">
 
	<form name="mail_form" method="post" action="<?=$PHP_SELF?>" onSubmit="return verifSelection()">
  <div align="center"></div>
<p align="center">
<?php
if ($message_remerciement) {
echo("<font class='content'>");
echo(stripslashes($message_remerciement));
echo("</p></body></html>");
exit();
}
?>
<p align="left" class="content">Vous souhaitez plus d'informations, une brochure ou un rendez-vous, n'hésitez pas à nous contacter.<br>Nous sommes à votre disposition</p>
  <table width="400" border="0" align="center">
<p align="center"></p><tr>
      <td><font class="content">Votre nom</font></td>
      <td><input name="champ1" type="text"></td>
    </tr><tr>
      <td><font class="content">Numéro de téléphone</font></td>
      <td><input name="champ2" type="text"></td>
    </tr><tr>
      <td width><font class="content">Votre e-mail</font></td>
      <td width><input name="zone_email" type="text"></td>
    </tr><tr>
      <td valign="top"><font class="content">Votre message</font></td>
      <td><textarea name="zone_texte" cols="25" rows="5"></textarea></td>
    </tr><tr>
      <td valign="top"><input name="nbre_champs_texte" type="hidden" id="nbre_champs_texte" value="2">
        <input name="nbre_zones_texte" type="hidden" value="1">
<input name="nbre_zone_email" type="hidden" value="1">
<input name="titre_champ1" type="hidden" value="Votre nom"><input name="titre_champ2" type="hidden" value="Numéro de téléphone"><input name="titre_email" type="hidden" value="Votre e-mail"><input name="titre_zone" type="hidden" value="Votre message"></td>
      <td><div align="center">
<input type="reset" name="Reset" value="Effacer">          
<input type="submit" name="envoi" value="Envoyer">
        </div></td>
    </tr>
  </table>
</form>
 
	  </td>
    <td rowspan="2" valign="top" align="right">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td height="180">&nbsp;</td>
    </tr>
  <tr>
    <td height="50">&nbsp;</td>
    <td>&nbsp;</td>    
	<td class="adresse" align="center" valign="middle">G-Design - Bezemstraat 67 - 1600 Sint Pieters Leeuw - T: +32 (0)2 307 86 86 - F: +32 (0)2 307 87 87</td>
    <td colspan="3" align="right" valign="top"><img src="images/brand-creators_02.gif" width="70" height="50" alt="Brand Creator"></td>
  </tr>
</table>
</div>
</body>
</html>

**RideKick** · 13/03/2009, 15h03

D'après les captures d'ecrans c'est deja ce qui se passe non ?

**loucy** · 13/03/2009, 15h08

Oui, c'est au niveau de la mise en page qu'il y a un problème.

Donc je me demandais s'il n'y avais pas des parties de codes incorrectes, manquante ou mal placées qui influencent l'aspect visuel de ma page...

**RideKick** · 13/03/2009, 15h10

Tu devrais essayer sans le

Code :

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

exit();

**loucy** · 13/03/2009, 15h20

Coooool ça fonctionne

, les éléments de la page sont bien placés.

Le formulaire est toujours visible du coup. Y a t'il un autre moyen que le "exit" pour qu'il n'apparaisse plus une fois envoyé ?

Mais bon, ce n'est qu'un détail, je préfère une page bien affichée avec un formulaire qui reste présent, qu'une page qui ne ressemble à rien.

Merci bcp en tout cas :-))))))

**RideKick** · 13/03/2009, 15h23

oui ,

tu peux mettre le formulaire dans le "else" du if comme ceci :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<p align="center">
<?php
if ($message_remerciement) {
echo("<font class='content'>");
echo(stripslashes($message_remerciement));
echo("</p></body></html>");
}else{
?>
<p align="left" class="content">Vous souhaitez plus d'informations, une brochure ou un rendez-vous, n'hésitez pas à nous contacter.<br>Nous sommes à votre disposition</p>
  <table width="400" border="0" align="center">
<p align="center"></p><tr>
      <td><font class="content">Votre nom</font></td>
      <td><input name="champ1" type="text"></td>
    </tr><tr>
      <td><font class="content">Numéro de téléphone</font></td>
      <td><input name="champ2" type="text"></td>
    </tr><tr>
      <td width><font class="content">Votre e-mail</font></td>
      <td width><input name="zone_email" type="text"></td>
    </tr><tr>
      <td valign="top"><font class="content">Votre message</font></td>
      <td><textarea name="zone_texte" cols="25" rows="5"></textarea></td>
    </tr><tr>
      <td valign="top"><input name="nbre_champs_texte" type="hidden" id="nbre_champs_texte" value="2">
        <input name="nbre_zones_texte" type="hidden" value="1">
<input name="nbre_zone_email" type="hidden" value="1">
<input name="titre_champ1" type="hidden" value="Votre nom"><input name="titre_champ2" type="hidden" value="Numéro de téléphone"><input name="titre_email" type="hidden" value="Votre e-mail"><input name="titre_zone" type="hidden" value="Votre message"></td>
      <td><div align="center">
<input type="reset" name="Reset" value="Effacer">          
<input type="submit" name="envoi" value="Envoyer">
        </div></td>
    </tr>
  </table>
</form>
		<?
		}
		?>

**loucy** · 13/03/2009, 15h32

Génial !!!

Un tout grand merci, c'est exactement ce qu'il me fallait.

**RideKick** · 13/03/2009, 15h33

minute papillon

ici c'est pas joli :

Code :

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

1
2
3
echo("<font class='content'>");
echo(stripslashes($message_remerciement));
echo("</p></body></html>");

au pire faut eviter de fermer 2 fois html et body :

Code :

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

1
2
3
4
 
echo("<font class='content'>");
echo(stripslashes($message_remerciement));
echo("</p>");

au mieux faut fermer la balise que tu viens d'ouvrir :

Code :

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

1
2
3
4
 
echo("<font class='content'>");
echo(stripslashes($message_remerciement));
echo("</font>");

**loucy** · 13/03/2009, 15h42

Ah, ok.... j'ai appliqué la deuxième option.

Merci pour ton aide, je n'aurais jamais vu l'erreur :-))

Formulaire : mise en page après validation

Langage PHP

Discussions similaires

Partager

Partager