Un formulaire avec Javascript et PHP

Un formulaire avec Javascript et PHP

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulaire Javascript et PHP avec code anti-spam</title>
<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>
<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é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épondre à la question !';
        document.getElementById('msg_erreur').style.display='block4;
        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éponse à 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';
$db = mysqli_connect ($hostname, $username, $password, $bdd);
// Affichage du captcha
$req = "SELECT questions, reponses FROM questions_reponses ORDER BY RAND() LIMIT 1";
$rep = mysqli_query($db, $req);
$row = mysqli_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 :

$db = mysqli_connect ($hostname, $username, $password, $bdd);

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épondre à la question !";
    } elseif ($_POST['captcha'] != $_SESSION['reponse']) {
        $err.= "Votre réponse à 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é</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 !

Catégorie Tutoriels - Écrit par le 18/03/2010 - Article lu 20 012 fois - 7 commentaires

7 réflexions sur ce billet

Écrit 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

Écrit par Hervé
Le 18/03/2010 à 15h22

Tu pourras trouver le script du captcha utilisé sur ce blog à l'adresse ci-dessous :

http://www.captcha.fr/

Écrit par jo
Le 22/06/2010 à 00h52

bonjour,

pour le script contact avec captcha, ou je met mon adresse mail pour recevoir le message ?????

Merci
Cordialement

Écrit par Hervé
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 :-)

Écrit par Hervé
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 :-)

Écrit par ludo
Le 12/01/2017 à 13h18

Bonjour.

Très sympa ce petit tuto !

J'ai un petit souci. Je ne vois pas ou est la ligne "mysql_select_db($nom_base);" dans votre code afin d'y 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épondre à la question !";
} elseif ($_POST['captcha'] != $_SESSION['reponse']) {
$err.= "Votre réponse à la question est incorrecte !";

Merci de votre aide !

Écrit par Hervé
Le 13/01/2017 à 11h42

Ludo

J'ai corrigé. ;)

Écrire un commentaire

Pseudo

E-mail (non publié)

Votre commentaire

Recevoir une notification par e-mail lorsqu'une réponse est postée

Veuillez recopier le code de sécurité : tbjih8i8hm

Haut de page