Canale Youtube
Canale Youtube
Canale Youtube

Stai cercando qualcosa?

Categorie
Spotlight

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

9 min read
Contenuti

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 = "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>&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 = "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>&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!

 

73
Updated on
Share
0 0 voti
Valutazione dell'articolo
Iscriviti
Notificami
guest

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.

73 Commenti
Vecchi
Più recenti Le più votate
Feedback in linea
Visualizza tutti i commenti
giacomo
giacomo
14 anni fa

articolo stupendo =) complimenti! lo consiglierò a molti miei amici >,<

0
Rispondi
giacomo
giacomo
14 anni fa

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

0
Rispondi
trackback
Sito da cui trarre ispirazione: Hotel Villa Danci | Target Web.it
14 anni fa

[…] e CSS3 con animazioni in jQuery sviluppate da me. Il form e’ sempre in HTML5, ed e’ lo stesso usato in questo articolo.Il problema più “grosso” durante lo sviluppo e’ stato adattare le animazioni e il […]

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

Basta agire sulla classe required !

0
Rispondi
giacomo
giacomo
14 anni fa

quindi metto .required { stili } ?

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

Non ho ancora provato, o con il punto o senza required { stili }

0
Rispondi
Marco
Marco
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

Grazie! spero continuerai a leggere il blog! a presto Marco! Se vuoi supportarmi condividi il blog/articolo ai tuoi amici per aiutarmi a crescere… Ciao!

0
Rispondi
trackback
Design Inspiration: Ritamendola Hairstyle | Target Web.it
14 anni fa

[…] sezione contattaci, animata con jQuery, usa il mio form html5/css3/php che potete trovare e usare liberamente a questo indirizzo.Per la sezione dove siamo, ho pensato di integrare Street View e appena sotto di specificare meglio […]

0
Rispondi
Andrea
Andrea
14 anni fa

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?

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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

0
Rispondi
Andrea
Andrea
14 anni fa

@Riccardo
Purtroppo non ho capito dove mettere quella riga da te suggerita. Potresti esere più specifico pls?

0
Rispondi
Andrea
Andrea
14 anni fa

Ok ho risolto facendo un iframe così sembra che compaia all’interno del div

0
Rispondi
Andrea
Andrea
14 anni fa

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.

0
Rispondi
Andrea
Andrea
Rispondi a  Andrea
14 anni fa

Mi rispondo da solo .. ho visto il jquery 🙂

0
Rispondi
Andrea
Andrea
14 anni fa

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.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  Andrea
14 anni fa

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

0
Rispondi
Matteo
Matteo
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

Grazie Matteo mi fa molto piacere! continua a seguirmi 😉

0
Rispondi
alessandro
alessandro
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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

0
Rispondi
alessandro
alessandro
14 anni fa

non ho capito il tag ..dove dovrei aggiungerlo?

grazie mille..

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  alessandro
14 anni fa

Si scusa prova con <*p*r*e*>TUO CODICE<*/*p*r*e*> senza gli astrerischi

0
Rispondi
alessandro
alessandro
14 anni fa

pre –select required –.bla bla bla — /select — /pre

nada…non funzia..

0
Rispondi
Luca
Luca
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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!

0
Rispondi
Luca
Luca
14 anni fa

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: info@sito.it email cliente: cliente@alice.it. La mail di conferma di ricezione che riceve cliente@alice.it è stata spedita da cliente@alice.it invece che da info@sito.it. Come si puo correggere questa cosa?

Ciao, grazie.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

ie che versione? il procedimento è quello, usi per caso wordpress? quella della mail non l’avevo notata controllerò e correggo nella prossima release del form.

0
Rispondi
Luca
Luca
14 anni fa

IE9… Non uso word press… Se vuoi vedere la pagina non fuzionante sulla quale sto facendo le prove: http://www.igmitalia.com/form.php (se non si possono inserire link, dagli un occhiata e poi rimuovilo).

0
Rispondi
Luca
Luca
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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!

0
Rispondi
Luca
Luca
14 anni fa

Ok, fatto… Ora funziona perfettamente… Grazie.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  Luca
14 anni fa

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

0
Rispondi
alessandro mazzetti
alessandro mazzetti
14 anni fa

ciao Riccardo,

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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

0
Rispondi
alessandro mazzetti
alessandro mazzetti
14 anni fa

ho risolto con un JS.
Però è strano perche required dovrebbe essere un attributo html5 supportato da safari (così ho letto in rete) http://fmbip.com/litmus..
che fa apple? va indietro per emulare IE..mha..

0
Rispondi
Gianmarco Petrini
Gianmarco Petrini
14 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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 😉

0
Rispondi
Gianmarco Petrini
Gianmarco Petrini
14 anni fa

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.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

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!

0
Rispondi
Gianmarco Petrini
Gianmarco Petrini
14 anni fa

I percorsi sono esatti (se metto i percorsi assoluti mi da errore).
Credo che il problema riguardi le impostazioni di iis sul server.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  Gianmarco Petrini
14 anni fa

molto probabile prova a contattare il tuo hosting (o se ne hai l’occasione prova su un altro).

0
Rispondi
dario
dario
14 anni fa

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

Grazie mille Dario.

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
14 anni fa

su ie7 > devi usare per forza il validation tool in jQuery…. (ultimo capitolo della guida). proprio perchè questi browser non supportano html5/css3 e le nuove feature

0
Rispondi
michele
michele
14 anni fa

Complimenti l’idea del campo vuoto non mi sarebbe mai venuta in mente. Grazie !

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  michele
14 anni fa

;9 Guarda anche la seconda versione in cui ho corretto alcuni bug e inserito il check ajax!

0
Rispondi
Black_Codec
Black_Codec
14 anni fa

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 🙂

0
Rispondi
rino
rino
13 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  rino
13 anni fa

Bhè non proprio questo form serve per farti contattare attraverso il tuo sito/blog =)

0
Rispondi
sirio
sirio
13 anni fa

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

0
Rispondi
sirio
sirio
13 anni fa

scusa ho letto solo ora della versione 2

0
Rispondi
Ezio
Ezio
13 anni fa

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 ?

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  Ezio
13 anni fa

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 😉

0
Rispondi
Ivan
Ivan
13 anni fa

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

0
Rispondi
Violette
Violette
12 anni fa

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!

0
Rispondi
Mar98
Mar98
12 anni fa

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

0
Rispondi
migo80
migo80
12 anni fa

Ciao ma negli esempi manca il file javascript e come implementarlo

0
Rispondi
Angelo
Angelo
12 anni fa

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

0
Rispondi
Riccardo Mel
Riccardo Mel
Autore
Rispondi a  Angelo
12 anni fa

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.

0
Rispondi

Read Next

Rimani Aggiornato
Nuove idee, zero Spam
Ti invieremo solo le ultime novità di articoli o nostri progetti.
Iscrivendoti accetti la nostra privacy poliicy. Una volta iscritto, ricordati di attivare l'iscrizione cliccando sul link ricevuto via mail.
73
0
Esprimete la vostra opinione commentando.x