Simple form protection to prevent spam

Question

I have the following form:

  <!-- Comments Form -->
          <div class="card my-4">
            <h5 class="card-header">Deixar um comentário</h5>
            <div class="card-body">
<!-- Comentar -->
              <form method="post">
                  <input type="hidden" name="telefone" value="<?php echo $_GET['aluno']; ?>">

                     <div class="form-group">
                          <label class="control-label">Nome</label>
                          <input name="nome" type="text" class="form-control" required placeholder="Nome">
                     </div>

                     <div class="form-group">
                          <label class="control-label">Classificação</label>
                          <select name="classificacao" class="form-control">
                              <option>Usuário?</option>
                              <option value="1">1</option>
                          </select>
                     </div>

                     <div class="form-group">
                          <label class="control-label">Comentário</label>
                          <textarea name="comentario" class="form-control" placeholder="Comentario"></textarea>
                     </div>

                     <div class="form-group">
                          <input type="submit" class="btn btn-success" value="Enviar comentário">
                     </div>
              </form>
            </div>
        </div>

I would like to add a field with a sum to prevent SPAM.

Ex: How much is 2+3? if the answer is 5 let you send the comment, otherwise the comment is not sent.

Answer 1

A simple way would be to create a field name="soma" where the user must enter the sum value:

The numbers you can randomly generate by PHP using the function rand(from,to), where from is the initial number and to the final number (ex.: rand(1,9) will generate a random integer from 1 to 9).

In the form, you include a new form-group above the "Send":

<div class="form-group">
   <label class="control-label">Quanto é <span class="captcha"><?php echo(rand(1,9)); ?></span>+<span class="captcha"><?php echo(rand(1,9)); ?></span>?</label>
   <input name="soma" type="text" class="form-control" required>
</div>

See that I included the two numbers in two <span> with class .captcha to take these values in jQuery, and compare with the value entered in the field "soma" by the user. I used an event onsubmit. When the form is sent, the script will check that the sum is correct. If it is not, it aborts Submit on return false;:

$("form").on("submit", function(){
   var s1 = parseInt($(".captcha:eq(0)").text()); // valor do 1º número
   var s2 = parseInt($(".captcha:eq(1)").text()); // valor do 2º número
   var ss = parseInt($("[name='soma']").val()); // valor da soma

   if(s1+s2 != ss){
      alert("Soma incorreta!");
      return false;
   }

   alert("Envia o formulário normal...");
});

Complete code:

<!-- Comments Form -->
<div class="card my-4">
   <h5 class="card-header">Deixar um comentário</h5>
   <div class="card-body">
      <!-- Comentar -->
      <form method="post">
         <input type="hidden" name="telefone" value="<?php echo $_GET['aluno']; ?>">

         <div class="form-group">
            <label class="control-label">Nome</label>
            <input name="nome" type="text" class="form-control" required placeholder="Nome">
         </div>

         <div class="form-group">
            <label class="control-label">Classificação</label>
            <select name="classificacao" class="form-control">
               <option>Usuário?</option>
               <option value="1">1</option>
            </select>
         </div>

         <div class="form-group">
            <label class="control-label">Comentário</label>
            <textarea name="comentario" class="form-control" placeholder="Comentario"></textarea>
         </div>

         <div class="form-group">
            <label class="control-label">Quanto é <span class="captcha"><?php echo(rand(1,9)); ?></span>+<span class="captcha"><?php echo(rand(1,9)); ?></span>?</label>
            <input name="soma" type="text" class="form-control" required>
         </div>

         <div class="form-group">
            <input type="submit" class="btn btn-success" value="Enviar comentário">
         </div>
      </form>
   </div>
</div>
<script>
$("form").on("submit", function(){
   var s1 = parseInt($(".captcha:eq(0)").text()); // valor do 1º número
   var s2 = parseInt($(".captcha:eq(1)").text()); // valor do 2º número
   var ss = parseInt($("[name='soma']").val()); // valor da soma

   if(s1+s2 != ss){
      alert("Soma incorreta!");
      return false;
   }

   alert("Envia o formulário normal...");
});
</script>

But this is just the client-side part. It’s good to always validate as well on the server-side. As the question refers to send or not the form, validate on server-side can be subject to another question.