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]
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).
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 //[email protected] //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> </td> <td> </td> </tr> <tr> <td> </td> <td><small>Powered by targetweb.it | © 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> Grazie per averci contattato, $sito_internet</td> <td>Abbiamo ricevuto la tua mail e ti ricontattermo prima possibile.</td> </tr> <tr> <td> </td> <td><small> © 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).
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
Ciao si se elimini dei valori devi modificare anche gli stessi relativi valori dentro il file js che trovi dentro lo zip. 😉
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!
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!
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! 🙁
bhè molto strano assicurati di aver scritto tutti gli ID anche (es. email –> id=”email” etc), dopodichè incolla la tua pagina completa su pastebin e condividi il link così vedo il codice e ti posso aiutare.
http://pastebin.com/
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…
ho risolto! avevo dimenticato di scrivere ‘required’ ai 2 input del form che volevo rendere obbligatori…
Perfetto ! 😉
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…
Appena ho un attimo ripropongo la variante con checkbox e invio con “loading” 😉
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
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
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).
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
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 =)
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
si bhè non pensavo ci fossero hosting con “problemini” di questo tipo ne terrò conto nei prossimi articoli 😉 Grazie delle segnalazione!
Perchè funziona tutto, ma quando premo invia mi arriva la mail ma non compare il messaggi”Email inviata con successo”…. Come mai??
Molto strano, sicuro che hai messo il codice correttamente?
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
ti ho inviato una mail!
Ciao, un bel lavoro. Io vorrei inserire anche il telefono ed altre info, che sono presenti in quello avanzato. Si potrebbe avere?
Contattami in privato dicendomi le tue esigenze così te lo faccio su misura:
per contattarmi –> http://www.targetweb.it/contattami/
Complimenti per quanto pubblichi,
appena il lavoro mi darà qualche ora di tregua proverò ad utilizzare il tuo
piacevolissimo Form.
Ancora tantissimi complimenti.
Grazie!
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!
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.
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!
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
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
Ciao Serena, settimana prossima (lunedi o martedì) pubblico la revisione a questo articolo contenente quello che ti serve 😉 rimani collegata !
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
Ciao Serena vedrò di trovare il tempo e inviartelo entro domani sera 😉 su che email ti contatto?
Mi puoi contattare su la fa ta nomemio@ libero .it
Grazie ancora.
Buona serata
Ti ho inviato la mail 😉
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
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…
Tranquilla Claudia! 😉
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!!!
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.
l’assistenza mi ha risposto che è una piattaforma Microsoft e ha una versione PHP 5.3.6
A I U T O !!!
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.
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…
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?
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!.
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
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