Form di contatti in PHP con antispam

Vediamo come realizzare un form di contatti in php  con un potente filtro antispam di validazione in ajax, e stilizzandolo grazie alle potenti feature html5/css3.

[lightgrey_box]ATTENZIONE: Questa versione del form è la 1.5 è disponibile una nuova versione più recente e aggiornata. Clicca qui. [/lightgrey_box]

GUARDA LA DEMO >>

01. Premessa e panoramica

Molto tempo fa avevo realizzato la precedente versione che possedeva però alcuni difetti (alcuni resi noti dai nostri lettori): non avevo tenuto conto infatti della “questione” internet explorer. Ero infatti quasi sicuro che il nuovo browser di casa Microsoft alla nona versione avesse (finalmente) supportato anche il controllo html5 per i form di contatti. Purtroppo sono stato smentito e ho dovuto ricorrere all’implementazione di un tool “esterno” per validare il form evitando la tecnica di spam dei “campi vuoti”. In questa nuova versione non ricorrerò a nessun tool o script esterno. Solo puro jQuery, ajax e un pizzico di sano PHP.

Scopri la precedente versione dello script (potrebbe essere didattico per qualcuno).

VERSIONE 1.0

02. Html form

        <form action="engine.php" method="post" name="contactform" id="contact">

        <label for="nome">Nome <span>(richiesto)</span></label><a name="nome"></a>

        <input  tabindex="1" type="text" name="nome" id="nome" value="" placeholder="Scrivi il tuo nome" required/>

        <label for="cognome">Cognome</label><a name="cognome"></a>

        <input  tabindex="2" type="text" name="cognome" id="cognome" value="" placeholder="Scrivi il tuo cognome"/>

         <label for="email">Email <span>(richiesto)</span></label><a name="email"></a>

        <input  tabindex="3" type="email" name="email" id="email" value="" placeholder="Digita la tua Email" required/>

        <label for="oggetto">Oggetto <span>(richiesto)</span></label><a name="oggetto"></a>

        <input  tabindex="4" type="oggetto" name="oggetto" id="oggetto" value="" placeholder="Oggetto della richiesta" required/>

        <label for="messaggio">Messaggio</label>

        <textarea  tabindex="5" cols="50" rows="10" name="messaggio" id="messaggio" placeholder="La tua richiesta"></textarea>

        <input type="text" id="fred" name="fred" style="visibility: hidden;"/> 

        <input type="button" id="bottone" value="Invia" />

        </form>

Come vedete la struttura di base è identica alla precedente versione. Piccolo appunto sull’input “fred” che per chi si fosse perso la puntata precendente, è un input “nascosto” all’occhio umano, pertanto se viene compilato da spammer il form restituirà un messaggio di errore (personalizzabile nel file engine.php).

03. Stile CSS

form#contact  { font-family:arial;font-size:100%; color:#000; font-family: 'Duru Sans', sans-serif; }

form#contact label  {float:left; display:block; margin:3px 0;clear:both;}
form#contact input  {color:#000;margin:0 0 7px 0;border:1px solid #d8d8d8;width:220px;float:right;-moz-border-radius:9px;-webkit-border-radius:9px;background:#f2f2f2; padding:3px 10px;}

form#contact select {color:#000;margin:0 0 7px 0;border:1px solid #d8d8d8;width:240px;float:right;-moz-border-radius:9px;-webkit-border-radius:9px;background:#f2f2f2; padding:3px 5px 3px 10px;}
form#contact option {display:block;color:#666;}

form#contact textarea {color:#666; float:right;font-size:110%;font-family:arial;height:80px;border:1px solid #d8d8d8;width:220px;-moz-border-radius:12px;-webkit-border-radius:12px;background:#f2f2f2; padding:2px 10px;margin-bottom:10px;}

#bottone {background:#a80329; clear:both; border-radius:10px; -moz-border-radius:10px;-webkit-border-radius:10px;border:0;cursor:pointer;color:#fff;margin-top:-20px;float:right;font-weight:bold;font-size:110%; }

.faulty_field{background:#fff4f4 !important;color:#ff0000;border:1px solid #ff0000 !important;}
label span {color:#ff0000;font-size:85%; }

        #errori{ float:left; width:40%;  border:1px solid #F00; background:#efaf9e; clear:left; font-size:70%; margin: 0px 0px 0px -10px; padding:10px; }
	#errori span{ float:right; margin:5px 10px 0px 0px;}

	#risultato{ float:left;border:1px solid #060; background:#9fe4a1; clear:left; width:40%;  margin: 5px 0px 0px 25px; font-size:70%;}
	#risultato span{float:right; margin:10px 10px 0px 0px;}

 Anche questa sezione è molto simile alla precedente, potete personalizzare lo stile come meglio credete, in particolare gli id #errori e #risultato sono i box che conterranno le informazioni relative all’invio del form.

04. La novità: doppio engine!

Nel precedente form si faceva uso di un solo engine, quello php che aveva il compito di inviare la mail. In questa nuova versione ho predisposto  un secondo engine di invio in ajax, che passa i dati via POST al consueto file in php. In questo modo abbiamo la possibilità di rimanere dentro la stessa pagina, e di far visualizzare dei messaggi di errore/invio senza alcun refresh della pagina. Uno dei grossi difetti della precedente versione era infatti il semplice “redirect” finale in caso di successo senza nessun messaggio di feedback (era risolvibile solo usando iframe).

gestione-form.js

$(document).ready(function() {

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

   var timer = 2000;

    //associo variabili generali
    var nome = $("#nome").val();
	var cognome = $("#cognome").val();
	var email = $("#email").val();
	var oggetto = $("#oggetto").val();
	var messaggio = $("#messaggio").val();

       //inizio controllo campi obbligatori	
	if	(nome == "" || email == "" || oggetto == "")  {

			$("<div id='errori'></div>").appendTo("#contact").html("<img src='alert-icon.png' width='20' height='20' style='float:left;' /><span>Compila tutti i campi!</span>").delay(2000).fadeOut(timer);

		} //se ci sono campi vuoti

		else { //se sono stati compilati tutti i campi

  //chiamata ajax
    $.ajax({

      type: "POST",

      url: "engine.php",

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

      success: function(msg)
      {
          $("<div id='risultato'></div>").appendTo("#contact").html("<img src='mail-inviata.png' style='float:left;'  /><span>Email inviata con successo</span>").delay(2000).fadeOut(timer);
      },

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

		}//else

  });

});

Ecco alcune precisazioni/consigli:

– Nel ciclo if della sezione obbligatori indicate  i campi obbligatori che devono essere riempiti.

– success: specificate cosa fare/far apparire in caso di email inviata

– nel caso di campi non compilati, specificate dopo il primo if il messaggio di errore con relativa (eventuale) animazione.

– error: Specifica cosa far apparire nel caso la chiamata ajax non sia avvenuta (mail non inviata).

– timer: indica il tempo di fadeout/in dei box

– Ricordatevi di inserire anche le librerie jQuery!

Ovviamente questa sezione è modificabile a vostro piacimento (vi sconsiglio di usare il metodo GET, lasciatelo POST altrimenti i dati potrebbero essere letti/intercettati in chiaro). Vuoi approfondire l’invio di dati via ajax? leggi questo mio articolo.

05. Motore php invio mail

Il motore di invio mail in php è rimasto pressochè identico alla precedente versione. Ho eliminato ovviamente il redirect finale in fondo al codice dato che è gestito tutto con ajax.

engine.php

//Creato da Mel Riccardo
//v 2.0
//http://www.targetweb.it
//riky.mel@gmail.com
//Vietata ogni tipo di riproduzione, distribuzione senza previa richiesta al programmatore

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

session_start();

$nome 		= 	$_POST['nome'];
$cognome 	= 	$_POST['cognome'];
$email 		= 	$_POST['email'];
$messaggio 	= 	$_POST['messaggio'];
$oggetto 	= 	$_POST['oggetto'];
$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 per i furboni come te. La mail non e stata inviata</p>');
}

else {

//Invio la mail

$to 		= $tua_email;
$sbj 		= "Hai ricevuto una mail dal tuo sito internet - $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 width='121' align='right' valign='baseline'><strong>Cognome:</strong></td>
    <td width='459'>$cognome</td>
  </tr>

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

  <tr>
    <td align='right' valign='baseline'><strong>Oggetto:</strong></td>
    <td>$oggetto</td>
  </tr>
  <tr>
    <td align='right' valign='baseline'><strong>Richiesta:</strong></td>
    <td>$messaggio</td>
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td><small>Powered by targetweb.it | &copy; Copyright 2011 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>
<table width='600' border='0' cellspacing='0' cellpadding='5'>
  <tr>
    <td width='117' align='right' valign='baseline'><strong>Grazie,</strong></td>
    <td width='463'>$nome</td>
  </tr>
   <tr>
    <td>&nbsp; Grazie per averci contattato, $sito_internet</td>
    <td>Abbiamo ricevuto la tua mail e ti ricontattermo prima possibile.</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td><small> &copy; Copyright 2011 Riccardo Mel</small></td>
  </tr>

</table>
</body>
</html>
";
$fromClient 	 = $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();

echo"<img src='mail-inviata.png'  /><p>Messaggio inviato con successo!</p>";

exit;

} //fine else del controllo antispam

Et voilà! per un corretto uso dei file impostate nel file config.php il sito web e la mail a cui inviare tutte le richieste del form.

06. Demo e Download

DEMO V1| DEMO V2 | DOWNLOAD | AVANZATO

07. Licenza e informazioni

Il form è usabile da tutti, mi piacerebbe ricevere un feedback (mail o tramite commento) del suo uso con report di eventuali errori e consigli in vista della terza versione. Si impone di lasciare tutti i riferimenti di credito (sotto forma di commenti) a Targetweb e alla mia persona. Il form può essere usato per fini commerciali, ma non può essere per nessun motivo ridistribuito senza il mio consenso.

08. Supporto

Metti mi piace qui sotto e riceverai il supporto per il form direttamente nella nostra pagina di Facebook! (il supporto non sarà fornito nei commenti all’articolo).