Formulaire de contact capcha objet a reconnaitre alternative audio

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

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.