Comment ajouter le captcha de google a mon formulaire

flexi2202 -  
bonjour a tous
j ai un formulaire de contact avec lequel j enregistre dans ma base de donnée le formulaire de l utilisateur comme archive
et avec lequel je reçois également en retour par mail ce fameux formulaire de contact

mais je souhaiterais lui ajouter le captcha de google

après lecture de mon code et sans erreur de ma part je n ai aucun fichier qui traite les données qui sont entrées

donc je devrais ajouter un fichier php pour le traitement via une action "" ? pour le traitement des données

dans le même temps peut être des remarques sur la construction du fichier

voici mon formulaire actuel 

<?php
session_start();
//traitement pour remplir la base de donnée

if (!empty($_POST["send"]))
{
    //Si les variable $_POST existent et ne sont  pas vide, on récupère la valeur, sinon je mets les variables  à NULL
    $name = !empty($_POST['name']) ? $_POST['name'] : NULL;
    $email = !empty($_POST['email']) ? $_POST['email'] : NULL;
    $subject = !empty($_POST['subject']) ? $_POST['subject'] : NULL;
    $messager = !empty($_POST['messager']) ? $_POST['messager'] : NULL;

    // les variables sont prêtes a êtres utilisées
    //$name = $_POST["name"];
    //$email = $_POST["email"];
    //$subject = $_POST["subject"];
    //$messager = $_POST["messager"];

//on se connecte a la base de donnée
        include ('base.php');

    //préparation de la requête et des variables
    $sql = "INSERT INTO contact (name, email,subject, message) VALUES(?, ?, ?, ?)";
    $datas = array($name,$email,$subject,$messager );
    //Execution de la requete
    try
    {
        $requete = $bdd->prepare($sql);
        $requete->execute($datas);
    }
    catch(Exception $e)
    {
        // en cas d'erreur :
        echo " Erreur ! " . $e->getMessage();
        echo " Les datas : ";
        print_r($datas);
    }
  
    if ($requete)
    {
        $db_msg = "Vos informations de contact sont enregistrées avec succès.";
        $type_db_msg = "success";
        header("location:reponses-formulaire.php");
    }
    else
    {
        $db_msg = "Erreur lors de la tentative d'enregistrement de contact.";
        $type_db_msg = "error";
    }
}
//fin de la transmission des données dans la table

//triatement de l envois par mail
if (!empty($_POST["send"]))
{
    //$messager = $_POST["messager"];
    //$name = $_POST["name"];
    //$subject = $_POST["subject"];
    //$email = $_POST["email"];
    // on entre un ou Plusieurs destinataires
    $to = 'perroquet@hotmail.com'; // notez la virgule
    // Sujet
    //$subject= "une réussite";
    // message
    $message = '
   <html>
   <head>
   <title>Voici les reponses au formulaire</title>
   </head>
   <body>
   <p>Voici le formulaire de contact</p>
   <tr>
   <td>le nom     </td><td>' . $name . '</td></br>
   </tr>
   <tr>
   <td>l adresse mail    </td><td>' . $email . '</td></br>
   </tr>
   <tr>
   <td>le sujet     </td><td>' . $subject . '</td></br>
   </tr>
   <tr>
   <td>le texte    </td><td>' . $messager . '</td></br>
   </tr>
   </body>
   </html>
   ';
    // Pour envoyer un mail HTML, l'en-tête Content-type doit être défini
    $headers[] = 'MIME-Version: 1.0';
    $headers[] = 'content-type: text/html; charset=utf-8';
    // En-têtes additionnels
     $headers[] = 'From: ' . $email . "\r\n" . 'Reply-To: ' . $name . "\r\n" . 'X-Mailer: PHP/' . phpversion();
    // Envoi
    //var_dump($headers);
    if (mail($to, $subject, $message, implode("\r\n", $headers)))
    {
        // success message
        echo "Success!<br />";
    }
    else
    {
        // error message
        echo "Fail<br />";
    }
}
?>
<!doctype html>
<html lang="fr">
   <!-- debut head -->
   <head>
      <?php include("./include/head.php"); ?>
	  <title>Formulaire de contat pour la pêche à la perle</title>
      <link rel="shortcut icon" href="https://phil.pecheperle.be/image/la-peche-a-la-perle.ico" type="image/x-icon"/>
	  <meta name="description" content="Une question ,un renseignement sur la pêche a la perle du gardon?utilises le formulaire de contact  ">
	  <link rel="stylesheet" type="text/css" href="/css/banniere-menu-peche-perle.css"/>
      <link rel="stylesheet" type="text/css" href="/css/contact-peche-perle.css"/>
 </head>
   <!-- fin head -->
   
   <!-- debut body -->
   <body style="background-color:#87CEEB;" onLoad="document.getElementById('attente').style.display='none'">
   
    <div class="containerglobal">
	
           <div class="container1 border border-dark" style="padding: 15px;background: #ECE9E7;">
               <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post" style="background: #ECE9E7;">
                  <h1>Formulaire de contact</h1>
                  <div class="form-group">
                     <label for="name">Nom:<span>*</span></label>
                     <input type="text" id="name" name="name" class="form-control" placeholder="Nom" required />
                  </div>
                  <div class="form-group">
                     <label for="email">Email:<span>*</span></label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email"/>
				  </div>
                  <div class="form-group">
                     <label for="subject">Sujet:</label>
                     <input type="text" id="subject" name="subject" class="form-control" placeholder="Demande de renseignement">
                  </div>
	              <div class="form-group">
                     <label for="messager">Le message</label>
                     <textarea name="messager" class="form-control" id="messager" rows="3" placeholder="Message..." required ></textarea>
                  </div>
                  <input type="submit" name="send" value="Envoyer "/>
               </form>
            </div>
         
      </div>
   </body>
   <!-- fin du body-->
</html>

9 réponses

  1.  yg_be Contributeur
    bonjour,
    avant d'ajouter le captcha: le formulaire fonctionne-t-il parfaitement?
    ensuite: quel captcha veux-tu ajouter? google en propose plusieurs.
    1. flexi2202 Auteur
      bonjour yg_be
      merci pour la réponse

      oui le formulaire fonctionne a merveille
      mais depuis 3 jours je reçois des mails bizarre venant de ce formulaire

      d'où ma quête a chercher un captcha

      j ai vu en effet que google avait deux versions
      donc j ai essaye la dernière version 3
      Apparemment le captcha ne se déclenche que si google reconnaît un robot
      1. yg_be Contributeur
        peux-tu montrer ton code php avec le captcha?
    2. flexi2202 Auteur
      oui bien sur
      j ai juste modifie je l ai mis en deux parties
      une qui affiche le formulaire et l autre qui le traite 

      <!doctype html>
<html lang="fr">
   <!-- debut head -->
   <head>
      <?php include("./include/head.php"); ?>
	   <title>Formulaire de contat pour la pêche à la perle</title>
        <link rel="shortcut icon" href="https://phil.pecheperle.be/image/la-peche-a-la-perle.ico" type="image/x-icon"/>
	     <meta name="description" content="Une question ,un renseignement sur la pêche a la perle du gardon?utilises le formulaire de contact  ">
	       <link rel="stylesheet" type="text/css" href="/css/banniere-menu-peche-perle.css"/>
      <link rel="stylesheet" type="text/css" href="/css/contact-peche-perle.css"/>
 
	
</head>
   <!-- fin head -->
   <!-- debut body -->
   <body style="background-color:#87CEEB;" onLoad="document.getElementById('attente').style.display='none'">
   
    <div class="containerglobal">
	
        <!-- debut container entete-->
        <div class="container" style=" max-width: 100%;margin:auto;">
            <?php include("./include/baniere-peche-perle.php"); ?>
            <?php include("./include/menu3.php"); ?>
        </div>
       
       <!-- id attende chargement page -->
        <div id='attente'>
            <p style="text-align: center;font-size: 24px;">Veuillez patienter svp la page est en cours de chargement ...</p>
        </div>

         <body>
            <div class="container1 border border-dark" style="padding: 15px;background: #ECE9E7;">
               <form action="envoyer.php" id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post" style="background: #ECE9E7;">
                  <h1>Formulaire de contact</h1>
                  <div class="form-group">
                     <label for="name">Nom:<span>*</span></label>
                     <input type="text" id="name" name="name" class="form-control" placeholder="Nom" required />
                  </div>
                  <div class="form-group">
                     <label for="email">Email:<span>*</span></label>
                    <!--  <input type="e-mail" id="email" name="email" class="form-control"  placeholder="Email" required>-->
					 <input type="email" class="form-control" id="email" name="email" placeholder="Email" />
		          </div>
                  <div class="form-group">
                     <label for="subject">Sujet:</label>
                     <input type="text" id="subject" name="subject" class="form-control" placeholder="Demande de renseignement">
                  </div>
                  
                  <div class="form-group">
                     <label for="messager">Le message</label>
                     <textarea name="messager" class="form-control" id="messager" rows="3" placeholder="Message..." required></textarea>
					 <input type="hidden" id="recaptchaResponse" name="recaptcha-response">
                  </div>
                  <input type="submit" name="send" value="Envoyer "/>
               </form>
            </div>
            <div class="container" style=" max-width: 100%;margin:auto;">
               <!-- debut pied de page-->
               <?php include("./include/pied-de-page.php"); ?>
               <?php include("./include/footer.php"); ?>
            </div>
      </div>
<script src="https://www.google.com/recaptcha/api.js?render=6LceBwwcAAAAAO3-vnN"></script>
<script>
grecaptcha.ready(function(){
    grecaptcha.execute('6LceBwwcAAAAAO3SuN', {action: 'homepage'}).then(function(token) {
        document.getElementById('recaptchaResponse').value = token
    });
});
</script>
	  
   </body>
   <!-- fin du body-->
</html>


      <?php
session_start();

if (!empty($_POST["send"]))
{

    // On vérifie si le champ "recaptcha-response" contient une valeur
    if (empty($_POST['recaptcha-response']))
    {
        header('Location: index.php');
    }
    else
    {
        // On prépare l'URL
        $url = "https://www.google.com/recaptcha/api/siteverify?secret=6LceBwwcAAAAA15Mg&response={$_POST['recaptcha-response']}";

        // On vérifie si curl est installé
        if (function_exists('curl_version'))
        {
            $curl = curl_init($url);
            curl_setopt($curl, CURLOPT_HEADER, false);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($curl, CURLOPT_TIMEOUT, 1);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
            $response = curl_exec($curl);
        }
        else
        {
            // On utilisera file_get_contents
            $response = file_get_contents($url);
        }

        // On vérifie qu'on a une réponse
        if (empty($response) || is_null($response))
        {
            header('Location: index.php');
        }
        else
        {
            $data = json_decode($response);

            if ($data->success)
            {

                //partie traitement de la base de donnee
                //Si les variable $_POST existent et ne sont  pas vide, on récupère la valeur, sinon je mets la variable $nom à NULL
                $name = !empty($_POST['name']) ? $_POST['name'] : NULL;
                $email = !empty($_POST['email']) ? $_POST['email'] : NULL;
                $subject = !empty($_POST['subject']) ? $_POST['subject'] : NULL;
                $messager = !empty($_POST['messager']) ? $_POST['messager'] : NULL;

                //on se connecte a la base de donnee
                include ('base.php');

                //préparation de la requête et des variables
                $sql = "INSERT INTO contact (name, email,subject, message) VALUES(?, ?, ?, ?)";
                $datas = array(
                    $name,
                    $email,
                    $subject,
                    $messager
                );
                //Execution de la requete
                try
                {
                    $requete = $bdd->prepare($sql);
                    $requete->execute($datas);
                }
                catch(Exception $e)
                {
                    // en cas d'erreur :
                    echo " Erreur ! " . $e->getMessage();
                    echo " Les datas : ";
                    print_r($datas);
                }

                if ($requete)
                {
                    $db_msg = "Vos informations de contact sont enregistrées avec succès.";
                    $type_db_msg = "success";
                    header("location:reponses-formulaire.php");
                }
                else
                {
                    $db_msg = "Erreur lors de la tentative d'enregistrement de contact.";
                    $type_db_msg = "error";
                }

                //fin de la transmission des données dans la table
                //partie traitement envoi du mail
                //$messager = $_POST["messager"];
                //$name = $_POST["name"];
                //$subject = $_POST["subject"];
                //$email = $_POST["email"];
                // on entre un ou Plusieurs destinataires
                $to = 'perroquet@hotmail.com'; // notez la virgule
                // Sujet
                //$subject= "une reussite";
                // message
                $message = '
   <html>
   <head>
   <title>Voici les reponses au sondage</title>
   </head>
   <body>
   <p>Voici le formulaire de contact</p>
   <tr>
   <td>le prenom     </td><td>' . $name . '</td></br>
   </tr>
   <tr>
   <td>l adresse mail    </td><td>' . $email . '</td></br>
   </tr>
   <tr>
   <td>le prenom     </td><td>' . $subject . '</td></br>
   </tr>
   <tr>
   <td>le textera    </td><td>' . $messager . '</td></br>
   </tr>
   </body>
   </html>
   ';
                // Pour envoyer un mail HTML, l'en-tête Content-type doit être défini
                $headers[] = 'MIME-Version: 1.0';
                $headers[] = 'content-type: text/html; charset=utf-8';
                // En-têtes additionnels
                //$headers[] =  "From: " . $name . "<". $_POST["email"] .">\r\n";
                $headers[] = 'From: ' . $email . "\r\n" . 'Reply-To: ' . $name . "\r\n" . 'X-Mailer: PHP/' . phpversion();
                // Envoi
                //var_dump($headers);
                if (mail($to, $subject, $message, implode("\r\n", $headers)))
                {
                    // success message
                    //echo "Success!<br />";
                    
                }
                else
                {
                    // error message
                    //echo "Fail<br />";
                    
                }
            }
        }
    }
}
?>
      1. yg_be Contributeur
        pour que cela aie du sens, peux-tu préciser les noms des deux fichiers?
        et tout fonctionne?
        que fais-tu dans le else de 
        if ($data->success)
        ?
      2. flexi2202 Auteur
        @yg_bemerci pour l aide
        comme tu le sais je ne suis pas un expert mdrrr
        mais j apprends ...

        oui tout semble fonctionner ....
        alors le premier code c est testcontact.php et le deuxième c est envoyer.php

        pour répondre a la question si le test est réussi j écris le formulaire en base de donnée et le formulaire est envoyé
      3. yg_be Contributeur
        @flexi2202donc tout va bien, as-tu une question?
    3. flexi2202 Auteur
      merci pour l aide

      oui j aurais savoir pour quelle raison que le catcha ne demande pas un catcha lorsque un utilisateur envois le formulaire

      et donc aussi une deuxième
      concernant la remarque avec 
      if ($data->success)?

      c est quoi qui pourrait clocher ??
      1. yg_be Contributeur
        que fais-tu dans le else de if ($data->success)?

        que veux-tu dire par "le captcha ne demande pas un captcha"?
      2. yg_be Contributeur
        @yg_beas-tu étudié, et compris, la différence entre les versions 2 et 3 des captcha de google?
      3. yg_be Contributeur
        @yg_besi je vois bien, tu as choisi un captcha v3, mais ton code le traite come si c'était un v2.
      4. flexi2202 Auteur
        @yg_beah bon
        pourtant j ai suivi un tuto
        qui l explique
        a quoi vois tu cela ??
    5. flexi2202 Auteur
      merci pour la réponse

      que fais-tu dans le else de if ($data->success)?

      si le captcha est réussi je passe a mon formulaire

      oui j ai regarder la difference
      c est vrai que j aurais préféré la version 2 grâce a a case a cocher
      mais bon faut aller de l avant
      1. yg_be Contributeur
        pourquoi alors ne pas utiliser la version 2?
        je pense que le tuto était fait pour la version 2, ou bien que tu ne l'as pas bien appliqué.
        pour un v3, il faut vérifier le score, pas uniquement ->success.
    6. flexi2202 Auteur
      Bonjour yg-be

      Merci pour l aide
      on m a toujours dit que cela était mieux d utiliser la dernière version ...dans tout ...
      j ai regarder ce tutoriel qui me semblait le plus facile a comprendre
      https://nouvelle-techno.fr/actualites/integrer-google-recaptcha-sur-votre-site
      1. yg_be Contributeur
        il ne faut pas toujours tout croire.
        la v3 n'offre pas les mêmes possibilités que la v2.
      2. yg_be Contributeur
        celui qui a écrit le tuto n'a pas compris comment fonctionnait le v3.
    7. flexi2202 Auteur
      merci pour l aide

      pffff et pffff et encore pfffff
      alors comment s y retrouver entre les documentations officielles qui ne sont pas claire et les tutos mal réalisé

      connais tu un tutoriel valable pour mettre en place al version 2 a tout hasard
      1. yg_be Contributeur
        je pense que ton code est bon pour la v2, il suffit d'utiliser des clés v2.
      2. yg_be Contributeur
        @yg_beplus précisément, je pense que ton code de vérification est bon, pas le code pour intégrer le captcha dans le formulaire.
    9. flexi2202 Auteur
      en fait non il ne suffit pas juste de changer les clés

      https://developers.google.com/recaptcha/docs/display

      pour la première partie cela est simple est claire

      et donc je n aurais que cela a faire
      ca me semble bizarre que cela ne soit pas compliqué

      Rendre automatiquement le widget reCAPTCHA
      La méthode la plus simple pour afficher le widget reCAPTCHA sur votre page consiste à inclure la ressource JavaScript nécessaire et une g-recaptchabalise. La g-recaptchabalise est un élément DIV avec le nom de la classe g-recaptchaet la clé de votre site dans l' data-sitekeyattribut : 

      <html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>