formulaire en tooltip

didouchy · 02/03/2011, 17h23

Bonjour,

J'ai voulu enlever mon lien " contacte " pour éviter que des visiteur spam ma boite mail; j'ai donc eu l'idée de mettre un formulaire de contacte sous forme de tooltip sauf que je rencontre quelque difficulté au niveau du positionnement :s

Donc dans mon CSS j'ai:

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
a.info 
 
{
 
position: absolute;
 
text-decoration: none;
 
color: black;
 
border-bottom: 1px gray dotted;
 
}
 
 
 
a.info:hover
 
{
 
z-index:25; 
 
background: none;
 
}
 
 
 
a.info span
 
{
 
display: none
 
}
 
 
 
a.info:hover span
 
{ 
 
display: block;
 
position: absolute;
 
top: 2em;
 
left: 6em;
 
background: #171717;
 
text-align: center;
 
color: white;
 
padding: 2px;
 
}

Et dans mon fichier php j'ai:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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_4']=array("Sélectionnez","Base"," moyenne"," haute");
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_1=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_1)));
	$f_2=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèàäö\ -]", "", $f_2)));
	$f_3=strip_tags(trim($f_3));
	// Verification des champs
	if(strlen($f_1)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Prénom &raquo; est vide ou incomplet.</span>";
		$errf_1=1;
	}
	if(strlen($f_2)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Nom &raquo; est vide ou incomplet.</span>";
		$errf_2=1;
	}
	if(strlen($f_3)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; E-mail &raquo; est vide ou incomplet.</span>";
		$errf_3=1;
	}else{
		if(!ereg('^[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+'.
		'@'.
		'[-!#$%&\'*+\/0-9=?A-Z^_`a-z{|}~]+\.'.
		'[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+$',
		$f_3)){
			$erreur.="<li><span class='txterror'>La syntaxe de votre adresse e-mail n'est pas correcte.</span>";
			$errf_3=1;
		}
	}
	if($f_4==0){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Priorité &raquo; n'a pas été défini.</span>";
		$errf_4=1;
	}
	if(strlen($f_5)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Message &raquo; est vide ou incomplet.</span>";
		$errf_5=1;
	}
	if($erreur==""){
		// Création du message
		$titre="Message de votre site";
		$tete="From:Site@Http://jeux-en-reseaux.eu/\n";
		$corps.="Prénom : ".$f_1."\n";
		$corps.="Nom : ".$f_2."\n";
		$corps.="E-mail : ".$f_3."\n";
		$corps.="Priorité : ".$list['f_4'][$f_4]."\n";
		$corps.="Message : ".$f_5."\n";
		if(mail("admin@jeux-en-reseaux.eu", $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" xml:lang="fr" lang="fr">
<head>
  <title>Teste</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />  
  <meta http-equiv="content-language" content="fr" /> 
  <link href="style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" />
  <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<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>
</head>
 
<body>
<a class="info" href="#"><img src="images/Noby.png" /><span><? if($ok_mail=="true"){ ?>
	<table width='100%' border='0' cellspacing='1' cellpadding='1'>
		<tr><td><span class='txtform'>Le message ci-dessous nous a bien été transmis, et nous vous en remercions.</span></td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td><tt><?echo nl2br(stripslashes($corps));?></tt></td></tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td><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='100%' border='0' cellspacing='1' cellpadding='1'>
<? if($erreur){ ?><tr><td colspan='2' bgcolor='red'><span class='txterror'><font color='white'><b>&nbsp;ERREUR, votre message n'a pas été transmis</b></font></span></td></tr><tr><td colspan='2'><ul><?echo$erreur?></ul></td></tr><?}?>
<tr><td colspan='2'><span class='txterror'>Les champs marqué d'un * sont obligatoires</span></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Prénom* :</span></td><td><input type='text' style='width:200 <?if($errf_1==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_1' value='<?echo stripslashes($f_1);?>' size='24' border='0'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Nom* :</span></td><td><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'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>E-mail* :</span></td><td><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'></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Priorité* :</span></td><td><select style='width:200 <?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_4' size='1'>
<? for($id=0;$id<count($list['f_4']);$id++){
if($id==$f_4){$ct="selected";}
print("<option ".$ct." value=".$id.">".$list['f_4'][$id]."</option>");
unset($ct);
}?>
</select></td></tr>
<tr><td align='right' width='30%'><span class='txtform'>Message* :</span></td><td><textarea style='width:360 <?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_5' rows='6' cols='40'><?echo$f_5?></textarea></td></tr>
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr>
</table>
</form>
<? } ?></span></a>
 
</body>
</html>

Ce qui me donne un premier aperçu un peut déformé: http://jeux-en-reseaux.eu/jojo/jojo.php

J'ai fait une image pour vous montrer un peut comment je souhaite qu'elle soit: http://jeux-en-reseaux.eu/jojo//images/ddd.jpg

J'ai regardé un peut partout sur le net et j'ai pas trouver grand chose si ce n'est modifier le tooltip. j'ai utilisé un generateur de formulaire via un site et que j'ai introduit entre <span> LE FORMULAIRE </span>. J'ai essayer de voir s'il n'y avais pas d'autre balise que je pourrai mettre pour le tooltip mais encore une fois je n'est rien trouver pour modifier le positionnement, mettre correctement le texte etc.

Votre aide me sera très précieuse puisque sa fait 2 jours que je suis dessus et j'épuise un peut ^^.

Merci beaucoup

Patrice.H · 03/03/2011, 15h38

Commence par remplacer ton

Code :

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

1
2
3
4
5
<span>
 <form>
  blah
 </span>
</form>

par un

Code :

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

1
2
3
4
5
<div>
 <form>
  blah
 </span>
</div>

Un span sert normalement à encadrer du texte, pas des forms et des inputs, de plus cela corrigera l'affichage de ton <span id="txterror"> qui prends les mêmes propriétés que ton conteneur du coup.

Pour les labels passant sous les inputs, essaye de spécifier une largeur fixe aux colonnes de ta table.

didouchy · 03/03/2011, 17h08

J'ai pas comprit

EDIT: J'ai tout essayé; avec les <div> & </div> avec la taille des cellule, du contour et positionnement du texte rien n'y fait. J'ai toucher un peut au css et aux <td> & </td> rien n'y fait non plus ...

Patrice.H · 04/03/2011, 09h48

Rebonjour,
Je me suis peut être mal exprimé j'ai corrigé ton code et ça rends bien chez moi. Voici ce que j'ai fait:

Pour ta "boite" tooltip: remplacer le <span> par un <div>, ce qui est plus correct dans son utilisation.

Dans le CSS: ton a.info div (anciennement a.info span) : top:0px; au lieu de top:2em; pour que le tooltip soit plus haut.

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
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
a.info 
 
{
 
position: absolute;
 
 
text-decoration: none;
 
color: black;
 
border-bottom: 1px gray dotted;
 
}
 
 
 
a.info:hover
 
{
 
z-index:25; 
 
background: none;
 
}
 
 
 
a.info div
 
{
 
display: none;
 
position: absolute;
 
top:0px;   
 
left: 6em;
 
background: #171717;
 
text-align: center;
 
color: white;
 
padding: 2px;
 
}
 
 
 
a.info:hover div
 
{ 
 
display: block;
 
}
 
a.info div span
{
    color:white;
}

HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
  <title>Teste</title> 
  <link rel="shortcut icon" href="favicon.ico" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />  
  <meta http-equiv="content-language" content="fr" /> 
  <link href="style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" /> 
  <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" /> 
<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> 
</head> 
 
<body> 
<a class="info" href="#"><img width="100px" src="images/Noby.png" />
    <div><form action='/jojo/jojo.php' method='post' name='Form'> 
<table width='100%' border='0' cellspacing='1' cellpadding='1'> 
<tr><td colspan='2'><span class='txterror'>Les champs marqué d'un * sont obligatoires</span></td></tr> 
<tr><td align='right' width='30%'><span class='txtform'>Prénom :</span></td><td><input type='text' style='width:200 ;' name='f_1' value='' size='24' border='0'></td></tr> 
<tr><td align='right' width='30%'><span class='txtform'>Nom :</span></td><td><input type='text' style='width:200 ;' name='f_2' value='' size='24' border='0'></td></tr> 
<tr><td align='right' width='30%'><span class='txtform'>E-mail* :</span></td><td><input type='text' style='width:200 ;' name='f_3' value='' size='24' border='0'></td></tr> 
<tr><td align='right' width='30%'><span class='txtform'>Priorité :</span></td><td><select style='width:200 ;' name='f_4' size='1'> 
<option selected value=0>Sélectionnez</option><option  value=1>Base</option><option  value=2> moyenne</option><option  value=3> haute</option></select></td></tr> 
<tr><td align='right' width='30%'><span class='txtform'>Message*:</span></td><td><textarea style='width:360 ;' name='f_5' rows='6' cols='35'></textarea></td></tr> 
<tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr> 
</table> 
</form> 
</div></a> 
 
</body> 
</html>

Tu peux voir le résultat à cet endroit, et a part pour l'image et le PHP que j'ai du dégager pour mes test, le résultat semble être ce que tu attends.
Cordialement.

didouchy · 04/03/2011, 15h53

Merci beaucoup Patrice !

Peut-tu m'expliquer pourquoi as-tu mit une <div> car malgré m'avoir donné la réponse je n'est pas vraiment comprit pourquoi mettre un <div> ...

Merci encore pour ton aide

#EDIT#

J'ai un autre petit souci

Enfaite j'aimerai le mettre Juste en haut de la colonne de gauche mais il s'affiche directement sur les block ( http://jeux-en-reseaux.eu/jojo/ ) Si je met une <div class="pib"> ( Position Info Bulle ) et dans le css je met le positionnement sa fonctionnera ? :s

Patrice.H · 04/03/2011, 16h10

Parce que <div> est une division de ton document HTML, et que <span> est un regroupement d'éléments "inline".

Donc en gros pour faire un carré/une fenêtre: <div> pour grouper du texte: <span>.

Tu avais dans ton CSS la règle "a.info span".
Qui signifie "pour tous les éléments de type <span> contenus dans un lien (<a>) de classe info."
Le problème étant que tu avait deux span: celui servant de regroupement à tout ton tooltip, et celui contenant ton message. La règle s'appliquait aux deux: ils se retrouvaient en position absolute alignés en haut, et donc superposés.

Pense à mettre résolu dans ton sujet.

didouchy · 04/03/2011, 16h17

Haa, d'accord ! C'est bon je voit l'erreur ! Merci

J'ai Editer mon poste en haut, si tu peut y jeter un t'y coup d'oeil et me dire si j'ai raison sa m'aiderai beaucoup

04/03/2011, 16h10	#6
Patrice.H Membre régulier Étudiant en alternance Inscription : février 2010 Messages : 80 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant en alternance Informations forums : Inscription : février 2010 Messages : 80 Points : 82 Points : 82	Parce que <div> est une division de ton document HTML, et que <span> est un regroupement d'éléments "inline". Donc en gros pour faire un carré/une fenêtre: <div> pour grouper du texte: <span>. Tu avais dans ton CSS la règle "a.info span". Qui signifie "pour tous les éléments de type <span> contenus dans un lien (<a>) de classe info." Le problème étant que tu avait deux span: celui servant de regroupement à tout ton tooltip, et celui contenant ton message. La règle s'appliquait aux deux: ils se retrouvaient en position absolute alignés en haut, et donc superposés. Pense à mettre résolu dans ton sujet. __________________ "Il n'y a que deux façons d'avoir le dernier mot avec une femme. Le problème, c'est qu'aucune ne marche." Samuel Clemens
	00

03/03/2011, 17h08	#3
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	J'ai pas comprit EDIT: J'ai tout essayé; avec les <div> & </div> avec la taille des cellule, du contour et positionnement du texte rien n'y fait. J'ai toucher un peut au css et aux <td> & </td> rien n'y fait non plus ...
	00

04/03/2011, 15h53	#5
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Merci beaucoup Patrice ! Peut-tu m'expliquer pourquoi as-tu mit une <div> car malgré m'avoir donné la réponse je n'est pas vraiment comprit pourquoi mettre un <div> ... Merci encore pour ton aide #EDIT# J'ai un autre petit souci Enfaite j'aimerai le mettre Juste en haut de la colonne de gauche mais il s'affiche directement sur les block ( http://jeux-en-reseaux.eu/jojo/ ) Si je met une <div class="pib"> ( Position Info Bulle ) et dans le css je met le positionnement sa fonctionnera ? :s
	00

04/03/2011, 16h17	#7
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Haa, d'accord ! C'est bon je voit l'erreur ! Merci J'ai Editer mon poste en haut, si tu peut y jeter un t'y coup d'oeil et me dire si j'ai raison sa m'aiderai beaucoup
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email