Oggi realizziamo un fantastico form con validazione e antispam “next-gen” con le nuove tecnologie HTML5 e CSS3 ma usabile fin da subito senza problemi nei nostri progetti e form di contatti. Per l’invio effettivo della mail useremo la potenza del PHP.
[lightgrey_box]ATTENZIONE: Questa versione del form è la 1.0, se ne sconsiglia l’uso. E’ disponibile una nuova versione più recente e aggiornata. Clicca qui. [/lightgrey_box]
Creare i form di contatti e’ da sempre stato una delle fasi di progettazione più lunghe e noiose. Oltre a questo si e’ aggiunta la necessità di aggiungere controlli di validazione e verifche antispam per evitare che i nostri clienti si ritrovassero con centinaia di mail dannose e indesiderate. Non sempre la cosa risulta semplice e immediata. Vediamo come realizzare un form con motore PHP e creato con HTML5 e CSS3 che semplificano parecchio il design, e un sistema antispam davvero efficace e non invasivo.
Image may be NSFW.
Clik here to view.
DEMO | DOWNLOAD
Iniziamo: Strutturiamo il form e la pagina con l’HTML5
Per prima cosa creiamo un documento vuoto e strutturiamo il markup di HTML5. Ricordatevi di includere il file .js per rendere usabile la nostra pagina anche su IE!
<!doctype html><!--INIZIO HTML5--> <html lang="it"> <head> <meta charset="utf-8"> <title>Form PHP con email di conferma in HTML5 e CSS3</title> </head> <body> <div id="main"> </div> <!--Fine Main--> </body> </html>
Una volta strutturata la pagina passiamo a creare lo scheletro del nostro form next-gen:
<fieldset>
<legend><span>Compila il nostro form</span></legend>
<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;"/>
<button tabindex="7" type="submit" name="send" id="send"/>Invia</button>
</form>
</fieldset>
Ecco alcune precisazioni:
– Fieldset e’ una sorta di contenitore (nella demo e’ il bordino grigio), non e’ essenziale ma se volete potete anche lasciarlo ( a me non dispiace).
– Label indica l’etichetta dei campi ovvero Nome, Cognome etc con span ho indicato la scritta “richiesto” per poterla stilizzare poi in seguito nei CSS
– Tabindex e’ l’indice del nostro form, non e’ essenziale (a livello e uso base) ma vi consiglio di lasciarlo
– Placeholder e’ la scritta che appare dentro il form, una sorta di segnaposto, potete anche eliminarla se non vi aggrada, potete inserire informazioni utili alla compilazione corretta del vostro form.
– L’input “Fred” e’ il nostro sistema antispam (ne parliamo dopo, per ora ignoratelo).
Abbiamo il nostro scheletro HTML5, ora diamoli un po’ di stile
form#contact {font-family:arial;font-size:100%;color:#000;}
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: url('gradient_white.png') repeat-x top left #efefef;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: url('gradient_white.png') repeat-x top left #efefef;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: url('gradient_white.png') repeat-x top left #efefef;padding:2px 10px;margin-bottom:10px;}
#send {background: url('gradient_black.png') repeat-x top left #a80329; clear:both;-moz-border-radius:15px;-webkit-border-radius:15px;border:0;cursor:pointer;color:#fff;margin-top:15px;float:right;font-weight:bold;font-size:110%;padding:5px 15px;}
.faulty_field{background:#fff4f4 !important;color:#ff0000;border:1px solid #ff0000 !important;}
label span {color:#ff0000;font-size:85%; }
#main{ width:500px; height:400px; margin:0 auto; padding:0;}
Analizzando il codice, come vedete una volta creato l’html5 risulta abbastanza facile stilizzare il tutto con i CSS3.
Grazie a Border-radius CSS3 rendo le etichette di testo arrotondate, mentre con box-shadow posso associare ombre sia alle etichette (in questo caso non l’ho fatto) sia al pulsante invia.
Con lo stile “label span” posso stilizzare, come detto in precendenza, la scritta “richiesto”.
Ovviamente textarea, text, label, input etc servono per stilizzare i rispettivi campi. Direi che potete sbizzarirvi!
Creiamo il nostro motore di invio mail con PHP
Ok ora che abbiamo il nostro form dobbiamo farlo funzionare, per progettare qualsiasi cosa in php ricordate sempre alcuni “step” essenziali, altrimenti rischierete di non capirci :
1) Iniziate con un “brain storming” ovvero pensate a cosa volete realizzare e buttate giu’ due righe sintetiche e concise, che vi serviranno come linee guida durante la realizzazione.
2) Pensate a grandi linee alla conoscenze che dovreste avere e ad eventuali problemi in cui potreste incorrere.
3) Create un flowchart, o schemino che vi aiuterà nella realizzazione (io questo non l’ho quasi mai usato, se fate bene il primo punto (ovviamente).
Ok si parte! Ecco la mia scaletta:
– Form PHP INVIO MAIL
– Variabili: NOME, COGNOME, EMAIL, OGGETTO, TESTO
– Redirect alla home in caso di successo
–ANTI SPAM non captcha ( Come fare? , in che modo lavorano gli spammer?).
Ora che abbiamo una linea guida iniziamo a scrivere il codice.
File di configurazione config.php
In qualsiasi progetto che si rispetti si deve tener conto di variabili che potrebbero essere cambiate, anche spesso, per cui e’ sempre buona norma creare un file di configurazione, altamente modificabile, da includere poi dove desideriamo.
File config.php
<?php //file di configurazione variabili $tua_email = "riccardo@xxx.it"; //email del vostro cliente dove verranno spedite le richieste $sito_internet = "Targetweb.it"; //sito internet del cliente (o vostro) $grazie = "http://www.targetweb.it"; //Pagina di redirect ?>
Ora dobbiamo creare il motore che farà funzionare il tutto al momento del click su “invia” creiamo il file engine.php.
engine.php
<?php
//Includo Variabili
include('config.php'); //potete usare anche include_once
session_start(); //creo sessione
$nome = $_POST['nome']; //Prelevo il valore dal form
$cognome = $_POST['cognome']; //Prelevo il valore dal form
$email = $_POST['email']; //Prelevo il valore dal form
$messaggio = $_POST['messaggio']; //Prelevo il valore dal form
$oggetto = $_POST['oggetto']; //Prelevo il valore dal form
$ip = $_SERVER['REMOTE_ADDR']; //track IP
Come vedete ho associato alle variabili il rispettivo valore prelevato dal form. Per i form o dati sensibili usate SEMPRE il metodo POST e NON il GET, altrimenti i dati saranno visibili a tutti.
//Invio la mail
$to = $tua_email; //impostata in config.php
$sbj = "Hai ricevuto una mail dal tuo sito internet - $sito_internet";
$msg = " //strutturo la mail
<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
Come vedete in queste righe ho creato la mail che riceveremo in caso di contatto. Per richiamare i valori ci basterà usare le variabili impostate prima. In certi server (come aruba) bisgona sostituire il \r con \n come sopra, per evitare che la mail arrivi senza formattazione.
Visto che ci siamo inviamo anche una mail di conferma a chi ci ha contattato, in questo modo:
//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
Ecco fatto! In questo modo abbiamo inviato sia una mail di notifica a noi stessi (o ai nostri clienti) e abbiamo inviato anche una mail di conferma molto professionale e curata!. A questo punto vi chiederete , e lo spam?
Come lavorano gli spammer e Bot spam?
Questa è la domanda che mi sono posto, documentandomi ho scoperto che gli spammer si suddividono essenzialmente in due tipi:
1) Bot che, in mancanza di validazione dei campi, compilano il form lasciando tutti i campi vuoti e premento “invia” ripetutamente. In caso di mancato controllo questo metodo risulta molto fastidioso (centinaia di mail vuote sono il massimo! )
2) Bot che compilano il form in stile “jdsfihskjd” scrivendo a casaccio e premendo invio. Queste sono forse ancora più fastidiose. Richiedono una verifica di “umanità” da parte dell’utente ovvero captcha (immagini o testo da inserire) o domande del tipo quanto fa 2+2?
Il primo punto e’ risolta in modo esemplare dal nostro form HTml5 (che finalmente ci viene in aiuto!), che nel caso di non compilazione dei campi obbligatori restituisce un popUp grafico molto gradevole. (vedi la demo).
Il secondo punto e’ il più gravoso, dato che non mi sono mai piaciuti i captcha e domande varie, anche perchè il più delle volte i miei lavori commissionati si riferiscono a un target “non molto competente”, ho deciso di implementare questi sistema (che non ho inventato io lo preciso). In pratica ho introdotto nel form un campo vuoto, ma NASCOSTO all’utente “Umano”. Pertanto si presuppone che questo campo debba rimanere sempre vuoto. A questo punto, se un spam bot prova a compilare il form, essendo stupido, compila tutti i campi, e grazie a un semplice controllo IF con PHP riusciamo molto facilmente a inibire la sua mail dannosa. Ecco il codice di controllo PHP da inserire in engine.php.
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 {
//resto dell'invio mail normale
} fine invio mail (importante!)
Ah manca ancora una cosa, a fine documento piazziamo in redirect alla Home alla fine del processo di invio in questo modo;
header("Location: $grazie"); //Reindirzzo alla pagina specificata in config.php
exit;
} //fine else del controllo antispam
Dove $grazie e’ una variabile impostata in config.php. Ed ecco fatto! Abbiamo completato il form. Ecco un riepilogo completo del codice da usare, ricordatevi che in altro troverete anche il pacchetto per scaricare il form e uno per vedere la demo. Il form e’ usabile liberamente a patto si lasci la dicitura “creato da Mel Riccardo – Targetweb.it “.
Codice completo del form PHP -HTML5-CSS3
Form.php
<!doctype html><!--INIZIO HTML5-->
<html lang="it">
<head>
<meta charset="utf-8">
<title>Form PHP con email di conferma in HTML5 e CSS3</title>
<style>
form#contact {font-family:arial;font-size:100%;color:#000;}
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: url('gradient_white.png') repeat-x top left #efefef;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: url('gradient_white.png') repeat-x top left #efefef;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: url('gradient_white.png') repeat-x top left #efefef;padding:2px 10px;margin-bottom:10px;}
#send {background: url('gradient_black.png') repeat-x top left #a80329; clear:both;-moz-border-radius:15px;-webkit-border-radius:15px;border:0;cursor:pointer;color:#fff;margin-top:15px;float:right;font-weight:bold;font-size:110%;padding:5px 15px;}
.faulty_field {background:#fff4f4 !important;color:#ff0000;border:1px solid #ff0000 !important;}
label span {color:#ff0000;font-size:85%; }
#main{ width:500px; height:400px; margin:0 auto; padding:0;}
</style>
</head>
<body>
<div id="main">
<fieldset>
<legend><span>Compila il nostro form</span></legend>
<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;"/> <button tabindex="7" type="submit" name="send" id="send"/>Invia</button> </form> </fieldset> </div> <!--Fine Main--> </body> </html>
Config.php
<?php //file di configurazione variabili $tua_email = "riccardo@tuosito.it"; $sito_internet = "Targetweb.it"; $grazie = "http://www.targetweb.it"; ?>
Engine.php
<?php
//Creato da Mel Riccardo
//v 1.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> </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();
header("Location: $grazie"); //Reindirzzo alla pagina specificata in config.php
exit;
} //fine else del controllo antispam
?>
Cosa fare per Ie8
Ovviamente la validazione dei campi in html5 avviene solo su browser html5 come chrome,firefox e ie9. Se volete rendere il vostro form a prova di ie8 potete usare questo form validation engine sviluppato in jQuery. Ecco il codice (ovviamente incorpora prima il file js e css contenenti nel file zip):
<script> //Verifica form validation
$(document).ready(function(){
$("#contact").validationEngine('attach');
});
</script>
A questo punto ci basterà specificare negli input del form questa classe per rendere richiesto il campo:
class="validate[required] text-input"
Potete anche racchiudere i file js e css aggiunti facendoli “attivare” solo con IE in questo modo:
<!--[if lt IE 10]>
<script src="http://www.immobiliareverdemare.it/js/jquery.validationEngine.js"></script>
<script src="http://www.immobiliareverdemare.it/js/jquery.validationEngine-it.js" type="text/javascript" charset="utf-8"></script>
<link href="http://www.immobiliareverdemare.it/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
$("#contact").validationEngine('attach');
});
</script>
<![endif]-->
Ecco e’ tutto! cosa ne pensate? Spero vi sia stato utile!
L'articolo Creare un form PHP in html5 – Css3 con validazione e antispam sembra essere il primo su Target Web.it.