Form php con antispam, check informativa e controllo campo email

Oggi voglio presentarvi la nuova versione del mio form di contatti php/mysql con antispam. In questa nuova versione ho tenuto conto dei vostri suggerimenti e consigli che mi aiutano ogni giorno a crescere e migliorare.

[lightgrey_box]ATTENZIONE: Sono disponibili anche le vecchie versioni di questo script: Versione 1.5 |  Versione 1.0 (obsoleta)[/lightgrey_box]

Tra le aggiunte di maggior rilievo troviamo il tanto acclamato check dell’informativa sulla privacy (che ricordo essere obbligatorio per tutti i form di contatto web). Oltre a questo ho aggiunto un comodo loader con servizio di prevenzione di invio multiplo delle richieste. Non vi basta? sempre grazie alle vostre utili segnalazioni ho predisposto anche un check dell’indirizzo mail (deve contenere obbligatoriamente la chiocciola per un invio corretto). Ma andiamo con ordine.

[button link=”http://www.targetweb.it/tutorial/2012/form-contatti-php-2-0/index.html” color=”blue” target=”blank”]Demo[/button]

Struttura HTML

La struttura HTML è rimasta pressochè invariata rispetto allo script precedente. L’unica aggiunta degna di nota è sicuramente l’informativa della privacy tramite checkbox. Ecco lo scheletro HTML:

<form id="contact">

             <p class="info_form">I campi con  <span class="asterisco">(*)</span> sono obbligatori.</p>

             <label for="nome">Nome <span class="asterisco">(*)</span></label>
             <input type="text" name="nome" id="nome"  placeholder="Il tuo nome"  style="width:98%;" />

             <label for="Email">Email <span class="asterisco">(*)</span></label>
             <input type="text" name="email" id="email"  placeholder="Digita la tua email"  style="width:98%;" />

             <label for="oggetto">Oggetto <span class="asterisco">(*)</span></label>
             <input type="text"  name="oggetto" id="oggetto"  placeholder="Di che tipo di informazione hai bisogno?"  style="width:98%;"  />

             <label for="messaggio">Richiesta <span class="asterisco">(*)</span></label>
             <textarea cols="50" rows="10" name="messaggio" id="messaggio"  placeholder="La tua richiesta" style="width:98%;" ></textarea>

             <input type="checkbox" name="informativa" id="informativa" value="informativa" checked="checked"/> Accetto <a href="#" title="leggi la nostra informativa" class="informativa_link">l'informativa sulla privacy</a><br />

             <input type="text" id="fred" name="fred" style="display:none;"/>
              <br />

           <input class="btn" type="button" id="bottone-contact" value="Invia Richiesta" />

</form>

Stile CSS

Anche lo stile CSS non ha subito variazioni significative. Ecco il codice essenziale:

#errori{ padding:10px; margin:10px 0px; border-bottom:2px solid #ce5757; text-shadow:1px 1px 1px #000;  background:#e6abab; color:#fff;}
#risultato{ padding:10px; margin:10px 0px; border-bottom:2px solid #6090cc;  text-shadow:1px 1px 1px #000; background:#abc6e6;color:#fff;}

.asterisco{ font-size:12px; color:#da9393;}
.info_form{ color:#7f7d7d; font-style:italic; font-size:14px; margin-top:-12px;}

Motore jQuery

Qui la vera rivoluzione. Preferisco postarvi subito il codice e analizzarlo in seguito.

   //al click sul bottone del form
  $("#bottone-contact").click(function(){

	$(this).hide(); 
	$("<img src='images/loader.gif' class='loader' />").appendTo("#contact");

	var timer = 2000;

        //associo variabili generali
        var nome = $("#nome").val();
	var messaggio = $("#messaggio").val();
	var email = $("#email").val();
	var oggetto = $("#oggetto").val();
	var informativa = $("#informativa").attr('checked');

    //pattern email
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if(!emailReg.test(email)) {

		 $("#bottone-contact").show(); 
		 $("<div id='errori'></div>").appendTo("#contact").html("<span>Email scritta in modo non corretto! Controlla che sia presente la @</span>").delay(2000).fadeOut(timer);
		 $(".loader").hide();

    } else if(informativa != "checked"){

		alert("Devi accettare l'informativa sulla privacy per continuare!");
		 $("#bottone-contact").show();
		$(".loader").hide();

	} else if (nome == "" || email == "" )  {	

		$("#bottone-contact").show(); 
		$("<div id='errori'></div>").appendTo("#contact").html("<span>Compila tutti i campi richiesti con l'asterisco!</span>").delay(2000).fadeOut(timer);
		$(".loader").hide();

	} //se ci sono campi vuoti

	else { //se sono stati compilati tutti i campi

  //chiamata ajax
    $.ajax({

      type: "POST",

      url: "form/engine.php",

	//il form invia i dati all'engine
      data: "nome=" + nome + "&email=" + email  + "&messaggio=" + messaggio + "&oggetto=" + oggetto,
      dataType: "html",

      success: function(msg)
      {
		  	  $(".loader").hide();
			  $("<div id='risultato'></div>").appendTo("#contact").html("<span>Email inviata con successo!</span>").delay(3000).fadeOut(timer);
			  $("#bottone-contact").delay(2000).fadeIn(); 

      },

      error: function()
      {
        alert("Si e' verificato un errore imprevisto..."); 
      }
    });

	}//else controlli

}); //fine form

Come vedete del source qui sopra dopo aver recuperato le variabili del form effettuo 3 controlli aggiuntivi rispetto alle precedenti versioni:

1) Controllo se il campo email contiene almeno la chiocciola. Se non ha la chiocciola è come se non fosse stato compilato correttamente e quindi restituisco un messaggio di errore personalizzabile. Il pattern per il check della mail viene riassunto in questa riga di codice, subito prima del controllo:

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

2) Controllo se l’informativa della privacy è stata lasciata selezionata (status: checked). Se non lo fosse restituisco l’errore tramite alert.

3) Ho predisposto che al click sul pulsante “Invia” quest’ultimo sparisca per evitare click (e quindi invii) multipli. Al suo posto appare un comodo spinner di loading che mette in attesa il visitatore fino a quando l’email non è stata processata. Quest’ultimo non era un vero e proprio “difetto” della precedente versione in quando la maggior parte degli utenti clicca solo una volta e aspetta la conferma. Tuttavia in effetti il problema delle mail multiple mi era stato segnalato e quindi ho deciso di rimediare.

Engine di invio mail

L’engine di invio email è praticamente invariato. L’unica nota che posso aggiungere rispetto alle precedenti release è che la variabile informativa può, di fatto,può  essere non recuperata in quanto non apparirà nelle mail di conferma ma serve solo come “formalità”. Ecco il codice:

	//Includo Variabili
	include('config_email.php');

	session_start();

		$nome 		= 	$_POST['nome'];
		$email 		= 	$_POST['email'];
		$oggetto 	= 	$_POST['oggetto'];
		$messaggio 	= 	$_POST['messaggio'];
		$ip			=	$_SERVER['REMOTE_ADDR'];

	//Verifica antispam 

	if($_POST['fred'] != "") {
		echo('<p style="color: #000; font-size: 25px; font-weight: bold;">Sei uno spambot o stai usando tecniche di spam indesiderate, spiancenti ma ci siamo attrezzati. La mail non e stata inviata</p>');    
	}

	else {

//Invio la mail

$to 		= $tua_email;
$sbj 		= "Richiesta Informazioni - $sito_internet";
$msg 		= "
<html>
<head>
<style type='text/css'>
body{
	font-family:'Lucida Grande', Arial;
	color:#333;
	font-size:15px;
}
</style>
</head>
<body>
<table width='600' border='0' cellspacing='0' cellpadding='5'>
  <tr>
    <td width='121' align='right' valign='baseline'><strong>Nome:</strong></td>
    <td width='459'>$nome</td>
  </tr>

  <tr>
    <td align='right' valign='baseline'><strong>Email:</strong></td>
    <td>$email</td>
  </tr>

  <tr>
    <td width='121' align='right' valign='baseline'><strong>Oggetto:</strong></td>
    <td width='459'>$oggetto</td>
  </tr>

  <tr>
    <td align='right' valign='baseline'><strong>Richiesta:</strong></td>
    <td>$messaggio</td>
  </tr>

    <tr>
    <td align='right' valign='baseline'><strong>IP Tracciato (per motivi di sicurezza):</strong></td>
    <td>$ip</td>
  </tr>

   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

    <tr>
    <td>&nbsp;</td>
    <td><small>Powered by Targetweb.it | &copy; Copyright 2012 Riccardo Mel</small></td>
  </tr>

</table>
</body>
</html>
";

$from 		 = $email;
$headers	 = 'MIME-Version: 1.0' . "\n";
$headers	.= 'Content-type: text/html; charset=iso-8859-1' . "\n"; //In certi casi con aruba se non viene formattata eliminare il \r per i permessi come ho fatto in questo caso
$headers 	.= "From: $from";

mail($to,$sbj,$msg,$headers); //Invio mail principale.

//Fine mail inviata a me

//Inizio email di conferma
$toClient		 = $email;
$msgClient		 = "
<html>
<head>
<style type='text/css'>
body{
	font-family:'Lucida Grande', Arial;
	color:#333;
	font-size:15px;
}
</style>
</head>
<body>

<h1>Tuosito</h1>
<br />

<h2>Grazie, $nome</h2>
<br />

  <p>Grazie per averci contattato, $nome</p>
  <p>Abbiamo ricevuto la tua mail e ti ricontattermo prima possibile.</p>  

  <br />
  <hr>

   <p>Thanks for contact us, $nome</p>
    <p>We received your email. We respond as soon as possible.</p>  

</body>
</html>
";
$fromClient 	 = $tua_email;
$sbjClient		 = "Grazie, $nome ";
$headersClient	 = 'MIME-Version: 1.0' . "\r\n";
$headersClient	.= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headersClient 	.= "From: $fromClient";

mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente

//Fine email di conferma

//Resetto errori

session_destroy();

exit;

} //fine else del controllo antispam

Conclusioni e Download

[button link=”http://www.targetweb.it/tutorial/2012/form-contatti-php-2-0/index.html” color=”blue” target=”blank”]Demo[/button]

Download

Licenza e condizioni d’uso: Lo script è usabile e modificabile in tutte le sue parti! E’ OBBLIGATORIO tenere almeno i riferimenti di targetweb.it sotto forma di commenti al codice e nella mail di invio  (a voi non costa nulla!).

Vuoi aiutarmi a migliorare ancora questo script? Fammi sapere le tue opinioni nei commenti!