Creare un form PHP in html5 – Css3 con validazione e antispam

Scritto Aggiornato il Di Riccardo Mel

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.

img_form_html5DEMO | 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 = "[email protected]";
//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>&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

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

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 = "[email protected]";

$sito_internet	=	"Targetweb.it";

$grazie = "http://www.targetweb.it";

?>

Engine.php

<?php

//Creato da Mel Riccardo
//v 1.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>&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();

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!

 

  2. ora che ci penso.. si puo modificare la grafica dei messaggi che vengono quando compili in modo errato un input?

    Rispondi
  3. Pingback: Sito da cui trarre ispirazione: Hotel Villa Danci | Target Web.it

  7. Ciao Riccardo,

    Complimenti! Guida scritta benissimo, chiara e completa, si evince la tua competenza.. Stavo giusto cercando il modo di realizzare un form per evitare lospam senza utilizzare il captcha.

    Grazie

    Marco

    Rispondi
  9. Pingback: Design Inspiration: Ritamendola Hairstyle | Target Web.it

  10. Ciao premettendo che non so nulla di php, a me servirebbe un form che dopo aver premuto “INVIA” mi facesse comparire un messaggio di avvenuto invio o di errore. Sarebbe da inserire in un sito tutto all’interno di un “div” e che sia modificabile tramite css. Qualcuno mi può aiutare?

    Rispondi

  11. potresti provare così: al posto di header (location etc) (server per reindirizzare alla home in caso di successo) nel file engine.php modfica quella riga e metti:

    echo “email Inviata con successo”; la funzione echo ti permette poi di stilare anche una classe per rendere il tutto modificabile via CSS, guarda la reference guide per maggiori info su echo:

    http://php.net/manual/en/function.echo.php

    Rispondi

  14. A ho visto che con ie9 non funziona il monitoraggio dei campi… cioè se premo “invia” con i campi vuoti mi manda il messaggio lo stesso.

    Rispondi

  15. Peccato che i controlli sull’indirizzo email su ie9 non vanno, cioè io posso mettere anche “aaaa” e lui mi indica email valida mentre su firefox no. JQuery funziona solo se non scrivi nulla.

    Rispondi

    1. purtroppo (per ora) ie9 equivale al’8 per quanto riguarda le funzioni form html5. per effettuare il controllo email preciso dovresti usare un controllo php a selezione di caratteri … ad esempio che controlli che vi sia presente la chiocciola

      Rispondi

  16. Ciao Riccardo, i miei complimenti, ti ringrazio tanto, la tua guida mi è stata di grande aiuto!! Continua cosi, 6 un grande!!

    Rispondi

  18. da neofita ho fatto questa piccola aggiunta, cioè due menu a tendina con obbligo si scelta data dal java..

    magari è una cagat….

    Compila il nostro form

    Nome Cognome

    Email

    Telefono

    data

    ora

    Scegli
    19:30
    20:00
    20:30
    21:00

    persone

    Scegli
    1
    2
    3
    4

    Invia

    Rispondi

  19. usa il tag <* pre *> (senza asterischi e con tag di chiusura / ) 

     CODICE

    In effetti può essere una valida aggiunta =D Dato il successone a breve la versione 2.0 con bug corretti e nuove feature!*

    Rispondi

  22. Avrei 2 domande da porti….

    Nelle spiegazioni e nel file post.php che ho scaricato si fa riferimento a 2 file: gradient_white.png e gradient_black.png che non sono presenti nel file compresso del download… Dove posso reperirli?

    Potresti spiegarmi dettagliatamente come far leggere ad IE: placeholder, moz-border-radius, e -webkit-border-radius?

    Qualcosa ho trovato online, ma non spiegato chiaramente, poi per me che non sono un esperto dei vari linguaggi, non ho capito dove vanno inserite le eventuali stirnghe di codice…

    Tiringrazio anticipatamente..

    Rispondi

  23. Ciao Luca, si sono due file che non ho aggiunto al pacchetto ora che me lo fai notare, in ogni caso non sono necessari sono rimasugli di varie prove fatte. Puoi anche cancellarli e stilizzare il tutto con i css3 come meglio ti aggrada.

    2. i placeholder sono dello standard html5, devi emularli con il JQuery (su ie non sono supportati per ora).

    3. http://www.targetweb.it/css3-su-internet-explorer/
    In pratica salva il file PIE.htc e aggiungi sotto le varie chiamate css anche behavior: url(PIE.htc);

    Ciao!

    Rispondi

  24. Allora… Prendiamo in considerazione: Codice completo del form PHP -HTML5-CSS3.
    Ho salvato PIE.htc nella root del sito, ho aggiunto la stringa: behavior: url(PIE.htc); alla fine delle chiamate css delle righe: 11;13;16;17. Ma purtroppo in IE gli angoli non sono ancora arrotondati…. Dove sbaglio?

    Se posso farti un altra osservazione, non so se sia una svista o se è stato fatto di proposito, comunque, succede questo: La mail di conferma che riceve colui che ha compilato il form, risulta mandata dallo stesso indirizzo di chi compila il form invece che risultare inviata dalla mail del sito… Es: email: sito: [email protected] email cliente: [email protected]. La mail di conferma di ricezione che riceve [email protected] è stata spedita da [email protected] invece che da [email protected]. Come si puo correggere questa cosa?

    Ciao, grazie.

    Rispondi

  27. Per quanto riguarda la mail, si dovrebbe risolvere cosi: Engine.php; riga 129, sostituire: $email; con: $tua_email;. Cosa ne dici? Giusto?

    Rispondi

  28. Per quanto riguarda la mail sì dovrebbe andare, per quanto riguarda il css3 e bordi arrotondati ti basta aggiungere : border-radius:9px; lasciando il css3 pie come hai giustamente fatto.

    Ciao!

    Rispondi

    1. 😉 in pratica nei browser di ultima generazione il tag border radius è stato introdotto nativo per cui non devi più emularlo con webkit o moz 😉 lascia comunque il codice moz e webkit per chi non avesse un browser next gen (possibilità remota ma plausibile). Ciao!

      Rispondi

  30. ciao Riccardo,

    hai notato che con safari non funziona più required??
    to cercando una soluzione sul web ma per ora niente..ne ai qualcosa?

    Rispondi

  31. Probabilmente hanno fatto degli update perchè prima andava… non saprei mi informerò anche io grazie della segnalazione, in ogni caso puoi emulare (per ora) usando jquery validation

    Rispondi

  33. Ciao,
    Volevo dirti che ho creato il form all’interno del mio sito solo che praticamente quando clicco invia mi reindirizza alla home page del sito ma la mail non parte!

    Quale potrebbe essere il problema?

    P.S.: Ho un server iis6 con php versione 5.3.8

    Rispondi

  34. Mi raccomando prova l’invio solo online e non in locale (prima raccomandazione). 2) non ti dà nessun errore? altre raccomandazioni sono controlla bene il config.php (errori di battitura della mail o altro) e verifica bene i percorsi ai file php (engine e config.php nella root del sito).

    Fammi sapere 😉

    Rispondi

  35. No Riccardo non mi da nessun errore.
    La pagina con il form di contatto è in una cartella e nella stessa cartella ci sono i file config e engine.php. (ma ho provato anche nella root)

    Il server è online.

    Rispondi

  36. controlla che il richiamo al file sia giusto (es. se metto i file in form/engine.php devi modifiare anche il percorso html), detto questo non saprei proverei amgari a ri-scaricare il file e a piazzare nuovamente il tutto, stando attento ad eventuali errori di battitura. se hai bisogno di una consulenza più approfondita contattami via skype: riccardo.mel90. Ciao!

    Rispondi

  38. Ciao,
    ho trovato il tuo articolo molto interessante.. mi chiedevo xò se il form funzionasse anche con ie7 e superiori.. ???

    Grazie mille Dario.

    Rispondi

  41. Bella guida, anche se un pochino vecchiotta… comunque quando dici:
    “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 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”.”
    Ti ha detto di lusso che hai dei bot altamente idioti… un grep su “visibility: hidden;” o “<input type="hidden" " ti metteva in fuori gioco…
    Comunque bell'idea 🙂

    Rispondi

  42. Scusami io vorrei far scrivere commenti anche sul mio sito e questa la procedura da utilizzare? ma ci vuole anche mysql?

    Rispondi

  43. ciao ho implementato il tuo form molto carino ma su ie 9 ti rimanda alla pagina del form e non fa i controlli, dove potrebbe esser eil problema? grazie

    Rispondi

  45. Ciao Riccardo …. ho iniziato da poco a programmicchiare e mi piacerebbe inserire nel mio Template questo modulo. Sò che c’è a disposizione anche la versione 1.5 e 2.0 ma volevo iniziare dal base . Volevo chiederti alcune info in merito alla configurazione … nel senso oltre ad inserire il mio sito e la mia E-Mail devo specificare e/o configurare qualcos’altro lato dominio ? Ho provato a Downloadare semplicemente i 3 File da te messi a disposizione Engine.php, Form.php (al quale ho modificato l’estensione in .html) e il config.php nel mio dominio. Ho lanciato il Form.html ed ho inserito tutti i dati ma nel momento in cui clicco su invia … mi apre una pagina con l’errore ” The Page Cannot be displayed “. Guardando l’Url richiama la pagina engine.php. Cosa sbaglio ? Cosa devo configurare ? Puoi aiutarmi a capire ?

    Rispondi

    1. Ciao Ezio innanzitutto per inviare una mail dal tuo sito web devi essere su un server PHP, quindi rinominare il file in html non è un’ottima mossa. probabilmente l’errore risiede lì. (ps devi essere su un server online e non in locale per far uscire l’email). Fammi sapere 😉

      Rispondi

  46. BRAVISSIMO …. non ho avuto neanche bisogno di chiederti un consiglio, perché le tue informazioni sono state super esaurienti… grazie. l’ho condiviso sul mio twitter ….

    Rispondi

  47. Woah! I’m really loving the template/theme of this website. It’s simple,
    yet effective. A lot of times it’s very hard to get that “perfect balance” between user friendliness and appearance. I must say you have done a superb job with this. In addition, the blog loads super fast for me on Opera. Superb Blog!

    Rispondi

  48. Ciao. E’ possibile aggiungere dei campi di informazioni?
    per ho copiato sia nell’html che nel php il campo “nome” e che poi ho modificato in “indirizzo”. Nella pagina html il campo compare e rischio a scriverci però poi quando mi invia il form il campo non esiste.
    puoi aiutarmi? grazie

    Rispondi

  50. Ottimo, esiste anche in responsive design?
    Vorrei implementarlo sul mio sito che si vede correttamente anche su smartphon e tablet

    Rispondi

    1. Ciao Angelo, ti consiglio se sei alle prime armi di ricorrere a strumenti come Bootstrap o Foundation che ti permettono di iniziare a rendere completamente responsive (compresi elementi come form di contatti etc) il tuo sito.

      Rispondi

  51. Ciao,
    come posso implementare l’opzione per fare l’upload di una immagine da allegare all’invio dell’email ???

    Grazie mille

    Rispondi

  53. Ciao Riccardo!
    Ho seguito passo passo le tue indicazioni per realizzare i file engine.php e config.php poiché erano proprio quelli che mi mancavano. Inoltre ho trasformato il mio form.html in form.php aggiungendo il codice in php da te suggerito in questo esempio (chiaramente con le opportune modifiche per il mio sito!).
    Purtroppo sono un po’ arrugginita e mi trovo un attimo disorientata. Cosa devo fare ora perché i 3 file si parlino tra loro e tutto funzioni? Basta che li carichi sul server del dominio del mio sito?
    Grazie mille!

    Rispondi

  54. Primo grazie.
    Secondo:

    Volevo fare 2 modifiche, ma non sono capace ;( .
    1. Aggiungere un utente per conoscenza all’invio delle mail
    2. Dovevo mettere la cartella form su un altro server quindi stavo provando a fare questo tipo di modifica nel file targetcontactform.js:
    type: “POST”,
    url: “/form/engine.php”,
    in
    type: “POST”,
    url: “http://www.altrodominio.com/form/engine.php”,

    pensavo dovesse funzionare , ma non e’ cosi.

    Anzi per l’invio lo fa, ma da la finestra di “Si e’ verificato un errore imprevisto…”.

    Puoi aiutarmi o darmi qualche consiglio.

    Grazie anticipatamente

    Iry

    Rispondi

  55. Ciao Riccardo!
    Ho seguito passo passo le tue istruzioni, ma non mi arrivano le mail.
    Ovvero mi arriva il messaggio di ringraziamento, che viene inviata alla mail di chi scrive, ma non mi arriva il messaggio vero e proprio inviato dal form.
    Ciao.

    Rispondi

  56. Ciao Riccardo, ho implementato il tuo codice ad un mio form e tutto funziona perfettamente, di questo te ne sono molto grato. Solo non capisco come mai una volta premuto il tasto INVIA invece di tornare all’indirizzo che ho specificato ($grazie = “http://www.paginachevoglioscrivereiringraziamenti.html”;) mi va su http://www.nomedelmiosito.it/engine.php

    Rispondi

  58. Ciao Riccardo Complimenti per tuo codice, però ho da farti una domanda usando il tuo codice se voglio inviare un allegato, cosa devo modificare?

    Attendo con ansia la tua risposta e ti auguro buone feste….

    Rispondi

  60. Ho provato a copiare il codice ed ad inserirlo nella mia pagina web, solo che quando premo invio mio da questo errore:Parse error: syntax error, unexpected ‘$to’ (T_VARIABLE) in…………………………………………….on line 32
    la riga ha questa sintassi : $to =”[email protected]”;
    Dove stà l’errore ?

    Rispondi

  61. Buongiorno Riccardo,
    ti chiedo un parere e un aiuto.
    Dovrei creare uno script che permetta di inserire gli stessi dati (es. nome, cognome, indirizzo, etc) su più documenti online.
    Mi spiego meglio, clicco su “Nuovo Ordine” e nella pagina web a cui ci si collega compaiono tutti i possibili campi in bianco da compilare. Dopo l’inserimento, deve esserci un bottone per Salvare. Poi quando si clicca su un qualsiasi documento, ogni singolo campo in quest’ultimo deve risultare già compilato. Ci deve essere la possibilità anche di stampare il documento.
    Puoi suggerirmi per piacere come procedere.
    Ti ringrazio
    Filippo

    Rispondi

  62. Salve Riccardo, veramente un bellissimo script; posso usarlo su un mio sito, ovviamente lasciando l’indicazione del tuo copyright e il tuo nome?
    Grazie

    Rispondi

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:

Slider di immagini e contenuto in jQuery e css3

Slider di immagini e contenuto in jQuery e css3
twitch