novembre 23rd, 2009
Oggi voglio mostrarvi come creare un simpatico contact form in jQuery e PHP, che non necessita di refresh della pagina. Principalmente, il form sarà costituito da un foglio di stile, dal file html contenente il modulo, da un file jquery e da un file php. Potete vedere qui una demo.
Creiamo subito il nostro file html contenente, naturalmente, il link alla libreria jQuery, al nostro foglio di stile e al nostro script. Questo conterrà anche un div di nome “risposta” nel quale comparirà un messaggio di avvenuto, o meno, invio dell’e-mail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>jQuery contact form</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery_mail.js"></script> </head> <body> <form id="formail" method="post" action=""> <div id="risposta"> </div> <p>Nome:</p> <input type="text" id="nome" name="nome" value="" /><br /> <p>E-mail:</p> <input type="text" id="email" name="email" value="" /><br /> <p>Oggetto:</p> <input type="text" id="oggetto" name="ogggetto" value="" /><br /> <p>Messaggio:</p> <textarea id="messaggio" name="messaggio" rows="9" cols="20"></textarea><br /> <input type="submit" id="invia" name="invia" value="Invia" /> </form> </body> </html>
Ora, diamo un tocco di stile 
. Il nostro file si dovrà chiamare, naturalmente, style.css.
p{ margin: 0 0 5px 0; color:#5F6565; font-family:Tahoma,Arial,Helvetica,sans-serif; } form#formail{ margin:0 auto; width: 315px; background-color: #f2f2f2; border: 1px solid #dbdbdb; padding: 10px; } input[type=text]{ background:#FFFFFF none repeat scroll 0 0; border:1px solid #CED0D0; color:#5F6565; font-family:Tahoma,Arial,Helvetica,sans-serif; margin-bottom:10px; padding:4px 5px; width:300px; } textarea{ background:#FFFFFF none repeat scroll 0 0; border:1px solid #CED0D0; color:#5F6565; font-family:Tahoma,Arial,Helvetica,sans-serif; padding:4px 5px; width:300px; height: 160px; } #risposta{ display: none; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
Creiamo ora il file “jquery_mail.js” e inseriamo questo codice. Ho aggiunto dei commenti, quindi dorvebbe essere di facile comprensione.
$(document).ready(function(){ $("#invia").click(function(){ //Recuperiamo tutte le variabili var valid = ''; var isr = ' è richiesto.</p>'; var name = $("#nome").val(); var mail = $("#email").val(); var subject = $("#oggetto").val(); var text = $("#messaggio").val(); //Eseguiamo una serie di controlli if (name.length<1) { valid += '<p>Un nome valido'+isr; } if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { valid += '<p>Un indirizzo e-mail valido'+isr; } if (subject.length<1) { valid += '<p>Un oggetto valido'+isr; } if (text.length<1) { valid += '<p>Un messaggio valido'+isr; } //Se i controlli non vengono superati, appare il messaggio di errore. if (valid!='') { $("#risposta").fadeIn("slow"); $("#risposta").html("<p><b>Errore:</b></p>"+valid); $("#risposta").css("background-color","#ffc0c0"); } //Se i controlli vengono superati, compare un messaggio di invio in corso else { var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&text=' + text; $("#risposta").css("display", "block"); $("#risposta").css("background-color","#FFFFA0"); $("#risposta").html("<p>Invio del messaggio in corso..</p>"); $("#risposta").fadeIn("slow"); setTimeout("send('"+datastr+"')",2000); } return false; }); }); //Creazione della funzione di invio. Si baserà sul nostro file php "mail.php". function send(datastr){ $.ajax({ type: "POST", url: "mail.php", data: datastr, cache: false, success: function(html){ $("#risposta").fadeIn("slow"); $("#risposta").html(html); $("#risposta").css("background-color","#e1ffc0"); setTimeout('$("#risposta").fadeOut("slow")',2000); } }); }
Infine creiamo il file “mail.php” nel quale inseriremo il codice che servirà ad inviare la nostra e-mail.
<?php //Recuperiamo tutte le variabili $mail = $_POST['mail']; $name = $_POST['name']; $subject = $_POST['subject']; $text = $_POST['text']; $ip = $_SERVER['REMOTE_ADDR']; //Qui andrà inserito il tuo indirizzo e-mail $to = "indirizzo@email.it"; //Creazione del mesaggio da inviare $message = "Hai ricevuto una e-mail da: ".$name.", ".$mail.".<br />"; $message .= "Messaggio: <br />".$text."<br /><br />"; $message .= "IP: ".$ip."<br />"; $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; $headers .= "From: <$name>"; //Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio if(mail($to, $subject,$message, $headers)){ echo "<p>Messaggio inviato con successo</p>"; } //Altrimenti un messaggio di errore else{ echo "<p>Ci sono stati degli errori nell'invio della e-mail.</p>"; } ?>
Puoi scaricare da qui lo script completo. Se hai una domanda o un dubbio, ti invitiamo a lasciarci un commento 
Kharg
novembre 23rd, 2009Dubbio: cosa è il jquery?
mi piacerebbero di più dei tutorial su photoshop u.u
STAFF
novembre 23rd, 2009ehehe, comunque sarebbe una libreria javascript. Ti permette di fare molti effetti grafici carini con poche righe di codice
Deli
novembre 25th, 2009Potresti fare un tutorial su come creare quell’effetto javascript per le categorie, i commenti, gli archivi ecc. ?????
Comunque molto bello questo!
STAFF
novembre 25th, 2009In verità non l’ho realizzato io, l’ho trovato non ricordo dove
Comunque appena posso farò una guida su come realizzare una cosa simile..
Deli
novembre 26th, 2009@ STAFF:
Grazie
Artedelweb
novembre 29th, 2009Grazie, lo conosciamo già, solo che ha già spopolato nella blogsfera e non volevamo pubblicare un articolo/copia
Kharg
novembre 29th, 2009Vorrei mostrarvi un bellissimo template in jquery per i siti in construzione: http://www.ourtuts.com/free-site-under-constructi... perche non farne una news?