Form di contatti in PHP con antispam

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 >>

Continua a leggere per altre (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

form-php-ajax

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).

  1. Ciao, mi piace molto questo form e in generale il tuo lavoro.
    Solo che non riesco a farlo funzionare sul mio sito.

    Ho messo tutto correttamente ma quando vado a provarlo, al momento dell’invio, Appare il messaggio “Si è verificato un errore imprevisto….”.

    Io ho modificato il codice togliendo i campi Oggetto e Testo (che non mi servivano) forse potrebbe essere per quello?

    Grazie 1000
    Luca

  2. Ciao Riccardo, innanzitutto grazie per questo tuo lavoro che è proprio quello che serve a me! 🙂
    ho caricato i file sul mio sito e funziona bene, ma vorrei che tutti i campi fossero obbligatori da compilare… come faccio?
    nel fiel gestione-form ho trovato questa riga: //inizio controllo campi obbligatori
    ed ho pensato di aggiungere lì gli altri campi per renderli obbligatori, ma non ha funzionato… 🙁
    premetto che le mie conoscenze di programmazione sono basiche, sto imparando pian piano da sola facendo tanta pratica… e in questo caso mi serve un aiutino!

  3. Molto semplicemente ti basta aggiungere tutti i valori da rendere obbligatori in questa stringa:

    Nel caso della demo in esame:


    if (nome == "" || cognome == "" || messaggio == "" || email == "" || oggetto == "") {

    Fammi sapere se risolvi così 😉 Ciao!

  4. ehm…. come ti ho scritto, ho già provato ma quello che ho fatto non ha cambiato nulla sul form… ho anche riaggiornato la pagina na nulla… i campi obbligatori son solo quei 3 e basta…. help! 🙁

  5. tu mi dici:
    assicurati di aver scritto tutti gli ID anche (es. email –> id=”email” etc)

    ma in quale file? sempre gestione-form.js o in un altro (quale allora?)?

    scusa per le tante domande ma pare strano pure a me che modificando quella stringa non basti… ed io non ho le idee molto chiare su come fare…

  6. Ciao! grazie per questo form molto bello.
    Per renderlo più completo potresti suggerirci come fare ad inserire un checkbox (obbligatorio) per accettazione delle condizioni sulla Privacy?
    Ho provato in vari modi, ma ahimè… ;(
    anch’io tristemente inesperta…

  7. Grazie della risposta.
    Ho modificato tutto secondo i tuoi consigli e ora non mi da più quel messaggio.
    Però non funziona. Probabilmente perché forse ho toccato qualcosa.
    Non da nessun segno di vita. Se vedi questo sito di prova http://www.camping-elite.com/test ti renderai conto di cosa intendo.

    Io ho soltanto tolto tutte le voci “messaggio” e “oggetto” da i vari file php e js.
    Potrebbe essere dovuto al fatto che non ho compilato tutte le voci del file config.php? (ho messo solo la mia mail fra virgolette.

    Grazie
    Luca

  8. Perdonami se ti scoccio ancora Riccardo.
    Il tuo form è veramente bello e vorrei farlo funzionare.
    Ho iniziato da capo per capire se ho sbagliato da qualche parte.
    Ho scaricato tutto il tuo pacchetto e sto provando a farlo funzionare senza nessuna modifica. Ho cambiato solo l’email destinatario sul java script, inserendo la mia. Sembra funzionare ma non ricevo nessuna email (ho controllato anche la casella antispam). Devo per caso cambiare qualcos’altro?

    Grazie

    1. Ciao Luca non mi scocci tranquillo se rispondo tardi è che sono indaffaratissimo con mille progetti e lavori in questo periodo. Detto questo prova a testarlo su un web server online (richiede il modulo per l’invio di mail con php ;), in locale non invia).

      1. ciao Riccardo,
        cosa intendi:
        (richiede il modulo per l’invio di mail con php , in locale non invia)?

        se lo carico su un dominio register.it funziona o devo avere un “modulo” particolare?

        grazie

        1. intendo che in locale xampp (et simila) non ha il supporto php mail proprio perchè in locale. Per farlo funzionare carica tutto in un server web remoto e prova… vedrai che funziona =)

          1. Ovviamente in locale non funziona, ma allo stesso tempo il dominio sul quale viene posizionato il form mail deve essere abilitato agli script php. Per la maggior parte è ovvio, ma non per tutti.
            Esattamente sul supporto register ho travato questa risposta per controllarne il funzionamento:
            “Il supporto per gli script php e’ disponibile solo sulle soluzioni Hosting Developer e Hosting Business. Per prima cosa controlla la correttezza del codice; nel caso di errori nello script, il linguaggio PHP visualizza nella pagina in che punto e di che tipo è l’errore.

            Per verificare il funzionamento degli script php puoi per esempio digitare il seguente testo:

            in un file chiamato prova.php, trasferiscilo via FTP e richiamalo via browser.

            Se il supporto php funziona correttamente visualizzerai una schermata con la lista delle impostazioni di php sui nostri server. Cliccando sul link ‘Informazioni tecniche’ nella sezione di Gestione hosting del tuo pannello di controllo potrai verificare le varie versioni di PHP o altro attivate.”

            Ecco perché il modulo non funzionava……
            grazie
            ciao

          2. si bhè non pensavo ci fossero hosting con “problemini” di questo tipo ne terrò conto nei prossimi articoli 😉 Grazie delle segnalazione!

  9. Perchè funziona tutto, ma quando premo invia mi arriva la mail ma non compare il messaggi”Email inviata con successo”…. Come mai??

  10. Salve Riccardo, il modulo di prenotazione avanzato mi piace molto e con qualche modifica si adatterebbe molto bene al mio sito per la prenotazione delle lezioni. Cosa chiedi per il form avanzato?
    Grazie ciao

  11. Ciao, un bel lavoro. Io vorrei inserire anche il telefono ed altre info, che sono presenti in quello avanzato. Si potrebbe avere?

  12. Complimenti per quanto pubblichi,
    appena il lavoro mi darà qualche ora di tregua proverò ad utilizzare il tuo
    piacevolissimo Form.

    Ancora tantissimi complimenti.

  13. ciao innanzitutto complimenti, nonostante abbia dovuto prendere pezzi di script per implementare tutto su un sito già attivo, fila tutto liscio.
    solo un piccolo neo: i caratteri speciali vengono interpretati in maniera errata così mi ritrovo delle cose incomprensibili al posto delle è ì ù à etc… sai come si può ovviare a questo problema?

    grazie in anticipo!

    1. Perché l’invio della email avviene in ISO 8859-1 che usa solo alcuni caratteri dell’alfabeto latino occidentale, se vuoi andare sul sicuro devi usare la codifica UTF-8 anche se poi bisognerebbe vedere se sul server di posta è abilitata, tu comunque prova al limite non funziona 🙂

      Ciauz M.

  14. un altro problema:
    se invio senza compilare i campi, mi restituisce il messaggio di errore ma il messaggio viene inviato lo stesso, vuoto, con solo l’indirizzo ip.

    non ho modificato molto quindi non dovrebbe essere un problema di implementazione, in ogni caso ti posto il codice:

    qui il form:
    http://pastebin.com/TUrLr25d

    qui il gestione-form:
    http://pastebin.com/0KbT9vHd

    qui l’engine:
    http://pastebin.com/epL4wveq

    ti ringrazio sempre se vorrai aiutarmi!

  15. Ciao, sto provando a sistemare il sito della mia scuola e vorrei inserire ill form contatti, vorrei poter aggiungere un checkbox obbligatorio e il controllo, serve per accettare l’informativa sul trattamento, saresti così gentile da aiutarmi?
    Trovo il tuo form molto completo e ti ringrazio per averlo condiviso con noi.

    Serena

  16. Ciao, sto provando a sistemare il sito della mia scuola e vorrei inserire il tuo form contatti, vorrei poter aggiungere un checkbox obbligatorio e il controllo, serve per accettare l’informativa sul trattamento, saresti così gentile da aiutarmi?
    Trovo il tuo form molto completo e ti ringrazio per averlo condiviso con noi.

    Serena

      1. Ciao Riccardo, scusami se ti posso sembrare sfacciata ma il form così com’è a me va più che bene, ne ho parlato già con il responsabile e devo consegnare la cartella completa lunedì, sto curando l’aspetto grafico e non riuscirei a trovare il tempo per ricrearlo da capo, ergo ti va dirmi via email quale codice inserire?
        Se non ti va non è problema, garantito 🙂

        Serena

  17. scusa in anticipo per la stupidità della domanda, ma non riesco a capire come faccio a collegare il form alla pagina del sito in cui lo voglio mettere. C’è un tag che devo mettere?
    grazie

    1. No, scusa…sono un po’ fusa io in questi giorni…fai finta che la domanda precedente non te l’abbia mai posta!grazie e scusa ancora…

  18. ciao Riccardo, complimenti per il lavoro ma haimè ho un problema…. uso lo stesso tuo form su un sito di altervista e tutto funziona alla perfezione; carico lo stesso sul sito di impresa semplice di telecom italia e non arriva ne la mail al mittente ne al destinatario anche se sulla pagina del form mi dice che la mail è stata inviata.

    Alla super assistanza di telecom – impresa semplice mi han parlato di SMTP…. non so più dove sbattere la testa!!!

    1. Hai controllato che l’hosting in cui non va sia un hosting LINUX con PHP? Di sicuro non hai il supporto per php_mail, a me era capitato ad esempio su un sito di un cliente che aveva register…era dovuto al fatto che l’hosting di “cortesia” acquistato con il dominio non supportava script php e tantomeno php_mail.

        1. Se ti dice che la mail è stata inviata vuol dire che comunque il php funziona, se no magari ti mostrava il codice come fosse semplice testo e non lo interpretava.
          E’ possibile che Telecoma usa un sistema simile ad Aruba o Register.
          Scrivigli chiedendo numi sul sistema per mandare un’email tramite PHP o leggiti la documentazione del tuo pannello di controllo, queste informazioni ci sono sempre ed è probabile che usino lo stesso script di Register.

          Ciauz M.

  19. Ciao!

    Ho provato a integrare il tuo lavoro nel sito che sto sviluppando.
    Ho solo modificato i file css ma quando tento di inviare una mail di prova mi esce l’errore “Si e’ verificato un errore imprevisto…”
    Sto utilizzando MAMP per il php.

    Spero tu riesca a darmi una mano…

  20. CIao Riccardo, ho cercato nel forum ma nessuno ha riscontrato il mio problema… Il form invia correttamente la mail di conferma al cliente, ma gli arriva una mail da se stesso… come posso fare per evitare che ciò accada?

  21. Salve,
    mi permetto di disturbarti perché proprio non vengo a capo del problema.
    Il mio sito è in costruzione e devo mettere il checkbox per l’accettazione dell’informativa sulla privacy. Ho provato anche con Conctact Form 7 senza esito!
    Ho visto che ne hai già parlato, ma non ho trovato nulla, evidentemente sono fuori fase.
    Puoi aiutarmi?
    Grazie in anticipo e complimenti davvero!.

  22. Ciao e complimenti per il tuo lavoro.
    Sinceramente non capisco perchè mi va in “errore imprevisto” quando compilo il form e procedo all’invio. Ho analizzato il file gestione-form.js e la chiamata ajax che gestisce il passaggio dei dati al file engine.php, ma non so darmi una spiegazione. Preciso che l’errore si presenta senza modificare nulla nei file da te messi a disposizione.
    Grazie

  23. Salve io ho configurato tutto alla perfezione messo anche la mia mail in config.php eppure provando il form non mi arriva nessuna mail anche se il campo dice mail inviata con successo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Font tipografico per web designer: Homestead font

Font tipografico per web designer: Homestead font