Bonjour,
J'aurais bien besoin d'aide concernant la mise en page d'une page où est intégré un formulaire de contact php. J'ai construit ce formulaire grâce à un générateur qui fournit un code tout fait (une partie avant la balise "html", une autre dans la balise "head", et une dernière dans le "body" à l'endroit où on veut placer le formulaire). J'utilise ce générateur très souvent et je n'ai jamais eu de soucis.
Mais là, très bizarrement, l'ensemble du formulaire s'étale sur une hauteur ahurissante! Regardez plutôt: http://www.anna-communication.com/bastian/pages/contact.php
Il fonctionne hein, les messages arrivent à destination, mais j'ai juste ce gros problème d'affichage.
Pourtant j'ai rajouté un "height' au tableau du formulaire ainsi qu'à chacune de ses cellules, et j'ai mis " border='0' cellspacing='0' cellpadding='0' " donc je ne comprends pas pourquoi chaque ligne est aussi espacée des autres.
Si quelqu'un peut m'aider ce serait super parce que là je sèche.
Merci!
Voici mon code (désolée, je sais qu'il est sûrement crade, mais à force de toucher à tout pour résoudre ce bug d'affichage, voilà ce que ça donne):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
// Couleur du texte des champs si erreur saisie utilisateur
$color_font_warn="#FF0000";
// Couleur de fond des champs si erreur saisie utilisateur
$color_form_warn="#FFCC66";
// Ne rien modifier ci-dessous si vous n’êtes pas certain de ce que vous faites !
$list['f_1']=array("Sélectionnez","Mlle","Mme","M.");
$list['f_9']=array("Sélectionnez","Par un article dans la presse","Par un moteur de recherche sur Internet","Par un prospectus","Par un lien sur Internet","Par une connaissance","Par un article sur Internet","Autre");
if(isset($_POST['submit'])){
$erreur="";
// Nettoyage des entrées
while(list($var,$val)=each($_POST)){
if(!is_array($val)){
$$var=strip_tags($val);
}else{
while(list($arvar,$arval)=each($val)){
$$var[$arvar]=strip_tags($arval);
}
}
}
// Formatage des entrées
$f_2=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_2)));
$f_3=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_3)));
$f_4=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_4)));
$f_5=trim(eregi_replace("[^0-9+]", "", $f_5));
$f_6=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_6)));
$f_7=trim(eregi_replace("[^0-9\ +]", "", $f_7));
$f_8=strip_tags(trim($f_8));
$f_10=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_10)));
// Verification des champs
if($f_1==0){
$erreur.="<li><span class='txterror'>Le champ « Titre » n'a pas été défini.</span>";
$errf_1=1;
}
if(strlen($f_2)<2){
$erreur.="<li><span class='txterror'>Le champ « Nom » est vide ou incomplet.</span>";
$errf_2=1;
}
if(strlen($f_3)<2){
$erreur.="<li><span class='txterror'>Le champ « Prénom » est vide ou incomplet.</span>";
$errf_3=1;
}
if(strlen($f_7)<2){
$erreur.="<li><span class='txterror'>Le champ « Numéro de téléphone » est vide ou incomplet.</span>";
$errf_7=1;
}
if(strlen($f_8)<2){
$erreur.="<li><span class='txterror'>Le champ « E-mail » est vide ou incomplet.</span>";
$errf_8=1;
}else{
if(!ereg('^[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+'.
'@'.
'[-!#$%&\'*+\/0-9=?A-Z^_`a-z{|}~]+\.'.
'[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+$',
$f_8)){
$erreur.="<li><span class='txterror'>La syntaxe de votre adresse e-mail n'est pas correcte.</span>";
$errf_8=1;
}
}
if(strlen($f_11)<2){
$erreur.="<li><span class='txterror'>Le champ « Votre message » est vide ou incomplet.</span>";
$errf_11=1;
}
if($erreur==""){
// Création du message
$titre="Message de votre site";
$tete="From:Site@Anna-communication.com/bastian\n";
$corps.="Titre : ".$list['f_1'][$f_1]."\n";
$corps.="Nom : ".$f_2."\n";
$corps.="Prénom : ".$f_3."\n";
$corps.="Adresse : ".$f_4."\n";
$corps.="Code Postal : ".$f_5."\n";
$corps.="Ville : ".$f_6."\n";
$corps.="Numéro de téléphone : ".$f_7."\n";
$corps.="E-mail : ".$f_8."\n";
$corps.="Comment nous avez-vous connu? : ".$list['f_9'][$f_9]."\n";
$corps.="Si autre, veuillez préciser : ".$f_10."\n";
$corps.="Votre message : ".$f_11."\n";
if(mail("anais@kom-personne.com", $titre, stripslashes($corps), $tete)){
$ok_mail="true";
}else{
$erreur.="<li><span class='txterror'>Une erreur est survenue lors de l'envoi du message, veuillez refaire une tentative.</span>";
}
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bastian éditions</title>
<style type="text/css">
<!--
body,td,th {
height: 850px;
}
body {
height: 850px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
padding-bottom: 0px;
/*background-image: url(./images/livre.jpg);
background-repeat: no-repeat;
background-position:bottom left;
background-attachment:scroll;*/
}
a {
font-size: 12px;
color: 233253;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: 233253;
}
a:hover {
text-decoration: none;
color: af5b3a;
}
a:active {
text-decoration: none;
color: 233253;
}
#tetiere {
width:833;
heigh:118;
border:0;
margin:0;
padding:0;
spacing:0;
top:0;
left:0;
position:absolute;
}
#menu {
width:206;
heigh:362;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:118px;
float:left;
position:relative;
}
#biographies {
width:206;
heigh:64;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:0px;
position:absolute;
}
#livresdentreprise {
width:206px;
heigh:82px;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:64px;
position:absolute;
}
#ateliersdecriture {
width:206;
heigh:75;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:146px;
position:absolute;
}
#redactiondarticles {
width:206;
heigh:78;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:221px;
position:absolute;
}
#correctiondecrits {
width:206;
heigh:63;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:299px;
position:absolute;
}
#central {
width:400px;
heigh:500px;
left:206px;
border:0;
padding:0;
spacing:0;
top:118px;
text-align:center;
float:left;
position:absolute;
}
#texte {
width:481px;
heigh:200px;
border:0;
margin:0;
bottom:0px;
left:100px;
padding:0;
spacing:0;
text-align:center;
float:left;
position:relative;
}
/*#bandeboutonsplume {
width:100%;
height:84px;
max-heigh:84px;
border:0;
margin:0;
padding:0;
spacing:0;
float:left;
vertical-align:bottom;
text-align:center;
position:relative;
}
#bandeboutons {
width:100%;
height:84px;
max-heigh:84px;
border:0;
margin:0;
padding:0;
spacing:0;
bottom:0px;
float:left;
vertical-align:bottom;
text-align:center;
position:relative;
}
#formulairedecontact {
width:140px;
heigh:15px;
border:0;
margin:0;
margin-right:15px;
bottom:0px;
margin-left:30%;
padding:5px;
spacing:0;
background-color:#af5b3a;
text-align:center;
vertical-align:bottom;
valign:bottom;
float:left;
margin-bottom:0px;
position:relative;
}
#lapresseenparle {
width:140px;
heigh:15px;
border:0;
margin:0;
padding:5px;
vertical-align:bottom;
valign:bottom;
spacing:0;
bottom:0px;
margin-bottom:0px;
margin-right:15px;
background-color:#af5b3a;
text-align:center;
float:left;
position:relative;
}
#plume {
width:91px;
heigh:84px;
border:0;
margin:0;
padding:0;
spacing:0;
text-align:center;
float:left;
position:relative;
}*/
#droite {
width:250px;
heigh:500px;
border:0;
margin:0;
padding:0;
spacing:0;
left:900px;
top:118px;
text-align:center;
float:left;
position:absolute;
}
#encart1 {
width:240px;
heigh:200px;
border:2px;
margin:0;
margin-bottom:15px;
padding:6px;
spacing:0;
border-style:solid;
border-color:#a1a9bc;
right:0px;
top:0px;
text-align:justify;
position:relative;
}
#encart2 {
width:240px;
heigh:200px;
border:2px;
margin:0;
padding:6px;
spacing:0;
text-align:justify;
border-color:#a1a9bc;
border-style:solid;
right:0px;
top:0px;
position:relative;
}
#encadre {
width:250px;
heigh:170px;
border:0;
margin:0;
padding:6px;
padding-top:3px;
spacing:0;
text-align:left;
left:125px;
background-color:#a1a9bc;
color:#FFFFFF;
position:absolute;
}
#textebas {
width:481px;
heigh:200px;
border:0;
margin:0;
padding:0;
spacing:0;
top:170px;
text-align:center;
float:left;
position:relative;
}
#formulaire {
width:481px;
max-heigh:800px;
height:800px;
border:0;
margin:0;
padding:0;
spacing:0;
text-align:center;
position:absolute;
}
#quisuisje {
width:149px;
heigh:172px;
border:0;
margin:55px;
padding:0;
spacing:0;
position:relative;
}
#coordonnees {
width:100%;
heigh:30px;
border:0;
margin:0;
padding:0;
spacing:0;
left:0;
bottom:0%;
vertical-align:bottom;
valign:bottom;
margin-bottom:0;
text-align:center;
position:absolute;
}
#livre {
width:347px;
heigh:319px;
border:0;
margin:0;
padding:0;
spacing:0;
left:0px;
top:600px;
margin-bottom:0px;
position:absolute;
}
.normal {
color: #233253;
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
font-size:12px;
font-size:12;
}
.soustitre {
color: #af5b3a;
font-family:Arial, Helvetica, sans-serif;
font-size:13pt;
font-weight:bold;
}
.coordonnees {
color: #A3B5C3;
font-family:Arial, Helvetica, sans-serif;
font-size:12pt;
}
.titres {
color: #af5b3a;
font-family:Arial, Helvetica, sans-serif;
font-size:17pt;
font-weight: bold;
}
.blanc {
color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
fontsize:13;
}
.style2 {font-size: 10px}
-->
</style>
<style type="text/css" media="screen"><!--
INPUT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
SELECT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
TEXTAREA { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
.txterror { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
.txtform { color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
--></style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
</head>
<body onload="MM_preloadImages('../images/biographies2.png','../images/livresdentreprise2.png','../images/ateliersdecriture2.png','../images/redactiondarticles2.png','../images/correctiondecrits2.png','../images/quisuisje2.png')">
<div id="tetiere"><a href="../index.php"><img src="../images/tetiere.jpg" width="833" height="118" border="0"/></a></div>
<div id="menu">
<div id="biographies"><a href="biographies.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../images/biographies2.png',1)"><img src="../images/biographies.png" name="Image1" width="206" height="64" border="0" id="Image1" /></a></div>
<div id="livresdentreprise"><a href="livresdentreprise.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../images/livresdentreprise2.png',1)"><img src="../images/livresdentreprise.png" name="Image2" width="206" height="82" border="0" id="Image2" /></a></div>
<div id="ateliersdecriture"><a href="ateliersdecriture.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../images/ateliersdecriture2.png',1)"><img src="../images/ateliersdecriture.png" name="Image3" width="206" height="75" border="0" id="Image3" /></a></div>
<div id="redactiondarticles"><a href="redactiondarticles.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../images/redactiondarticles2.png',1)"><img src="../images/redactiondarticles.png" name="Image4" width="206" height="78" border="0" id="Image4" /></a></div>
<div id="correctiondecrits"><a href="correctiondecrits.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images/correctiondecrits2.png',1)"><img src="../images/correctiondecrits.png" name="Image5" width="206" height="63" border="0" id="Image5" /></a></div>
</div>
<div id="central">
<div class="normal" id="texte">
<p class="titres"><strong>Contact</strong></p>
<p>Sandra Schuhler-Bastian, écrivain-biographe<br />
Bastian Editions<br />
9 domaine Saint Ludan<br />
67150 Hipsheim</p>
<p>Tél. 03 88 64 16 49<br />
Mob. 06 03 92 80 82</p>
<p><strong>Un devis, un renseignement, un projet à mûrir ?</strong></p>
<p>Merci de remplir le formulaire ci-dessous, nous vous répondrons dans les meilleurs délais. </p>
<div id="formulaire"> <? if($ok_mail=="true"){ ?>
<table width='400' height='500' border='0' cellspacing='0' cellpadding='0'>
<tr><td height="200"><span class='txtform'>Le message ci-dessous nous a bien été transmis, et nous vous en remercions.</span></td>
</tr>
<tr><td height="80"> </td>
</tr>
<tr><td height="80"><tt><?echo nl2br(stripslashes($corps));?></tt></td>
</tr>
<tr><td height="80"> </td>
</tr>
<tr><td height="100"><span class='txtform'>Nous allons y donner suite dans les meilleurs délais.<br>
A bientôt.</span></td></tr>
</table>
<? }else{ ?>
<form action='<? echo $PHP_SELF ?>' method='post' name='Form'>
<table width='400' height='800' border='0' align="center" cellpadding='0' cellspacing='0'>
<? if($erreur){ ?>
<tr><td colspan='2' bgcolor='red'><span class='txterror'><font color='white'><b> ERREUR, votre message n'a pas été transmis</b></font></span></td></tr><tr><td height="200" colspan='2'><ul><?echo$erreur?></ul></td></tr><?}?>
<tr><td height="80" colspan='2'><span class='txterror'>Les champs marqué d'un * sont obligatoires</span></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Titre* :</span></td><td height="80"><div align="left">
<select style='width:200 <?if($errf_1==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_1' size='1'>
<? for($id=0;$id<count($list['f_1']);$id++){
if($id==$f_1){$ct="selected";}
print("<option ".$ct." value=".$id.">".$list['f_1'][$id]."</option>");
unset($ct);
}?>
</select>
</div></td></tr>
<tr><td width='30%' height="60" align='right'><span class='txtform'>Nom* :</span></td>
<td height="60"><div align="left">
<input type='text' style='width:200 <?if($errf_2==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_2' value='<?echo stripslashes($f_2);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="60" align='right'><span class='txtform'>Prénom* :</span></td><td height="60"><div align="left">
<input type='text' style='width:200 <?if($errf_3==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_3' value='<?echo stripslashes($f_3);?>' size='24' border='0' />
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Adresse :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_4' value='<?echo stripslashes($f_4);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Code Postal :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_5' value='<?echo stripslashes($f_5);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Ville :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_6==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_6' value='<?echo stripslashes($f_6);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Numéro de téléphone* :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_7==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_7' value='<?echo stripslashes($f_7);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>E-mail* :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_8==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_8' value='<?echo stripslashes($f_8);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Comment nous avez-vous connu? </span></td><td height="80"><div align="left">
<select style='width:200 <?if($errf_9==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_9' size='1'>
<? for($id=0;$id<count($list['f_9']);$id++){
if($id==$f_9){$ct="selected";}
print("<option ".$ct." value=".$id.">".$list['f_9'][$id]."</option>");
unset($ct);
}?>
</select>
</div></td></tr>
<tr><td width='30%' height="80" align='right'><span class='txtform'>Si autre, veuillez préciser :</span></td><td height="80"><div align="left">
<input type='text' style='width:200 <?if($errf_10==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_10' value='<?echo stripslashes($f_10);?>' size='24' border='0'>
</div></td></tr>
<tr><td width='30%' height="200" align='right'><span class='txtform'>Votre message* :</span></td><td height="200"><div align="left">
<textarea style='width:360 <?if($errf_11==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_11' rows='6' cols='40'><?echo$f_11?></textarea>
</div></td></tr>
<tr><td width='30%' height="80" align='right'></td>
<td height="80"><div align="left">
<input type='submit' name='submit' value='Envoyer' border='0'>
</div></td></tr>
</table>
</form>
<? } ?>
</div>
</div>
</div>
</div>
</div>
<div id="droite">
<div class="normal" id="encart1">Sandra Schuhler-Bastian, écrivain biographe, dirige Bastian éditions depuis près de dix ans. Bastian éditions propose principalement des biographies de personnes publiques ou privées, d’entreprises ou d’associations, ainsi que des ateliers d’écriture, la rédaction d’articles de journaux et la correction de vos manuscrits.</div>
<div class="normal" id="encart2">Extrait à venir.</div>
<div id="quisuisje"><a href="quisuisje.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images/quisuisje2.png',1)"><img src="../images/quisuisje.png" name="Image6" width="149" height="172" border="0" id="Image6" /></a></div>
</div>
<table width="800" height="200" border="0" align="left" cellpadding="0" cellspacing="0" background="../images/livre.jpg" style="background-repeat:no-repeat; background-position:bottom left">
<tr>
<td align="right" valign="bottom" class="coordonnees">Bastian Editions - 9 domaine Saint Ludan - 67150 Hipsheim - 03 88 64 16 49 ou 06 03 92 80 82</td>
</tr>
</table>
</body>
</html>
Afficher la suite
