Solution anti-spam efficace. Des conseils?

Je travaille actuellement sur le site internet d’une entreprise et nous avons un formulaire de contact que nous utilisons pour générer des leads. Cependant, nous avons remarqué une augmentation considérable des soumissions de formulaire par des bots, ce qui engendre une perte de temps pour trier les leads pertinents. Je suis donc à la recherche d’une solution pour empêcher le remplissage automatique des formulaires par des bots. Quelqu’un a-t-il des suggestions sur la meilleure façon de mettre en place une protection anti-spam pour les formulaires?

Bonjour Gabriel29,

Voici un exemple de formulaire HTML avec un filtre anti-spam intégré qui utilise une technique de validation CAPTCHA pour éviter les soumissions de spam. Les données du formulaire seront envoyées via un webhook après avoir passé la validation anti-spam :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire avec filtre anti-spam</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  textarea {
    height: 150px;
  }

  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h2>Formulaire de contact</h2>
<form id="contactForm">
  <div class="form-group">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <div class="form-group" id="captchaContainer"></div>
  <button type="submit" id="submitButton">Envoyer</button>
</form>

<script>
  // Génère un captcha aléatoire (pour l'exemple)
  function generateCaptcha() {
    var captcha = Math.random().toString(36).substring(7);
    return captcha;
  }

  // Valide le captcha saisi
  function validateCaptcha(captchaInput) {
    // Compare le captcha saisi avec celui généré
    var generatedCaptcha = sessionStorage.getItem('captcha');
    return captchaInput === generatedCaptcha;
  }

  // Génère et affiche le captcha dans le formulaire
  function displayCaptcha() {
    var captcha = generateCaptcha();
    sessionStorage.setItem('captcha', captcha);

    var captchaContainer = document.getElementById('captchaContainer');
    captchaContainer.innerHTML = '<label for="captcha">Captcha:</label>' +
      '<input type="text" id="captcha" name="captcha" required>';
  }

  // Soumission du formulaire
  document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var captchaInput = document.getElementById('captcha').value;
    if (!validateCaptcha(captchaInput)) {
      alert('Captcha invalide. Veuillez réessayer.');
      return;
    }

    // Envoyer les données via le webhook (remplacer 'WEBHOOK_URL' par votre URL de webhook)
    var formData = new FormData(this);
    fetch('WEBHOOK_URL', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        alert('Votre message a été envoyé avec succès!');
        // Réinitialiser le formulaire après soumission réussie
        document.getElementById('contactForm').reset();
        // Réafficher un nouveau captcha après soumission réussie
        displayCaptcha();
      } else {
        throw new Error('Échec de l\'envoi du message.');
      }
    })
    .catch(error => {
      console.error('Erreur:', error);
      alert('Échec de l\'envoi du message. Veuillez réessayer plus tard.');
    });
  });

  // Afficher un captcha au chargement de la page
  displayCaptcha();
</script>
</body>
</html>

Dans cet exemple :

  • Le formulaire de contact recueille le nom, l’e-mail et le message de l’utilisateur.
  • Un CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) est intégré pour prévenir les soumissions de spam. Le CAPTCHA est généré de manière aléatoire à chaque chargement de la page et stocké temporairement dans le sessionStorage du navigateur.
  • Lors de la soumission du formulaire, le CAPTCHA saisi par l’utilisateur est validé. Si le CAPTCHA est valide, les données du formulaire sont envoyées via un webhook. Sinon, un message d’erreur est affiché et le formulaire n’est pas soumis.
  • Après une soumission réussie, le formulaire est réinitialisé et un nouveau CAPTCHA est affiché pour empêcher les soumissions automatisées répétées.
  1. Google reCAPTCHA: Un outil gratuit offert par Google qui vous aide à protéger votre site contre le spam et les abus. Il utilise un système de notation avancé pour identifier les interactions humaines et bot.
    URL: reCAPTCHA

  2. Akismet: Un plugin anti-spam pour WordPress qui vérifie automatiquement tous les commentaires et filtre ceux qui ressemblent à du spam. Les prix commencent à 5$ par mois pour les sites commerciaux.
    URL: https://akismet.com/

  3. CleanTalk: Un service de protection Cloud pour les sites web contre le spam qui fonctionne avec la plupart des CMS populaires. Les prix commencent à 8$ par an.
    URL: https://cleantalk.org/

  4. FormSpammerTrap: Un outil gratuit qui fournit une protection anti-spam pour les formulaires de votre site web.
    URL: http://www.formspammertrap.com/

  5. WPBruiser: Un plugin anti-spam WordPress qui bloque les bots de spam sans nécessiter de captcha. Les prix commencent à 20$ pour une licence à vie.
    URL: https://www.wpbruiser.com/

  6. Mollom: Un service qui protège votre site contre le spam, la fraude et les abus. Mollom a été acquis par Acquia et n’est plus disponible pour de nouveaux clients.

  7. StopForumSpam: Un service gratuit qui vous permet de vérifier et de signaler les adresses IP et les adresses e-mail des spammeurs.
    URL: https://www.stopforumspam.com/

  8. CAPTCHA Bank: Un plugin WordPress qui protège votre site contre le spam en utilisant un système de captcha. Les prix commencent à 30$ pour une licence à vie.
    URL: https://captcha-bank.tech-banker.com/

  9. BotDetect CAPTCHA: Un outil qui protège les formulaires de votre site web contre les bots en utilisant un système de captcha. Les prix commencent à 69$ pour une licence à vie.
    URL: https://captcha.com/

  10. Sucuri: Un service de sécurité pour les sites web qui offre une protection contre les attaques DDoS, le malware, et le spam. Les prix commencent à 199$ par an.
    URL: https://sucuri.net/