Modulo contatti con PHP e Jquery


12 ottobre 2010 8 Commenti javascript, jquery, php, php+javascript

Oggi vedremo come realizzare un semplice modulo contatti con php e jquery.

Queste due tecnologie verranno utilizzate rispettivamente per:

- PHP gestire le funzioni back, cioè controllo dei dati e invio mail;
- JQUERY per inviare i messaggi di errore o di successo dell’invio della pagina. Il tutto senza aggiornare la pagina dove risiede il form.

Per cominciare realizziamo il form in html per l’invio dell’ e-mail.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>

<title>Invio Mail con PHP & Jquery</title>

<script type="text/javascript"  src="jquery.min.js"></script>
<script type="text/javascript"  src="mail.js"></script>

</head>

<body>

<form id="form_contatto" method="post" >

<b>Nome : </b>
<input type="text" name="nome" id="nome"><br>

<b>Oggetto : </b>
<input type="text" name="oggetto" id="oggetto"><br>

<b>Tua Mail : </b>
<input type="text" name="mail" id="mail"><br>

<b>Testo : </b><br>
<textarea cols="30" rows="10" name="testo" id="testo"></textarea><br><br>

<input type="submit" value="Invia Mail" id="button" name="button">


</form>


<div id="risposta_form"></div>

</body>
</html>

Come avete visto, sotto il form c’è un div con id=risposta_form. Esso servirà a ricevere la risposta dalla pagina che invia la mail. Vediamo ora cosa scrivere nel nostro foglio mail.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
$(document).ready(function(){
$("#button").click(function(){

var nome = $("#nome").val();
var oggetto = $("#oggetto").val();
var mail = $("#mail").val();
var testo = $("#testo").val();
var esito = '';

if (nome.length<1) {

var esito = "Nome errato <br>";

}

if (oggetto.length<1) {

var esito = "Oggetto errato <br>";

}

if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {

var esito = "Mail errata <br>";

}

if (testo.length<1) {

var esito = "Testo errato <br>";

}

if (esito == "" ) {

// inviamo la mail

var dati_mail ='nome=' + nome + '&oggetto=' + oggetto + '&mail=' + mail + '&testo=' + testo;

$.ajax({
 
type: "POST",
url: "mail.php",
data: dati_mail,
cache: false,
success: function(html){

var esito = "Ok, sto inviando l'mail";

$("#risposta_form").fadeIn("slow");
$("#risposta_form").html(esito);
$("#risposta_form").css("background-color","#146803");


setTimeout('$("#risposta_form").fadeOut("slow")',2000);

}})
 


} else {

// non inviamo la mail

$("#risposta_form").fadeIn("slow");
$("#risposta_form").html(esito);
$("#risposta_form").css("background-color","#cc0000");


}

return false;

});

});

E ora il nostro file php, pronto per inviare la mail:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php

$la_tua_mail = "nome@tua_mail.ext";

$nome = $_POST['nome'];
$oggetto = $_POST['oggetto'];
$mail_mittente = $_POST['mail'];
$testo = $_POST['testo'];

mail ($la_tua_mail, $oggetto, $testo, "From: $mail_mittente");

echo "Complimenti mail inviata con successo";

?>

Puoi vedere l’esempio da qui oppure scaricare il tutto in pochi secondi.

Ti è piaciuto l’articolo , scrivimi :)



Potresti trovare interessante anche

101 Creiamo un template Personalizzato su Wordpress
Pubblicato in javascript, jquery, php, php+javascript |


Iscriviti alla newsletter

Vuoi ricevere ogni articolo che pubblico direttamente sulla tua mail ? Vuoi evitare di perdere qualsiasi articolo pubblico ? Registrati alla mia newsletter in un click.

Inserisci il tuo indirizzo mail:

8 commenti per Modulo contatti con PHP e Jquery


10 parametri per definire un bel sito « Ebug – Discussioni da Web Designer

20 gennaio 2011 alle 19:35

[...] Per personalizzare la tua pagina 404 ti consiglio questo mio articolo online di htaccess e la personalizzazione delle pagine di errore, mentre per il form vi consiglio qualcosa in jquery come in quest’altro articolo mio sui form e jquery. [...]


diego

19 aprile 2011 alle 09:50

Ciao Rocco,
volendo aggiungere un Checkbox e relativo controllo?
Grazie.

Ciao @diego per aggiungere una checkbox basta solo inserire  cose:

1) nel form la checkbox con nome “yy”
2) nel file js la var yy 
3) e nel file php la variabile post

all’atto pratico:

1) form < input type=’checkbox’ name=’yy’ >
2) nel file js  var testo = $(“#yy”).val(); e in fondo nel var dati ‘yy=’ + yy
3) nel file php $yy = $_POST['yy'];

Se hai bisogno di altro io sono qui :D


diego

19 aprile 2011 alle 11:41

Ciao Rocco e grazie per la risposta velocissima.
Il mio problema è quello di aggiungere una casella per la privacy e realizzare anche su di essa il controllo prima dell’invio della mail.
Seguendo il tuo suggerimento manca la parte del controllo e selezionata omeno la casella la mail parte lo stesso.
Spero di non chiedere troppo :-)

@diego tranquillo non chiedi troppo ;)

dovresti inserire un if cheched con jquery per far attivare la funzione :D

http://api.jquery.com/checked-selector/

in pratica devi mettere la tua libreria in mezzo a un if che utilizza il selettore :checked , così che lui comprenda se il valore è stato selezionato, può far inviare la mail :D


diego

20 aprile 2011 alle 08:11

Ciao Rocco,ho risolto in questo modo:…var n = $(“input:checked”).length;…if (n<1) {var esito = “Acconsenti al trattamento dei tuoi dati <br>”;} E’ certamente rudimentale, ma per un form con una solo checkbox va più che bene. Ancora grazie e a presto ;-)


simone

27 luglio 2011 alle 17:45

potresti fare anche un tutorial per il modulo login ?
 
Grazie.


Roberta

14 dicembre 2011 alle 11:48

ciao Rocco,
come al solito complimenti. Avrei solo una domanda.. come faccio a far apparire tipo “mail inviata con successo” dopo ”Ok, sto inviando l’mail”?
Nel file php c’è:
echo “Complimenti mail inviata con successo”;
però dopo l’invio non appare nulla…
grazie ancora!
Roby

Lascia un Commento