Per chi non lo conoscesse, basta inserire all’interno del vostro voglio di stile:
form {
margin:0px;
padding:0px;
}


La gestione dei Form, soprattutto per chi è alle prime armi non è così immediata. Spesso ancora oggi io stesso sto a lottare con forme, dimensioni, posizioni non sempre facili da mantenere uguali sui vari browser come FireFox, IE6, IE7, Opera…

Vi riporto una segnalazione dal buon Levysoft, di una collezione di stili CSS per Form. In questa potrete trovare sia compilatori di Form che semplici dimostrazioni da cui poter prendere spunto, ce ne sono di molto validi ed anche di molto avanzati che fruttano Form Ajax.

Developing Forms

• Prettier Accessible Forms
• The Form Assembly – Form Layouts
• CSS Styling of forms, Stu Nicholls
• Semantic Horizontal Forms
• Trimming form fields
• Badboy Niceforms
• Functional Pretty Forms
• CSS-Only, Table-less Forms

Accessible Forms

• Free Form for All. Standardkonforme Online-Formulare
• Accessible CSS Forms
• Form Layout Templates
• Style Web Forms Using CSS
• XHTML Standard Forms

Techniques and further functionality

• Form Help without Popups
• Fun with forms – customized input elements
• Styling Form Fields
• AutoSuggest – An autocomplete text field with Ajax
• Really easy field validation with Prototype
• Scrollable Checklists
• Hide Optional Fields

Create Web-Forms online

• Icebrrg – HTML Web forms, surveys, and invitations…
• Wufoo – Build HTML Forms, Online Surveys and Invitations
• JotForm – a web based WYSIWYG form builder
• Accessify Form Builder
• FormLogix – Create web forms for free

Per vedere la lista completa, con tanto di anteprima immagine per ogni Form, vi rimando sulla fonte della news su www.smashingmagazine.com

1. Rivelazione Errori Campo Vuoto
2. Messaggio dell’avvenuto invio
3. Colorazione Campi Input Vuoti

Ricapitolando il tutorial precedente: 1) Creazione di Campi di testo “input” 2) Aggiunta dell’action script 3) Aggiunta del pulsante 4) Creazione dello script Php , con questo quarto punto viene conclusa come abbiamo detto la prima parte. Ora iniziamo a lavorare sulla seconda…

Innanzitutto Realizziamo un Form con 7 campi di input quali : Nome, Cognome, Email, Societa, Fax, Telefono ed Note. Vogliamo che tutti debbano contenere per lo meno 2 lettere, e che il campo email debba contenere la @ e qualche lettera. Dopo aver realizzato tutto nello stesso modo del tutorial precedente, proseguiamo in questo modo:

Livello : Esperto

1) Creare 7 livelli Vuoti.

2) Nel Primo Livello Aggiungere un Clip Filmato con scritto Invio Avvenuto con Successo e dare come nome istanza “invio”.

3) Inserire il seguente Script su di un livello vuoto:
pulsante.onRelease = function ()
{
trace ('prosegue')
var _loc2 = new LoadVars();
_loc2.Nome = casellaNome.text;
_loc2.Cognome = casellaCognome.text;
_loc2.Societa = casellaSocieta.text;
_loc2.Email = casellaEmail.text;
_loc2.Telefono = casellaTelefono.text;
_loc2.Fax = casellaFax.text;
_loc2.Note = casellaNote.text;
_loc2.destinatario = "TUAEMAIL@MAIL.IT"; // INSERIRE LA PROPRIA E-MAIL
_loc2.onLoad = function (success)
{
}
if (casellaNome.length<2) {
testoErrore = "Campo Errato ";
scriviErrore(testoErrore);
name_txt.textColor = 0xFF0000;
corretto = false
}else{
name_txt.textColor = 0xFFFFFF;
}if (casellaEmail.text.indexOf("@")<2) {
testoErrore = "Email Errata ";
scriviErrore(testoErrore);
email_txt.textColor = 0xFF0000;
corretto = false
}else{
email_txt.textColor = 0xFFFFFF;
}
if (casellaTelefono.length<4) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
telefono_txt.textColor = 0xFF0000;
corretto = false
}else{
telefono_txt.textColor = 0xFFFFFF;
}
if (casellaCognome.length<2) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
cognome_txt.textColor = 0xFF0000;
corretto = false
}else{
cognome_txt.textColor = 0xFFFFFF;;
}
if (casellaSocieta.length<4) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
societa_txt.textColor = 0xFF0000;
corretto = false
}else{
societa_txt.textColor = 0xFFFFFF;
}
if (casellaNote.length<2) {
note_txt.textColor = 0xFF0000;
corretto = false
}else{
note_txt.textColor = 0xFFFFFF;
}
if (corretto)
_loc2.sendAndLoad("Email.php", _loc2, "POST"); // Devi modificare il percorso in modo corretto
//ad esempio puoi inserire anche http://www.tuoindirizzo.it/cartella/Email.php
{
if (success)
{
casellaNome.text = "";
casellaCognome.text = "";
casellaSocieta.text = "";
casellaEmail.text = "";
casellaTelefono.text = "";
casellaFax.text = "";
casellaNote.text = "";
mcMsg.mcTxt.txtMsg.text = this.controllo;
mcMsg.play();
}
}
}

Contiene alcuni punti essenziali per fare in modo che lo script riconosca se ci sono o meno campi vuoti, e lo si fa con la funzione length , e se viene lasciato vuoto , il campo diventa rosso ed esce un messaggio di errore con la funzione textColor e grazie alle funzioni IF ed ELSE.

4) Dopodichè su di un altro livello inserire come:
as _root.invio._visible = false ;
Questo serve per rendere la finestra di “ Invio Messaggio Avvenuto “ invisibile e di farla uscire solo se richiamata dallo script una volta inviato il messaggio .

5) Aggiungere al pulsante “ pulsInvio “ ( leggere il tutorial precedente ) ,il seguente codice :

on (press) {
_root.errore._visible=false;
_root.errore.text="";
var corretto:Boolean = true; if (casellaNome.length<2) {
testoErrore = "";
scriviErrore(testoErrore);
name_txt.textColor = 0xFF0000;
corretto = false
}else{
name_txt.textColor = 0xFFFFFF;
}
if (casellaEmail.text.indexOf("@")<2) {
testoErrore = "";
scriviErrore(testoErrore);
email_txt.textColor = 0xFF0000;
corretto = false
}else{
email_txt.textColor = 0xFFFFFF;
}
if (casellaTelefono.length<4) {
testoErrore = "";
scriviErrore(testoErrore);
telefono_txt.textColor = 0xFF0000;
corretto = false
}else{
telefono_txt.textColor = 0xFFFFFF;
}
if (casellaCognome.length<2) {
testoErrore = "";
scriviErrore(testoErrore);
cognome_txt.textColor = 0xFF0000;
corretto = false
}else{
cognome_txt.textColor = 0xFFFFFF;;
}
if (casellaSocieta.length<4) {
testoErrore = "";
scriviErrore(testoErrore);
societa_txt.textColor = 0xFF0000;
corretto = false
}else{
societa_txt.textColor = 0xFFFFFF;
}
if (casellaNote.length<2) {
note_txt.textColor = 0xFF0000;
corretto = false
}else{
note_txt.textColor = 0xFFFFFF;
}
if (corretto) {
_root.invio._visible= true ;
trace("invio corretto");
} else {
_root.errore._visible = true;
}
function scriviErrore(stringaErrore:String) {
_root.errore.text += stringaErrore+" ";
}
}

Qui non abbiamo fatto altro che ripetere lo script per la correzione dei campi, e aggiunta la function per far appariare la casella del “Invio Messaggio Inviato” .

6) Realizzare uno script con notepad e rinominarlo Email.php inserire al suo interno il seguente codice php:

<?php
$casellaNome = stripslashes($_POST['Nome']);
$casellaCognome = stripslashes($_POST['Cognome']);
$casellaSocieta = stripslashes($_POST['Societa']);
$casellaEmail = stripslashes($_POST['Email']);
$casellaTelefono = stripslashes($_POST['Telefono']);
$casellaFax = stripslashes($_POST['Fax']);
$casellaNote = stripslashes($_POST['Note']);
$sms = '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contatti</title>
<style type="text/css">
td{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
}
</style>
</head>
<body style="margin:0px;">
<table cellpadding="0" cellspacing="0" style="height:100%;width:500px;">
<tr>
<td style="height:100%;padding:20px;vertical-align:top;">
<table>
<tr><td colspan="2">
<br /><br /></td></tr>
<tr><td width="80"><b>» Nome:</b></td>
<td width="259">'.$casellaNome.'</td></tr>
<tr><td width="80"><b>» Cognome:</b></td>
<td width="259">'.$casellaCognome.'</td></tr>
<tr><td><b>» Società</b></td>
<td>'.$casellaSocieta.'</td></tr>
<tr><td><b>» E-mail</b></td>
<td>'.$casellaEmail.'</td></tr>
<tr><td><b>» Telefono</b></td>
<td>'.$casellaTelefono.'</td></tr>
<tr><td><b>» Fax </b></td>
<td>'.$casellaFax.'</td></tr>
<tr><td><b>» Note</b></td>
<td>'.$casellaNote.'</td></tr>
<tr><td colspan="2"> </td></tr>
</table></td></tr></table></body></html>';$headers = "From: $casellaNome $casellaCognome <$casellaEmail>n";
$headers .= "Content-Type: text/html; charset=iso-8859-1n";
$oggetto = " Richiesta Informazioni n";
if(mail($_POST['destinatario'], $oggetto, $sms, $headers)){
echo '&controllo=invio avvenuto con successo.';
}
else{
echo '&controllo=errore: e-mail non inviata.';
}
?>

Modificati alcuni punti in questo script quale “Oggetto” modificato con Richiesta Informazioni.

Con questi ultimi Punti abbiamo completato Il Form Email con Flash e Php, spero che risulti a tutti il più semplice possibile se cosi non fosse, non esistate a domandare e commentare. Buona Programmazione!

Download file esempio
Potete confrontate il vostro risultato con questo file esempio:

• flash-php_2.zip

- – - – - – - – - – - – - – - – - – - – - – -

ATTENZIONE: Vi invito a provare il tutorial tenendo conto che in alcuni casi, spesso causati da requisiti di sistema, il form mail non può funzionare. Nel caso, provate anche a controllare soluzioni presenti tra i commenti.

1) Aprire un documento vuoto ed iniziare a creare 4 campi di testo “input”. Dare a ciascun campo un nome “istanza” che servirà allo script di riconoscere all’interno del filmato l’ordine dei campi.
Primo campo dare come nome istanza Nome ,secondo campo Cognome, terzo campo Email, quarto campo Richiesta. Ora creiamo un pulsante per l’invio dell ‘email e diamo come nome istanza pulsInvio.

2) Dopodiché inseriamo in un fotogramma vuoto il seguente ActionScript, facendo attenzione a sostituire il vostro url dello script con i vostri dati, dove vedete che il codice è scritto in grassetto :

stop();
pulsInvio.onRelease = function(){
var sendMail:LoadVars = new LoadVars();
sendMail.nome = Nome.text;
sendMail.cognome = Cognome.text;
sendMail.mittente = Email.text;
sendMail.richiesta = Richiesta.text;
sendMail.destinatario = 'Email destinazione messaggi';
sendMail.onLoad = function(success){
if(success){
Nome.text = '';
Cognome.text = '';
Email.text = '';
Richiesta.text = '';
mcMsg.mcTxt.txtMsg.text = this.controllo;
mcMsg.play();
}
}
sendMail.sendAndLoad('Url script php che genera l'email', sendMail, 'POST');
}

Come potete vedere il seguente ActionScript è molto semplice da capire , ora spiegherò in linea generale il suo funzionamento : Inseriamo innanzitutto l’azione ‘stop’ per fermare la ‘time line’, poi scriviamo il nome dell’ istanza del pulsante Invio poiché l’ActionScript gira attorno a quest’ultimo , accanto a pulsInvio come si nota c’è l’azione onRelease che serve per comunicare al pulsante che al rilascio del mouse su di esso deve partire tutta l’azione.
Dopo di chè creiamo una nuova variabile che chiamiamo SendMail cosi che appena la richiamiamo con l’azione sendAndLoad questa raggruppi tutti i nomi dei campi input e l’invii allo script che provvederà poi ad inviare l’email alla nostra posta.
Ora dove c’è l’azione sendMail.destinatario inseriamo la nostra email , mentre nell’ultima azione scriveremo l’url di dove è situato lo script all’interno del nostro sito preferibilmente nella stessa cartella dove è situato il filmato flash.

3) Ora provvediamo a creare un degno script che PRIMO funzioni e SECONDO sia di facile intuizione. Aprire il comune Notepad di Windows e scrivere il seguente codice dopodiché salvarlo con il nome email.php . Anche questo è abbastanza semplice da capire basta che abbiate una minima base di php che vi risulterà di facile lettura e comprensione:

<?php
$nome = stripslashes($_POST['nome']);
$cognome = stripslashes($_POST['cognome']);
$mittente = stripslashes($_POST['mittente']);
$richiesta = stripslashes($_POST['richiesta']);
$sms = '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contatti</title>
</head>
<body style="margin:0px;">
<table cellpadding="0" cellspacing="0" style="height:100%;width:500px;">
<tr>
<td style="height:100%;padding:20px;vertical-align:top;">
<table>
<tr><td colspan="2">
<img src="Url della tua immagine personalizzata" alt="" />
</td>
</tr>
<tr><td width="110"><b>Nome:</b></td>
<td width="300">'.$nome.'</td></tr>
<tr>
<td><b>Cognome:</b></td>
<td>'.$cognome.'</td></tr>
<tr>
<td><b>E-mail:</b></td>
<td>'.$mittente.'</td></tr>
<tr>
<td><b>Richiesta:</b></td>
<td>'.$richiesta.'</td></tr>
</table></td></tr>
</table>
</body>
</html>';
$headers = "From: $nome $cognome <$mittente>n";
$headers .= "Content-Type: text/html; charset=iso-8859-1n";
if(mail($_POST['destinatario'], $oggetto, $sms, $headers)){
echo '&controllo=invio avvenuto con successo.';
}
else{
echo '&controllo=errore: e-mail non inviata.';
}
?>

4) Ora basta mettere online sia il file Swf che lo script et voilà il gioco è fatto. Se avete avuto problemi non esitate a commentare se eventualmente uno dei passaggi non vi è stato chiaro.

5) Il quinto passaggio non esiste quindi testatelo e sperate in bene.

Precisazioni del 06.07.2006
Viste le difficoltà accadute in diversi casi, l’articolo è stato riveduto e corretto, e anche semplificato nel codice.
In più per facilitarvi al massimo la vita, sono stati creati dei file esempio che potete scaricare direttamente da qui:

• flash-php.zip

Il file da scaricare è compatibile FlashMX 2004.
Bisogna anche segnalare che in rari casi, si è potuto verificare che alcuni server non hanno permesso il “colloquio” tra Flash ed il PHP, non facendo funzionare il Form.

Il primo è Jotform.com, offre un impaginazione molto semplice e trascinando gli elementi sul form, situati a destra, sull’area lavorativa, vi accorgerete che sarà semplice ed immediato l’ordinamento anche l’ordinamento. Il secondo, è ancora in fase di lavorazione ma è già disponibile un demo che riesce a rendere l’idea delle potenzialità di questo script. Si chiama Wufoo.com, per sapere quando sarà concluso il periodo test, potrete iscrivervi ad una newsletter.