Fork me on GitHub
Sviluppatore Web Php, Programmatore Zend, Realizzazione Siti Web, Programmatore Codeigniter, Applicazioni Mobile Android iOS, Sviluppo E-commerce, Back Office su misura. info@ilovecode.it
Programming with passion.
Sei qui Home Articoli/Tutorial Web Development

Web Development

Articoli/Tutorial

Creare Un Modulo Contatti Con Php & Jquery

Creare Un Modulo Contatti  Con Php & Jquery
by Vincenzo Provenza112956 Visualizzazioni
Guarda Demo Download

In questo tutorial vedremo come andare a creare un form di contatti in php e jquery validation, utilizzando il metodo Jquery.ajax(). Succesivamente andremo a spedire l'e-mail utilizzando la classe PHPMailer.
Prima di cominciare vi invito a scaricare subito tutto il pacchetto, cosi da seguire il tutorial passo passo in maniera semplice, veloce e intuitiva. Per scaricare il tutorial clicca sul pulsante qui sopra, Download.

Il pacchetto è cosi composto:

  • Index.html (Pagina Form Contatti)
  • ajax.php (Pagina che spedira l'email)
  • PHPMailer.class.php (La classe che ci consente di spedire l'email in modo corretto)
  • Cartella Js (Contiene il nostro codice Javascript necessario, ovvaro jquery.validate.js e validate.js)
  • Cartella Css (Per dare un pò di colore al nostro tutorial)

Allora iniziamo aprendo la pagina index.html. Al suo interno troveremo il form che noi desideriamo. I campi utilizzati sono solo a scopo dimostrativo, siete liberi di aggiungere o eliminare i campi dal form a vostro piacimento. Inutile aggiungere altro, è semplicemente un form con una tabella all'interno. L'unica cosa importante al fine della buona riuscita di tutto è marcare con un id il form, e marcare sempre con un id, tutti i campi che compongo il form.

 

Compila il form, per inviare un e-mail, usando Jquery validation e Php.


Una volta creata la pagina index.html, siamo pronti a passare alla pagina validate.js, ovvero la pagina che conterrà le regole per il nostro form.
 $(function() {
/** Jquery Validation FormILC */
    $("#formILC").validate ({
    rules:{
		'nome':{
			required: true,
			minlength: 3
                 },
                 'cognome': {
                        required: true,
			minlength: 3
                 },
                 'telefono': {
                        required: true,
                        digits: true
                 },
		'email':{
			required: true,
			email: true
			},
                 'messaggio':{
			required: true,
			minlength: 10
                 }
		},
        messages:{
		'nome':{
			required: "Il campo nome è obbligatorio!",
			minlength: "Insersci un nome di almeno 3 lettere!"
			},
  		'cognome':{
			required: "Il campo cognome è obbligatorio!",
			minlength: "Insersci un nome di almeno 3 lettere!"
			},
               	'telefono':{
			required: "Il campo telefono è obbligatorio!",
			digits: "Insersci solo numeri"
			},
               'email':{
			required: "Il campo email è obbligatorio!",
			email: "Inserisci un valido indirizzo email!"
			},
               'messaggio':{
			required: "Il campo messaggio è obbligatorio!",
			minlength: "Insersci un messaggio di almeno 10 lettere!"
			}
		},
                 submitHandler: function(form) {
                                $.ajax({
                                    type: 'POST',
                                    url: '../ajax.php',
                                    dataType: 'html',
                                    data: {
                                        send: 'contatti',
                                        nome: $('#nome').val(),
                                        cognome: $('#cognome').val(),
                                        telefono: $('#telefono').val(),
                                        email: $('#email').val(),
                                        sito: $('#sito').val(),
                                        messaggio: $('#messaggio').val()
                                    },
                                    beforeSend: function() {
                                        $('#submit').fadeOut();
                                        $('img#loading').show();
                                    },
                                    success: function(data) {
                                        $('#result').html(data);
                                        $('img#loading').hide();
                                            setTimeout(function() {
                                            document.location.href="http://tutorial.ilovecode.it/contatti-php-jquery/";
                                            }, 5000);
                                        }
                                }); //Ajax
                 } //submihandler
    });
    });
In questa pagina non facciamo altro che applicare le regole al nostro form:
con rules stabiliamo quali campi devono avere determinate regole. Come vediamo nel nostro esempio stiamo utilizzando solo required e minlength, ovverò stabiliamo se un campo è obbligatorio o meno e la grandezza minima di caratteri accettati, in questo caso 3.
Troviamo anche email e digits, ovvero il primo controlla se un e-mail è valida, il secondo controlla se vengono digitati solo numeri.
Per controllare tutti gli altri metodi di jquery validate cliccate qui.
Con messages, gestiamo gli errori da far visualizzare.
Con submitHandler, grazie a $.ajax effettuiamo la richiesta ajax, cosi da passare i dati del form alla pagina ajax.php.
Con beforeSend e success, gestiamo al meglio $.ajax, ovvero prima della chiamata viene mostrato lo spinner (la gif di caricamento) e viene nascosto il submit, e dopo viene mostrato il messaggio proveniente da ajax.php se tutto è andato a buon fine, nel


A questo punto manca l'ultima pagina, ovvero la pagina ajax.php, che si occupa di spedire l'email tramite la classe PHPMailer.
L'unica cosa che dovete modificare è la variabile $email_sito inserendo la vostra email e $nome_sito inserendo il vostro nome.
/**
 * Ajax.
 * @author Provenza Vincenzo
 * @copyright 2012
 */ 

/** Includiamo la class PHPMailer */
include_once('PHPMailer.class.php');

/**La vostra e-mail, in cui ricevere l'email */
$email_sito = 'info@ilovecode.it';

/**Il Nome del vostro sito web */
$nome_sito = 'I Love Code';

/** Recuperiamo i dati */
$nome = $_REQUEST['nome'];
$cognome = $_REQUEST['cognome'];
$email = $_REQUEST['email'];
$telefono = $_REQUEST['telefono'];
$sito = $_REQUEST['sito'];
$messaggio = $_REQUEST['messaggio'];
$IP = $_SERVER['REMOTE_ADDR'];

//controlliamo i campi obbligatori
if(empty($nome) || empty($cognome) || empty($email) || empty($telefono) || empty($messaggio)) {
    echo '

Compila tutti i campi

'; } else { //Componiamo il messaggio da spedire $msg = "IP: $IP -"; $msg .= "Nome: $nome -"; $msg .= "Cognome: $cognome -"; $msg .= "E-mail: $email -"; $msg .= "Telefono: $telefono -"; $msg .= "Sito Web: $sito -"; $msg .= "Messaggio: $messaggio "; /** Istanziamo la classe PHPMailer */ $mail = new PHPMailer(); $mail->From = $email; $mail->FromName = ''.$nome.' '.$cognome.''; $mail->AddAddress($email_sito); $mail->IsHTML(true); $mail->CharSet = 'UTF-8'; $mail->Subject = 'Nuova E-mail Da '.$nome_sito; $mail->Body = $msg; if($mail->Send()) echo '

E-mail spedita in modo corretto!

'; }

Il nostro tutorial cosi è completo, spero che vi sia tornato utile. Se avete problemi o volete segnalare qualcosa potete benissimo farlo qui sotto.
Tags Usati:

Commenti (30)

Giuseppe
#215005
22/11/2012 alle 11:36

Gran bel tutorial, mi tornerà utile.
Grazie

Davide
#778577
30/12/2012 alle 16:17

Grande grazie!!!!

Francesco
#904441
03/12/2014 alle 14:49

Tutto molto interessante, se solo funzionasse!

aurora - www.centroassistenzacaldaieroma.it
#818513
21/02/2015 alle 15:33

salve sto cercando di fare la pagina di contatti ma non ci riesco sicuramente sbaglio qualche passaggio mi puo aiutare

Gaia - www.gaiagentile.blogspot.com/
#668707
09/03/2013 alle 15:16

Grazie mille del tutorial!
Leggendo però sembra che manchi un pezzo


"Con beforeSend e success, gestiamo al meglio $.ajax, ovvero prima della chiamata viene mostrato lo spinner (la gif di caricamento) e viene nascosto il submit, e dopo viene mostrato il messaggio proveniente da ajax.php se tutto è andato a buon fine, nel" ...?????

Mi potresti spiegare come far comparire il messaggio verde di invio effettuato con successo?

Grazie ancora!

Gaia - www.gaiagentile.blogspot.com/
#758076
09/03/2013 alle 15:37

Grazie mille del tutorial!
Leggendo però sembra che manchi un pezzo


"Con beforeSend e success, gestiamo al meglio $.ajax, ovvero prima della chiamata viene mostrato lo spinner (la gif di caricamento) e viene nascosto il submit, e dopo viene mostrato il messaggio proveniente da ajax.php se tutto è andato a buon fine, nel" ...?????

Mi potresti spiegare come far comparire il messaggio verde di invio effettuato con successo?

Grazie ancora!

terry
#651438
14/05/2013 alle 11:20

anche io ho riscontrato il solito problema di Giada come è possibile risolverlo ?

grazie !

Francesco
#546246
26/05/2013 alle 11:40

Ciao Vincenzo… ho usato il tuo utilissimo tutorial per creare un form di invio mail… purtroppo però se voglio aggiungere la funzione $mail->IsSMTP(); e tutti gli altri parametri che servono ad impostare un smtp esterno, il form non funziona più… al click su INVIA reagisce solo nel caso ci siano errori di validazione… se è tutto corretto non succede niente… non c'è reazione…

cosa può essere?
grazie
ciao
francesco

Enzo
#797421
16/12/2013 alle 01:41

Ciao
Volevo chiederti è possibile inserire in questo form altri campi? per esempio un invio file, (magari al posto di "telefono" ,
Cosa bisogna modificare? ti sarei grato ise potresti spiegarmelo con esempi.
Enzo

Mario
#683054
27/08/2014 alle 19:57

a Vincenzo, qui non mi funziona niente!!!!
Premo il tasto ma la pagina rimane dov'è e sparisce il tasto stesso.

michele
#481530
06/03/2015 alle 14:26

Salve. Molto utile il tutorial. Volevo sapere se era possibile utilizzarlo in jquery mobile. Devo fare un app con html e jquery mobile e poi con phonegap trasformarla in .apk per android.

Ester
#111690
12/03/2015 alle 09:43

Ciao Vincenzo, molto interessante il tutorial ma non mi funziona, non invia l'e-mail lo spinner gira.... sparisce il pul contattaci e non si schioda da lì.
Dov'è l'inghippo?

Stefano
#767615
15/03/2015 alle 16:51

Innanzitutto grazie per questo articolo:
Dopo aver provato ... e riprovato, ho capito che l'errore è nel file validate.js all'interno della cartella js.
Deve essere sostituita la riga:

url: '../ajax.php',

con

url: 'ajax.php'

Spero di essere stato d'aiuto a qualcuno.

Stefano
#400107
15/03/2015 alle 16:07

...dimenticavo

C'è anche un errore nel file index.html per quanto riguarda il tasto "spinner"

deve essere sostituita la riga:

Stefano
#198717
15/03/2015 alle 16:40

Da

img src="spinner.gif"

A

img src="css/spinner.gif"

valerio
#464604
10/04/2015 alle 12:34

salve una cortesia, non capisco perché dopo aver cambiato la mail e messo una di prova funziona benissimo. ora però ho cambiato email, cancellato il contenuto e ricaricato più volte nell'arco di 2 giorni, ma continua a mandarmi la mail a quella di prova...non mi accetta più le mail...che devo fare???

gsfbgbfgb
#421975
04/05/2015 alle 10:47

fbgfgb

Marco
#367799
25/05/2015 alle 18:53

Ciao!
GraIe del tutorial!
Utile e funzionante!
Dovrei usarlo per un applicazione al di fuori del sito..
Ho provato a modificare la posizione dei file utilizzati mettendo il link dove sono caricati ma non funziona..
Non capisco il perche...
Qualcuno che mo da una mano?

Fabbryzz
#708038
13/07/2015 alle 20:34

Ciao Vincenzo, innanzitutto complimenti per il tutorial, è molto chiaro e completo. Ho però incontrato dei problemi durante la configurazione, ho clonato il form con relativi files in una paginetta sul mio dominio e, nonostante abbia seguito minuziosamente i pochi passaggi da seguire, non riesco ad inviare alcuna mail. Una volta completati i campi, premo invio e l'immagine dello spinner mi va in loop senza che accada nulla. Potresti aiutarmi per cortesia? Ti lascio di seguito il link alla pagina in questione:
http://fabbryzz.it/test/contact_form_3/
Grazie 1000!

cristina
#949389
28/07/2015 alle 12:27

non funziona neanche a me come mai?

Spakkiotto group
#370351
01/10/2015 alle 04:38

ciao ragazzi!! innazi tutto grazie mille al programmatore :) poi volevo dirvi che come dice Stefano bisogna cambiare le seguenti direrctory in:

Da

img src="spinner.gif"

A

img src="css/spinner.gif"

modificare il percorso nel file validate.js all'interno della cartella js :

url: '../ajax.php',

con

url: 'ajax.php' oppure puoi inserire tutta la directory es: http://ilmiositoprova.com/contatti-php-jquery/ajax.php


in fine il problema sta nella pagina index.html dove nel form action va inserito: (insomma dovete inserire il file PHPMailer.class.php in from action)

inoltre nel file validate.js in fondo alla pagina ce un ridirect al seguente link: http://tutorial/contatti-php-jquery/ modificate la pagina del ridirect oppure eliminate solo 'http://tutorial/contatti-php-jquery/' lasciando solo le virgolette ( ' ')

io ho risolto così fatemi sapere :)





Roberto - http://fantasticformbuilder.altervista.org/
#871790
29/10/2015 alle 07:21

Per la generazione automatica di moduli email e moduli per l'inserimento dati in un database, consiglio il nostro form builder:
www.fantasticformbuilder.altervista.org non è richiesta registrazione e puoi avere tutti i codici sorgente del modulo creato, puoi creare moduli responsive o non responsive, la grafica è molto curata e i moduli molto sicuri.
Grazie e vi aspettiamo !

mario
#558568
18/02/2016 alle 17:21

niente da fare, ho fatto come scrive spakk ma lo spinner continua a girare all'infinito... ho anche aggiunto PHPMailer.class.php nel form action così -

mario
#833055
18/02/2016 alle 17:21

niente da fare, ho fatto come scrive spakk ma lo spinner continua a girare all'infinito... ho anche aggiunto PHPMailer.class.php nel form action così -

mario
#836737
18/02/2016 alle 17:33

niente da fare, ho fatto come scrive spakk ma lo spinner continua a girare all'infinito... ho anche aggiunto PHPMailer.class.php nel form action così -

mario
#226383
18/02/2016 alle 17:35

niente da fare, ho fatto come scrive spakk ma lo spinner continua a girare all'infinito... ho anche aggiunto PHPMailer.class.php nel form action così -

Angelo
#659179
05/04/2016 alle 23:12

Ho messo il campo radio ma non funziona qualcuno sa il perché?
Saluti.

Angelo
#375239
08/04/2016 alle 01:58

Scusate per la domanda equivoca, nel form o inserito due radio button, in HTML funziona invece in AJAX non funziona, vado nei dettagli: invio il forum al mio server , fino a li tutto regolare, quando vado a recuperare i dati inviati mi esce sempre il valore(assistita), anche se clicco sul pulsante non assistita, qualcuno sa il perché?, in cosa sbaglio?.

HTML


MTB*

assistita
non assistita

AJAX:PHP

$mtb = $_REQUEST['mtb'];

$msg .= "MTB: $mtb ";

Saluti Angelo.

Angelo
#853474
09/04/2016 alle 18:23

Qualcuno sa mettere due campi RADIO, io ho provato ma non funzionano.
saluti

Giuseppe Angelo - http://oristano.altervista.org/
#198000
15/10/2016 alle 11:16

L'autorizzazione per la privacu dei dati trasmessi dall'utente è obbligatoria da qualche anno. Ho cercato di implementarla in questo modo:

FORM

input type="checkbox" name="informativa" id="informativa" value="1"

VALIDAZIONE JQUERY

rules:{

...

'informativa':{
required: true
}
},
messages:{
...

'informativa':{
required: "Autorizzazione sulla privacy è obbligatoria"
}
},
submitHandler: function(form) {
$.ajax({
...

data: {
send: 'contatti',
...

informativa: $("#informativa").prop('checked')
},

....

La validazione inline non avviene. Dove sto sbagliando? Qualcuno potrebbe gentilmente aiutarmi? Grazie.

Di la tua, commenta adesso

Se desideri incollare codice, utilizza siti web appositi come http://pastebin.com/. Qui puoi usare solo tag html.

Tra i nostri tutorial e guide non hai trovato ciò che desideravi? Compila il modulo e attiva la tua richiesta per trattare un argomento da te scelto. Scrivici Ora