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.

icon smile Inviare una mail con php ajax e jquery in stile facebook

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!

17 pensieri su “Inviare una mail con php ajax e jquery in stile facebook”

  1. $(”#response”).fadeIn(”slow”); fa dei casini su Opera: consiglio semplicmente

    $(”#response”).hide();

  2. IL form è splendido ma quando clicco invia la mail non viene inviata ed in cima al form mi viene scritto A valid Email e obbligatorio.Premettendo che non ne so molto mi potreste aiutare a correggere l’errore che ho sicuramente commesso? Grazie in anticipo.

  3. Non mi funzia.. mi da un errore:
    Warning: mail() [function.mail]: “sendmail_from” not set in php.ini or custom “From:” header missing in C:\xampp\htdocs\mail\mail.php on line 11
    there’s some errors to send the mail, verify your server options

  4. @Andrea : è un problema in locale con Xamp, devi abilitarlo nel php.ini.
    Provalo su un server online e vedrai che funziona. :)

  5. @Andrea : sinceramente non saprei dirti, io lavoro su Mac OS con Mamp, esiste anche una versione per windows, wamp, magari prova a installare questa invece che xaamp.
    Per quanto riguarda il php.ini, devi impostare un smtp server, inoltre non ricordo se nel codice avevo inserito gli headers, in quel caso devi inserirli nella funzione mail.

  6. grazie vedrò come sistema quel fatto. adesso lho messo su webhosting e funziona quasi perfettamente ( non arriva il nome inserito )
    la ho aggiunta su facebook se vuole accettare.

  7. Ciao! grazie mille per questo form mail veramente bello.
    funziona tutto perfetto…
    ma vedo che nessuno nota che se si scrive un a capo (schiacciare enter) quando si scrive nel messaggio (“text”) la mail non si invia e si inceppa il caricamento dell’invio…
    Come risolvere?

I commenti sono chiusi.