Inviare una mail con php ajax e jquery in stile facebook

Facebook é senza dubbio uno dei fenomeni di questo ultimo anno, ma aldilá del social networ quello hce mi paice tanto di questo sito é  il design e l’uso massiccio, ma non monotono, di effetti 2.0

Avete presente il message box di facebook? Esatto con questo tutorial ricreeremo quel sistema, inviando mail senza dover ricaricare pagine e con qualche piccolo effetto per rendere piú accattivante la pagina, naturalmente ho preparato, come sempre, un esempio completo da visualizzare online e i sorgenti pronti da scaricare. inuitle dirvi che come framework javascript useró jquery, cosi scoprirete anche quanto sia facile usare ajax con questo fantastico framework.

Ok partiamo, naturalmente abbiamo bisogno di jquery e di linkarlo al nostro file, quindi bisogna creare il form per l’invio della mail, questo il codice :

<div>
<div id=”response”>

</div>
<form id=”formail” action=”" method =”post”>
<label>Name : </label>
<input type=”text” name=”name” id=”name” />
<label>Your mail :</label>
<input type=”text” name=”mail” id=”mail” />
<label>Subject : </label>
<input type=”text” name=”subject” id=”subject” />
<label>Text :</label>
<textarea name=”text” id=”text” cols=”40″ rows=”10″></textarea>
<input type=”submit” value=”send mail” id=”sendmail” name=”sendmail” />
</form>
</div>

</div>

Questo il codice per il form, c’é poco da spiegare se non il Div response che servirá per gestire i messaggi di risposta per l’invio della mail, é importante quindi non dimenticate di inserirlo, piú avanti nel tutorial capirete perché.

Una piccola precisazione: il tutorial é stato pubblicato sul mio blog in inglese , lastwebdesigner, quindi testo e nomi dei div e degli elementi sono in inglese, ma potete tranquillamente cambiare le variabili o le label del form a vostro piacimento.

Ora diamo uno stile al nostro form , ricordando una cosa importantissima, il div resposne deve essere “nascosto” quindi in display:none, andando avanti nel tutorial capirete perché.

body{
background: #E7E7DC;
font-size: 13px;
font-family: arial;
}
#wrap{
width: 800px;
background: white;
margin: auto;
padding: 10px;
}
#wrap h1{
padding: 10px;
border: 1px solid #ccc;
background: #f8f8f8;
}
.mail{
width:500px;
margin:auto;
}
#formail{
width: 500px;
margin: auto;
}
#formail label{
display: block;
margin: 10px 0;
}
#text{
background: #f8f8f8;
}
#sendmail{
margin-top: 20px;
display: block;
}
#response{
display: none;
border: 1px solid #ccc;
background: #FFFFA0;
padding: 10px;
width: 450px;
}

Creato lo stile del form, bisogna creare la pagina mail.php. Come avrete notato nel form di invio, al contrario del mio primo tutorial su come inviare mail con php, nell’action non ho inserito nulla, questo perché si occuperá jquery e lo script ajax a richiamare la corretta pagina. Ecco il codice della pagina mail.php :

<?php
$mail = $_POST['mail'];
$name = $_POST['name'];
$subject = $_POST['subject'];
$text = $_POST['text'];

$to = “yourmail@domain.com”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;

if(mail($to, $subject,$message)){
echo “mail successful send”;
}
else{
echo “there’s some errors to send the mail, verify your server options”;
}
?>

Qua l’unica cosa da cambiare, a parte i mesaggi se volete scriverli in Italiano, é la variabile $to, dove inserirete la vostra mail. MA questo lo sapete giá se avete letto i miei precedenti tutorial, quindi non credo ci sia bisogno di spiegazioni per capire come funziona la funzione mail di php, direi che e abbastanza semplice, raccolgo i dati dal form, li metto in una variabile e infine li invio con la funzione apposita. In caso di errore restituisco un messaggio.

Ora passiamo alla pagina ajax.js, la piú importante che gestisce la funzione ajax che invia i dati, in questo caso ho aggiunto anche una verifica del modulo, che ho anche implementato nel precedente tutorial, che controlla l’inserimento dei dati prima di inviarli al server.

$(document).ready(function(){
$(“#sendmail”).click(function(){
var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}
if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}
else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}
return false;
});
});
function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,2000);
}
});
}

Passiamo a descrivere cosa fa esattamente questo script.

Se conoscete jquery giá sapete cosa fa la funzione $(document).ready, quindi inutile spiegarlo. Prima di tutto verifico che i dati inviati dal form siano corretti e non siano vuoti, con la prima parte di codice :

var valid = ”;
var isr = ‘ is required.’;
var name = $(“#name”).val();
var mail = $(“#mail”).val();
var subject = $(“#subject”).val();
var text = $(“#text”).val();
if (name.length<1) {
valid += ‘<br />Name’+isr;
}
if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += ‘<br />A valid Email’+isr;
}
if (subject.length<1) {
valid += ‘<br />Subject’+isr;
}
if (text.length<1) {
valid += ‘<br />Text’+isr;
}
if (valid!=”) {
$(“#response”).fadeIn(“slow”);
$(“#response”).html(“Error:”+valid);
}

se tutto é corretto allora invio i dati :

else {
var datastr =’name=’ + name + ‘&mail=’ + mail + ‘&subject=’ + subject + ‘&text=’ + text;
$(“#response”).css(“display”, “block”);
$(“#response”).html(“Sending message …. “);
$(“#response”).fadeIn(“slow”);
setTimeout(“send(‘”+datastr+”‘)”,2000);
}

la funzione send, infine. é la vera funzione ajax che si occupa di inviare i dati senza ricaricare pagina :

function send(datastr){
$.ajax({
type: “POST”,
url: “mail.php”,
data: datastr,
cache: false,
success: function(html){
$(“#response”).fadeIn(“slow”);
$(“#response”).html(html);
setTimeout(‘$(“#response”).fadeOut(“slow”)’,2000);
}
});
}

La funzione ajax di jquery é abbastanza semplice, accetta dei parametri che sono il metodo del form, in questo caso post, la url, mail.php e la variabile data, che raccoglie le variabili e le passa,tramite javascript, al form. Maggiori informazioni le trovate qua :

Funzione ajax di jquery.

l’esempio completo lo trovate a questo indirizzo.

qua invece potete scaricare l’esempio completo con i sorgenti.

Hasta Luego!

Popularity: 1% [?]

Potrebbero interessarti anche :

• Come popolare una select dinamica da un database con php mysql e ajax (3)
• Scegliere il giusto hosting per il tuo sito. (0)
• Menu animato con jquery (7)
• Tooltip con jquery (14)
• Uno slideshow ancora con jquery (3)
• Una gallery animata con jquery e css (6)
• Ultimi post del forum nel nostro blog (3)
• Menu a scorrimento verticale con css e jquery (18)
• Organizzare il sito con Dreamweaver (4)
• Impostare un sito con Dreamweaver (12)