Accueil >> Articles >> Un formulaire avec Javascript et PHP

Un formulaire avec Javascript et PHP

Catégorie : Tutoriels - Ecrit par Hervé le 18/03/2010 - Article lu 1300 fois
 
  • Note actuelle 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Note actuelle : 0.0/5 (0 votes)

Un formulaire de contact en javascript avec un captcha, cela vous intéresse ?

Vous me direz que c'est sympa mais inutile si l'internaute a désactivé Javascript dans les options de son navigateur. Justement, je vais vous expliquer comment parer à cette éventualité en contrôlant les champs avant l'envoi du formulaire en PHP.

Pour réaliser ce formulaire, nous avons besoin de 4 fichiers :

  • Le fichier index.php qui contiendra le formulaire
  • Le fichier form.js qui contiendra les contrôles en javascript
  • Le fichier md5.js qui contrôlera le captcha crypté
  • Le fichier style.css pour l'habillage de la page

Nous allons créer une table dans la base de données, 3 fichiers et récupérer le fichier md5.js sur le site de l'auteur.

La table questions_reponses :

CREATE TABLE IF NOT EXISTS `questions_reponses` (
    `id` int(11) NOT NULL auto_increment,
    `questions` varchar(100) NOT NULL,
    `reponses` varchar(20) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

INSERT INTO `questions_reponses` (`id`, `questions`, `reponses`) VALUES
(1, 'Quelle est la couleur du cheval blanc d''Henri IV', 'blanc'),
(2, 'Quelle est la capitale de la France', 'paris'),
(3, 'Quel est le total de 5 + 2', '7');

Vous pouvez bien sur ajouter d'autres questions en gardant toujours à l'esprit que la réponse doit être évidente pour le lecteur. Plus vous aurez de questions-réponses, mieux ce sera.

Le fichier index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulaire Javascript et PHP avec code anti-spam</title>
<div class="conteneur">
    <form id="form" onsubmit="return VerifForm(this)" method="post" action="">
        <div id="msg_erreur"></div>
        <p><label>Nom</label> 
        <input type="text" name="nom" id="nom" value="<?php echo $nom; ?>" /></p>
        <p><label>E-mail</label>
        <input type="text" name="email" id="email" value="<?php echo $email; ?>" /></p>
        <p><label><?php echo $question; ?><br />
        <small>R&eacute;pondre en minuscule</small></label>
        <input type="text" name="captcha" id="captcha" /></p>
        <p><label>&nbsp;</label><input type="submit" name="valider" value="Valider" /></p>
        <input type="hidden" name="crypt" id="crypt" value="<?php echo $crypt; ?>" />
    </form>
</div>
</body>
</html>

Vous noterez que pour l'action du formulaire, je ne la renvoi pas vers un autre fichier. Si vous souhaitez le faire, remplacez dans la balise form :

action=''

Par

action='votre_fichier.php'

Le fichier form.js :

function VerifForm(form) {
    var nom=document.getElementById('form').nom.value;
    var email=document.getElementById('form').email.value;
    var captcha=document.getElementById('form').captcha.value;
    var crypt=document.getElementById('form').crypt.value;
	
    if (nom == "") {
        document.getElementById('msg_erreur').innerHTML='Veuillez indiquer votre nom !';
	document.getElementById('msg_erreur').style.display='block';
	document.getElementById('msg_erreur').className='focus';
    	form.nom.focus();
    	return false;
    } else {
	document.getElementById('msg_erreur').style.display='none';
    }
	
    if (email == "") {
	document.getElementById('msg_erreur').innerHTML='Veuillez indiquer votre e-mail !';
	document.getElementById('msg_erreur').style.display='block';
	document.getElementById('msg_erreur').className='focus';
    	form.email.focus();
    	return false;
    } else {
	document.getElementById('msg_erreur').style.display='none';		
    }
	
    if (captcha == "") {
        document.getElementById('msg_erreur').innerHTML=
        'Veuillez r&eacute;pondre &agrave; la question !';
	document.getElementById('msg_erreur').style.display='block';
	document.getElementById('msg_erreur').className='focus';
    	form.captcha.focus();
    	return false;
    } else {
	document.getElementById('msg_erreur').style.display='none';
    }
	
    if (hex_md5(captcha) != crypt) {
        document.getElementById('msg_erreur').innerHTML=
        'Votre r&eacute;ponse &agrave; la question est incorrecte !';
	document.getElementById('msg_erreur').style.display='block';
	document.getElementById('msg_erreur').className='focus';
    	form.crypt.focus();
    	return false;
    } else {
	document.getElementById('msg_erreur').style.display='none';
    }
    return true;
}

Rien de particulier dans ce fichier si ce n'est que l'on affiche le message dans une balise div plutôt qu'une alerte pas toujours très esthétique et qui nécessite une action supplémentaire pour l'internaute.

Le fichier style.css :

.conteneur {
    width: 1000px;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
#msg_erreur {
    display: none;
    color: #666;
}
input {
    border: 1px solid #ccc;
    color: #666;
    padding: 4px;
}
input.focus {
    border: 1px solid #666;
    color: #666;
}
.erreur {
    color: #666;
}
label {
    float: left;
    width: 350px;
}

Nous allons maintenant apporter des modifications pour afficher le captcha et les contrôles en PHP dans le cas où l'internaute a désactivé Javascript dans les options de son navigateur.

Ajouter au début du fichier index.php :

<?php
session_start();

// Connexion a la BDD 
$bdd = 'nom_bdd';
$hostname = 'serveur';
$username = 'login';
$password = 'mot_de_passe';
$connect = mysql_connect ($hostname, $username, $password);
mysql_select_db($bdd);

// Affichage du captcha  
$req = "SELECT questions, reponses FROM questions_reponses ORDER BY RAND() LIMIT 1";
$rep = mysql_query($req);
$row = mysql_fetch_array($rep);
$_SESSION['reponse'] = $row['reponses'];  
$crypt = md5($row['reponses']);
?>

A partir de ce moment le captcha est visible et fonctionnel.

Nous allons maintenant modifier le fichier index.php pour contrôler le bon remplissage des champs dans le cas ou Javascript est désactivé :

Juste après :

mysql_select_db($nom_base);

Ajouter :

if (isset($_POST['valider'])) {
    // Controle des champs si javascript est desactive
    $err = '';
	
    if ($_POST['nom'] == "") {
	$err.= "Veuillez indiquer votre nom !";
    } elseif ($_POST['email'] == "") {
	$err.= "Veuillez indiquer votre email !";
    } elseif ($_POST['captcha'] == "") {
	$err.= "Veuillez r&eacute;pondre &agrave; la question !";
    } elseif ($_POST['captcha'] != $_SESSION['reponse']) {
	$err.= "Votre r&eacute;ponse &agrave; la question est incorrecte !";
    }
	
    // Traitement des donnees du formulaire
    if ($err == "") {
	// Enregistrement en BDD (si besoin)
	Insérer votre requête à cet endroit
        
        // Envoi du mail
        $sujet = "Mail depuis mon site";
 
        $msg_texte = "Votre texte<br /><br />";
	$msg_texte.= "E-mail : ".$_POST['email']."<br /><br />";
	$msg_texte.= "Nom : ".$_POST['nom'];
					
 
        $entete = "Reply-to: noreply@votre-site.com"; 
        $entete.= "From: Mon site <noreply@mon-site.com>";
	$entete.= "MIME-Version: 1.0"; 
        $entete.= "Content-Type:text/html; charset=utf-8;";

        $send = mail("votre-email", $sujet, $msg_texte, $entete);

        // Tag pour afficher le bon envoi du formulaire
        $ok = true;
    }
}

Pour afficher un message après l'envoi du formulaire, juste après :

<div class="conteneur">

Ajouter :

<?php
if ($ok == true) {
    echo '<div class="erreur">Message envoy&eacute;</div>';
} else {
?>

Et pour afficher les messages d'erreur en PHP, juste après :

<form id="form" onsubmit="return VerifForm(this)" method="post" action="">

Ajouter :

<?php
if ($err) {
    echo '<div class="erreur">'.$err.'</div>';
}
?>

Après :

</form>

Ajouter :

<?php
}
?>

Voilà votre formulaire est prêt. Il ne reste plus qu'à tester le résultat en cliquant ici.

Vous pouvez évidemment apporter votre touche personnelle en stylisant les messages d'erreurs ou ajouter d'autres contrôles comme la vérification de la syntaxe de l'adresse e-mail par exemple.

A vos commentaires !


Partager cet article :
Twitter Facebook Google
5 commentaires
Ecrit par ben
Le 18/03/2010 à 15h19
Bueno, intéressant
merci ;)
as tu une source pour le captcha comme celui dessous avec les chiffres et lettres?
merci

Ecrit par Infiniclick
Le 18/03/2010 à 15h22
Tu pourras trouver le script du captcha utilisé sur ce blog à l'adresse ci-dessous :

http://www.captcha.fr/

Ecrit par jo
Le 22/06/2010 à 00h52
bonjour,

pour le script contact avec captcha,

OU je mais mon adresse mail pour recevoir
le message ?????

MERCI
CORDIALEMENT

Ecrit par Infiniclick
Le 22/06/2010 à 01h00
Salut

Tu recherches :

// Envoi du mail
Insérer l'envoi du mail

Et tu remplaces par ton script pour envoyer ton mail :-)

Ecrit par Infiniclick
Le 22/06/2010 à 01h15
J'ai rajouté un petit script d'envoi de l'e-mail après le post du formulaire.

Je ne l'ai pas testé, alors merci de me signaler si vous rencontrez une erreur :-)

Annuaire Infinisearch