Formulaire de contact capcha objet a reconnaitre alternative audio

Soyez le premier à donner votre avis sur cette source.

Vue 9 324 fois - Téléchargée 876 fois

Description

Encore un formulaire de contact et en plus il n'est pas de moi au départ ( Patrick HAMY ).

Mais je l'ai modifié pour qu'il utilise des photos d'objets à reconnaitre plutôt que des lettres (donnez moi votre avis sur cette idée svp).
Gestion de quelques fautes d'orthographe lors de la saisie, de l'anglais et de l'espagnol.
Le script, en l'état ne gère que 2 images à vous de compléter.

J'ai géré différemment les erreurs de saisie (couleur et texte d'explication).

Pour proposer une alternative audio au capcha et aux diverses coordonnées.

J'utilise un player JS et flash mais je ne sais plus d'où je le sort.

Les sons ont été générés avec Digalo Digit et Audacity.
Les images proviennent des vignettes google.

J'ai laissé le code du mail généré ( le mail html qui est envoyé) tel qu'il est sur mon site: pas très propre et personnalisé.

Le fichier /include/captcha.php contient les déclaration des images utilisées, des textes acceptés et des sons alternatifs.

Les images alternatives aux coordonnées sont générés par une bibliothèque GD si vous ne voulez pas l'utiliser il faut remplacer add.php / fax.php et tel.php par des gif ou autre (pensez à corriger aussi les balises img)

Utilisez le Zip pour avoir tout les fichiers et dossiers.

La feuille de style est elle aussi telle quelle pour que ça fonctionne, à vous de l'adapter et de l'épurer.

Source / Exemple :


<?php header('Content-type: text/html; charset=utf-8');
	
	ini_set('session.use_cookies', '1');
	ini_set('session.use_only_cookies', '1'); // PHP >= 4.3
	ini_set('session.use_trans_sid', '0');
	ini_set('url_rewriter.tags', ''); 
	
session_start(); //ouverture la session pour conserver le captcha ?>
	<?php
		$colorhaut = '#ff0000'; // declaration de la couleur de fond du texte mal saisi -peut etre pas utile ici, mais chez moi j'utilise un styleswitcher et je doit recuperer la couleur dans un fichier, ce que je ne fait pas dans cet exemple

		if (!isset($_POST["action"])) $_POST["action"]="";
		if (!isset($_POST["nom"])) $_POST["nom"]=""; //declaration de chaque element de formulaire
		if (!isset($_POST["prenom"])) $_POST["prenom"]="";
		if (!isset($_POST["email"])) $_POST["email"]="";
		if (!isset($_POST["sujet"])) $_POST["sujet"]="";
		if (!isset($_POST["message"])) $_POST["message"]="";
		if (!isset($_POST["captcha"])) $_POST["captcha"]="";
		
		$msg="";
		$msg1="";
		$flag=1;
		
		// CI-DESSOUS remplacez l'adresse ($destinataire="contact@votreadresse.com";) par la votre
		
		if ( $_POST["action"]=="Envoyer" && 
				eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$",$_POST["email"])
				&& $_POST["nom"]<>"" && $_POST["prenom"]<>""
				&& $_POST["sujet"]<>"" && $_POST["message"]<>""
				&& ( strtolower ($_POST["captcha"])==$_SESSION["phrase"] XOR strtolower($_POST["captcha"])==$_SESSION["phrase1"] XOR strtolower($_POST["captcha"])==$_SESSION["phrase2"] XOR strtolower($_POST["captcha"])==$_SESSION["phrase3"])
			)
		{
			$headers ='From: "Formulaire contact"<form-site@lala.fr>'."\n";
		     $headers .='Reply-To: '.$_POST["email"]."\n";
		     $headers .='Content-Type: text/html; charset="utf-8"'."\n";
		     $headers .='Content-Transfer-Encoding: 8bit';
		     $htmll='';	 
			$destinataire="contact@votreadresse.com"; //mettez ici votre adresse e-mail 
			$objet="Formulaire de contact du site "; // titre du mail automatique
			$message_envoi="<html>\n<head>\n<title>Contact</title>\n</head>\n<body style='text-align : center; color : inherit; background-color : #ffffdb; background-image : url(http://www.2aide.fr/styles/default/fondleft.gif); background-repeat : repeat-y;'>\n<div style=' position : absolute; top : 0; left : 0; background-image : url(http://www.2aide.fr/styles/default/fond.gif); background-repeat : no-repeat; background-position: 20px left ; width : 100%; height: 45px; color : inherit; background-color : #ff8c00;' ><h1 style='text-align : center; margin-top : 55px;'>Vous avez reçu une demande de contact !</h1>\n</div> \n";
			$message_envoi.="<div style='margin-top : 100px;'>\n<p>Voici le contenu : </p>\n"; //declaration du contenu du message
			$message_envoi.="<p><span style='text-decoration: underline;'>Nom du contact</span> :  ".$_POST["nom"]."</p> \n";
			$message_envoi.="<p><span style='text-decoration: underline;'>Prénom du contact</span> : ".$_POST["prenom"]."</p> \n";
			$message_envoi.="<p><span style='text-decoration: underline;'>E-mail du contact</span> : <a href=\"mailto:".$_POST["email"]."\">".$_POST["email"]."</a></p> \n";
			$message_envoi.="<p><span style='text-decoration: underline;'>Site web</span> : <a href=\"".$_POST["url"]."\">".$_POST["url"]."</a></p> \n";
			$message_envoi.="<p><span style='text-decoration: underline;'>Sujet</span> : ".$_POST["sujet"]."</p> \n";
			$message_envoi.="<p><h3 style='text-decoration: underline;'>Message du contact : </h3>\n<p>".$_POST["message"]."</p>\n</div> \n\n</body>\n</html>"; //rajouter apres cette ligne les autres elements du formulaire
			
			mail($destinataire,$objet,$message_envoi,$headers); // envoi du message
			
			$flag=0; //si tout est OK, on passe cette variable a 1
		}
		else 
		{ if (($_POST["email"]<> "" && $_POST["message"]<>"") && !eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$",$_POST["email"]) )
			{ $msg="<span class='valeur'>L'adresse Email saisie n'est pas valide<br>Merci de corriger</span><br>&nbsp;<br>";
			  $colmail="style = 'color : inherit; border : solid #000000 1px; background-color :";
			  $sp1="&nbsp;<br>";
			}
			
			 if ( ( $_POST["captcha"]=="" && $_POST["message"]<>"" )
					XOR ($_POST["captcha"]<>""
						 &&	( strtolower ($_POST["captcha"]) <> $_SESSION["phrase"] 
								  && strtolower($_POST["captcha"]) <> $_SESSION["phrase1"]
								  && strtolower($_POST["captcha"]) <> $_SESSION["phrase2"]
								  && strtolower($_POST["captcha"]) <> $_SESSION["phrase3"] 
							)
						)
				)
				{
				  $msg1="<span class='valeur'>Vous n'avez pas saisi correctement le nom de l'image qui apparait en bas</span><br>&nbsp;<br>";
				  $sp1="&nbsp;<br>";
				  $colcap="style = 'color : inherit; border : solid #000000 1px; background-color :";
				}
				
			 if ( ( $_POST["prenom"]<>"" OR $_POST["sujet"]<>"" OR $_POST["message"]<>"" OR $_POST["email"]<>"" OR $_POST["captcha"]<>"" ) && $_POST["nom"]=="" )
				{ $colnom="style = 'color : inherit; border : solid #000000 1px; background-color :";
				  $sp1="&nbsp;<br>Vous n'avez pas saisi<br>";
				  $msg2="<span class='valeur'>Votre nom.</span><br>&nbsp;";
				}
				
			 if (($_POST["nom"]<>"" OR $_POST["sujet"]<>"" OR $_POST["message"]<>"" OR $_POST["email"]<>"" OR $_POST["captcha"]<>"") && $_POST["prenom"]=="")
				{ $colprenom="style = 'color : inherit; border : solid #000000 1px; background-color :";
				  $sp1="&nbsp;<br>Vous n'avez pas saisi<br>";
				  $msg3="<span class='valeur'>Votre prénom.</span><br>&nbsp;";
				}
				
			  if (($_POST["prenom"]<>"" OR $_POST["nom"]<>"" OR $_POST["message"]<>"" OR $_POST["email"]<>"" OR $_POST["captcha"]<>"") && $_POST["sujet"]=="")
				{ $colsujet="style = 'color : inherit; border : solid #000000 1px; background-color :";
				  $sp1="&nbsp;<br>Vous n'avez pas saisi<br>";
				  $msg4="<span class='valeur'>Le sujet du message.</span><br>&nbsp;";
				}
				
			  if (($_POST["prenom"]<>"" OR $_POST["sujet"]<>"" OR $_POST["nom"]<>"" OR $_POST["email"]<>"" OR $_POST["captcha"]<>"") && $_POST["message"]=="")
				{ $colmes="style = 'color : inherit; border : solid #000000 1px; background-color :";
				  $sp1="&nbsp;<br>Vous n'avez pas saisi<br>";
				  $msg5="<span class='valeur'>Votre message.</span><br>&nbsp;";
				}
				
			  if (($_POST["prenom"]<>"" OR $_POST["sujet"]<>"" OR $_POST["nom"]<>"" OR $_POST["message"]<>"" OR $_POST["captcha"]<>"") && $_POST["email"]=="")
				{ $colmail="style = 'color : inherit; border : solid #000000 1px; background-color :";
				  $sp1="&nbsp;<br>Vous n'avez pas saisi<br>";
				  $msg6="<span class='valeur'>Votre Email.</span><br>&nbsp;";
				}
		}
			 
		// debut de la gestion de l'affichage du captcha
		$monfichier=fopen("include/captcha.php","r");
		$i=0;
		
		while(!feof($monfichier))
		{
		  $montab[$i]=fgets($monfichier,4096);
		  $i++;
		}
		
		fclose($monfichier);
		shuffle($montab);
		$elem0=explode(";",$montab[0]);
		$phrase=$elem0[1];
		$phrase1=$elem0[2];
		$phrase2=$elem0[3];
		$phrase3=$elem0[4];
		$audio=$elem0[5];
		$_SESSION["phrase"]=$phrase;
		$_SESSION["phrase1"]=$phrase1;
		$_SESSION["phrase2"]=$phrase2;
		$_SESSION["phrase3"]=$phrase3;
		$img="<span><img src='include/img_captcha/".$elem0[0]."' width='90px' alt=''></span>";
		//fin de la gestion du captcha
				
		
		 
			if ($colnom<>"") {$colnom1=$colnom.$colorhaut.";'";}
			if ($colprenom<>"") {$colprenom1=$colprenom.$colorhaut.";'";}
			if ($colsujet<>"") {$colsujet1=$colsujet.$colorhaut.";'";}
			if ($colmes<>"") {$colmes1=$colmes.$colorhaut.";'";}	
			if ($colmail<>"") {$colmail1=$colmail.$colorhaut.";'";}
			if ($colcap<>"") {$colcap1=$colcap.$colorhaut.";'";}	

		$file = 'contact.php';
		if($flag==0)
		{
		 // quand le message est parti voici ce qui est affiche, avec un lien retour vers la page de votre choix
		 //libre a vous de proceder aux modifications que vous souhaitez
		 $display = 'style="display : none;"';
		 $ok = '<br><br><h3>Merci pour votre message, nous vous répondrons dans les meilleurs délais<br>';
		 $ok1 = '<a href="contact.php">Retour</a></h3>'; 
		}
		 
		if($flag==1)
		{
		  $display = "";
		  $ok = "";
		  $ok1 = "";
		}
		
		if(eregi('^http://', $_POST["url"]))
		{$http = '';}
		else {$http = 'http://';}
		//substr($_POST["url"], 7);

	?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="fr">
<head>
	<meta http-equiv="Content-Language" content="fr">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="generator" content="Notepad++">
	<meta name="publisher" content="2aide">
	<meta name="author" content="2aide" lang="fr">
	<link rel="stylesheet" media="screen, projection" type="text/css" href="styles/style.css">
	<!-- ÿ caractere pour reconnaissance utf8  astuce pour que notepad++ enregistre en UTF8 sans bom meme si le fichier ne contient aucun caractere accentue (remplace ici par des entites html)-->
	<title>Formulaire de contact</title>
	<meta name="Description" content="Les divers moyens de contacter machin.">
</head>

<body>
	<!-- A partir d'ici il s'agit du traitement du formulaire (ce qui est apparent)-->

	<div id="corps">
	
		<div id="centre">
			<br>
			<?php echo $ok.$ok1; ?>
			
			<div  <?php echo $display; ?>>
				<form method="post" name="contact" action="<?php echo $PHP_SELF ?>">
					<fieldset>
						<legend>Formulaire de Contact<br>Remplissez tous les champs marqués d'une *.</legend>
						<p><label <?php echo $colnom1; ?>>&nbsp;Nom * : </label><input type="text" name="nom" value="<?php echo $_POST["nom"] ?>"></p>
						<p><label <?php echo $colprenom1; ?>>&nbsp;Prénom * : </label><input type="text" name="prenom" value="<?php echo $_POST["prenom"] ?>"></p>
						<p><label <?php echo $colmail1; ?>>&nbsp;E-mail * : </label><input type="text" name="email" value="<?php echo $_POST["email"] ?>"></p>
						<p><label>Site web : </label><input type="text" name="url" value="<?php echo $http.$_POST["url"] ?>"></p>
						<p><label <?php echo $colsujet1; ?>>&nbsp;Sujet * : </label><input type="text" name="sujet" value="<?php echo $_POST["sujet"] ?>"></p>
						<!-- vous pouvez rajouter des éléments de formulaires ici -->
						<p><label <?php echo $colmes1; ?>>&nbsp;Message * : <br></label><textarea name="message" cols="35" rows="8"><?php echo $_POST["message"] ?></textarea></p>
						
						<div>
							<div style="float: left;"><?php echo $img ?></div>
							
							<div style="float: left;">
								<br><br><span <?php echo $colcap1; ?>><==&nbsp;Écrivez le nom de ce que vous voyez à gauche : </span>
								<input type="text" name="captcha" size="15"><br>
								<script type="text/javascript" src="player.js"></script>
								
								<div>
									<script type="text/JavaScript">
									  document.write("Cliquez sur ce bouton: ");
									</script>
									
									<a href="include/img_captcha/<?php echo $audio.'"'; ?>></a>
									
									<noscript>
									  <a href="include/img_captcha/<?php echo $audio.'"'; ?>><img src="images/play.png" alt="bouton play">Téléchargez le code de validation en Mp3.</a>
									</noscript>
									
									<script type="text/JavaScript">
									  document.write(" pour écouter le code de validation.");
									</script>
									
									<p class="petit" <?php echo $colcap1; ?>>Ne cherchez rien de compliqué un seul mot, pas de pluriel ni d'accents, ça marche en Français Espagnol et Anglais.</p>
								</div>
								
							</div>
							
							<div class="stopfloat"></div>
						</div>
						
					</fieldset>
					
					<input type="submit" name="action" value="Envoyer">&nbsp;&nbsp;<input type="reset" name="reset" value="Réinitialiser" class="button">
					
					<p class="left" style="font-size : 8px;">
						<?php
							// Ce script a ete cree gratuitement pour vous !
							// Merci de laisser les lignes suivantes pour faire connaitre le script...
							echo "\n\n\n\n\n\n<!--
							###########################################################
							Formulaire de contact + Captcha modifie et propose par : Patrick HAMY - 15-12-2007
							Les 36 images du captcha sont realisees par Patrick HAMY Il est interdit de les monnayer !
							Site: http://www.patrickhamy.net/
							Licenge : GPL/Le script peut etre modifie et propose, a condition de ne pas enlever 
							les mentions et liens correspondant a son origine ! 
							Le script est gratuit et doit imperativement le rester !
							###########################################################
							###########################################################
							Le Captcha a ete modifie par www.2aide.fr le 8-06-2008
							il est ici base sur des images a reconnaitre, une alternative audio est aussi proposee
							Ce script reste gratuit et vous pouvez obtenir le code modifie sur simple demande depuis le site www.2aide.fr
							Ce scrit est GRATUIT, et vous sera fourni sur simple demande mais 2aide peut, aussi, vous proposer son installation dans le cadre de ces prestations
							###########################################################
							--> \n\n\n\n\n ";
							echo '<a href=" http://www.patrickhamy.net/" title="code original" onclick="window.open(this.href);return false;" class="signature">Proposé par : HAMY</a>';
							//Merci
						?>
					</p>
				</form>
			</div>
		</div>
		
		<div id="colonne2">
			<p class="centre" style="color : #ffffff; border : solid #000000 1px; background-color : <?php echo $colorhaut.'">'.$msg.$msg1.$sp1.$msg2.$msg3.$msg4.$msg5.$msg6; ?></p>
			
			<div class="cadre">
				<h3>les coordonnés<br>de ...</h3>
				<span class="valeur">Tél</span> :
				<br>
				<a href="include/img_captcha/tel.mp3"></a><noscript><a href="include/img_captcha/tel.mp3"><img src="images/play.png" alt="bouton play"><img src="images/tel.php" alt="Téléphone"></a></noscript>
				
				<script type="text/JavaScript">
				  document.write("<img src=\"\images\/tel.php\" alt=\"Téléphone\"\>");
				</script>
				
				<br>
				<br>
				<span class="valeur">Fax</span> :
				<br>
				<a href="include/img_captcha/fax.mp3"></a><noscript><a href="include/img_captcha/fax.mp3"><img src="images/play.png" alt="bouton play"><img src="images/fax.php" alt="Fax"></a></noscript>
				
				<script type="text/JavaScript">
				  document.write("<img src=\"\images\/fax.php\" alt=\"Fax\"\>");
				</script>
				
				<br>
				<br>
				<div class="valeur">
				  <a href="include/img_captcha/mell.mp3"></a><noscript><a href="include/img_captcha/mell.mp3"><img src="images/play.png" alt="bouton play">Email</a></noscript>
				
					<script type="text/JavaScript">
					  document.write("Email");
					</script>
				
				  <br>
				
					<img src="images/cont.gif" alt="mel">
				</div>
			
				<br>
				<br>
			
				<div class="valeur">
				  <a href="include/img_captcha/post.mp3"></a>
				  <noscript><a href="include/img_captcha/post.mp3"><img src="images/play.png" alt="bouton play">Adresse postale:</a></noscript>
					<script type="text/JavaScript">
					  document.write("Adresse postale:");
					</script>
				</div>
			
			  <img src="images/add.php" alt="Adresse postale">
			</div>
		</div>
	</div>
	<!-- Ici c'est la fin du traitement du formulaire-->
</body>
</html>

Conclusion :


Je disais m'être inspiré de ce script pour celui de la mini boutique, mais en relisant pour poster ici je m'aperçois que je m'en suis quand même pas mal éloigné ;-)
Encore une fois je débute alors merci de vos remarques surtout au niveau sécurité.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
510
Date d'inscription
lundi 27 novembre 2006
Statut
Membre
Dernière intervention
5 juillet 2009
3
J'ai oublié de préciser dans mes messages
Je suis étudiant en informatique, niveau bac +4 actuellement, et j'ai eu pas mal de cours d'ergonomie, donc mon avis est également un peu pondéré.

Comme par exemple sur ce site, un détail mais qui influence beaucoup : le petit bouton tout zarb au droite dans la ligne "Commentaire de chose le tant à 42h42 et 42s", il sert à quoi ? Il est pas intuitif, ya pas d'attribut title dans le lien qui permet d'afficher au survol de la souris un petit descriptif de ce a quoi sa sert...

Ce sont des détails de ce genre qui font ou pas apprécier un site web.

Donc, quelques "conseils" tirés des cours : ne rien mettre qui dure plus de 3s _grand maximum_. L'utilisateur est toujours pressé, et a horreur d'attendre sans que rien se passe.
Si quelque chose prend plus de 2s (genre requete dans une base, téléchargement, toussa) il faut mettre un message, pour montrer qu'un traitement est en cours.
Toujours bien construire son code (attributs alt et title pour les images, title explicite pour les liens, ...)
Et surtout, faire attention aux couleurs utilisées, aux styles de textes... (3 couleurs différentes maxi pour le texte, 2 styles d'écriture maxi), ne pas trop charger la page (animations, images partout)...
Messages postés
510
Date d'inscription
lundi 27 novembre 2006
Statut
Membre
Dernière intervention
5 juillet 2009
3
Uniquement l'anim, et le fait de ne rien pouvoir faire d'autre que cliquer sur le logo.
Et comme je suis pas une personne patiente, ben j'ai pas voulu attendre les 15 secondes qu'elle disparaisse.
J'ai juste regardé la page contact, (ce pour quoi j'étais venu à la base), car j'ai supposé que la captcha se trouvait dans le formulaire pour te contacter (vu que dans le code ca envoie un mail). Je ne l'aurais pas trouvée là, j'aurais passé mon chemin (again, juste à cause de ma première impression)
Messages postés
7
Date d'inscription
jeudi 8 mars 2007
Statut
Membre
Dernière intervention
27 juin 2008

Ton avis m'intéresse, c'est uniquement l'anim qui t'as fait fuir, ou autre chose.

Après ce site s'adresse à mes futurs clients qui sont tout sauf des geek sinon ils n'auraient pas besoin de moi, le contenu par lui même a donc peu de chances de t'intéresser.
Surtout qu'il est encore bien léger.

J'ai aussi joué avec un styleswitcher qui agit sur un blog Wordpress, un livre d'or (signatux) et l'ensemble du site.
J'essaierai de poster ça ici un jour mais il y a des morceaux partout et c'est pas facile à décrire clairement.

Merci pour tes remarques
Messages postés
510
Date d'inscription
lundi 27 novembre 2006
Statut
Membre
Dernière intervention
5 juillet 2009
3
Honnêtement, non, je n'ai pas visité un peu plus. Le début ne m'a pas donné envie, et c'est malheureusement déterminant pour savoir si on va avoir envie de rester sur un site web ou pas.
(J'ai juste regardé la page contact pour voir la captcha en action)

Mais j'y repasserai peut-être un jour, au hasard d'une recherche sur google, ou lors de ta prochaine source... Qui sait...

Sinon, très bonne idée la captcha. Perso je suis resté encore sur les bonnes vieilles lettres illisibles avec un fond horrible, va falloir que je pense a me recycler.
Messages postés
7
Date d'inscription
jeudi 8 mars 2007
Statut
Membre
Dernière intervention
27 juin 2008

Ok, je vais corriger ça, tu as raison.
Comme je t'ai dis en 512k je ne vois même pas toute l'anim, faut que j'essaie de le faire en flash pour voir le poids.

Merci.

Au passage si tu as visité un peu plus il se peut que tu sois tombé sur un gros bug sur la page astuces ( dont il faut que je reprenne/complète vite le contenu ) , j'ai mis à jour des meta keywords 5min avant de partir j'ai du effacer un truc qui fallait pas au passage allé dans un quart d'heure ce sera réglé)
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.