Creiamo un bellissimo contact form in jQuery e PHP
CSS, jQuery, PHP e.., Tutorial testuali, Web 2.0
21 Commenti
novembre 23rd, 2009

Creiamo un bellissimo contact form in jQuery e PHP
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 :D . 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 ;)

21 Commenti a: Creiamo un bellissimo contact form in jQuery e PHP

  1. Kharg

    novembre 23rd, 2009

    Dubbio: cosa è il jquery? xD
    mi piacerebbero di più dei tutorial su photoshop u.u

  2. STAFF

    novembre 23rd, 2009

    ehehe, comunque sarebbe una libreria javascript. Ti permette di fare molti effetti grafici carini con poche righe di codice :P

  3. Deli

    novembre 25th, 2009

    Potresti fare un tutorial su come creare quell’effetto javascript per le categorie, i commenti, gli archivi ecc. ?????
    Comunque molto bello questo!

  4. STAFF

    novembre 25th, 2009

    In verità non l’ho realizzato io, l’ho trovato non ricordo dove :D Comunque appena posso farò una guida su come realizzare una cosa simile..

  5. Deli

    novembre 26th, 2009

    @ STAFF:
    Grazie

  6. Artedelweb

    novembre 29th, 2009

    Grazie, lo conosciamo già, solo che ha già spopolato nella blogsfera e non volevamo pubblicare un articolo/copia ;)

  7. Kharg

    novembre 29th, 2009

    Vorrei mostrarvi un bellissimo template in jquery per i siti in construzione: http://www.ourtuts.com/free-site-under-constructi... perche non farne una news? :D

  8. lorenzo

    maggio 13th, 2010

    quando provo a inviare un messaggio si blocca su "invio in corso" e non va più avanti.
    wp 2.9.2 su tophost… zero plugin attivi. da cosa può dipendere?

  9. Artedelweb

    maggio 14th, 2010

    Non ti saprei dire. Devi controllare che siano settate correttamente le configurazioni del tuo hosting e che la funzione mail() sia stata ben eseguita!

  10. Lorenzo

    maggio 14th, 2010

    grazie per la risposta, ma è proprio questo che mi sfugge: come si fa a controllare cosa ha combinato la funzione php mail() ? esiste un log? mi sto anche chiedendo se non sia il jQuery, ma ho controllato il changelog dalla 1.3.2 alla 1.4.2 e non è cambiato nulla di quello usato…

  11. Lorenzo

    maggio 14th, 2010

    è proprio vero che a volte si spulciano le più piccole azioni ma si lasciano le travi in bella vista.
    ho risolto, se inserito in una pagina di wordpress va dichiarato l'esatto indirizzo del file mail.php, altrimenti non va. ho provato e funziona, grazie ancora e ciao! :)

  12. Artedelweb

    maggio 14th, 2010

    Eheh, infatti a volte non si riesconoa cogliere proprio gli errori più banali! :D

  13. Massimiliano

    luglio 12th, 2010

    Se nel messaggio ci sono apostrofi si blocca su invio in corso.. e non va avanti

  14. il_Colonnello

    luglio 27th, 2010

    si blocca anche se nella taxtarea vai a capo
    peccato

  15. giacomo

    agosto 9th, 2010

    Se premo il tasto a capo sulla tastiera quando scrivo il messaggio si blocca su invio messaggio e non va avanti..

  16. Supra

    agosto 10th, 2010

    da me funziona perfettamente.. grazie milleee!

  17. Danilo

    agosto 12th, 2010

    Ho lo stesso problema di Giacomo. Se nella textarea si inserisce un "a capo" (tasto invio) al submit compare il messaggio "Invio del messaggio in corso.." e si blocca. Se invece si inserisce solamente testo tutto funziona perfettamente. Qualcuno ha qualche idea del perché? Grazie per l'eventuale aiuto.

  18. Artedelweb

    agosto 17th, 2010

    Mmh, effettivamente è così! Non ne capisco il motivo però; sembra esserci un problema con la validazione del campo del messaggio. Potete aggirare il problema modificando la riga 10 da "var text = $("#messaggio").val();" a "var text = $("#messaggio");" (senza virgolette naturalmente). Unico inconveniente: l'e-mail viene inviata anche se priva di messaggio.

  19. duffimc

    agosto 30th, 2010

    salve…io ho notato che se i file .html .js e .php non sono nella stessa cartella lo script non funge.
    I miei file sono disposti cosi:

    /index.html
    /mail.php
    js/mail.js
    css/style.css

    nello script mail.js alla voce url ho inserito ../mail.php ma facendomi visualizzare un eventuale errore (.error) mi da un errore sulla chiamata appunto.
    ho provato a spostare il file nella stessa cartella dello script jquery ma sempre lo stesso.
    In fine ho spostato tutto nella root e lo script ha funzionato….mmmm
    Qualche idea per avere i file organizzati e non tutti in una cartella??
    Grazie per l'attenzione

    p.s.
    ho anche utilizzato un path assoluto per il file php ma niente…

  20. duffimc

    agosto 30th, 2010

    risolto…questione di path :p

  21. Artedelweb

    agosto 30th, 2010

    ottimo! ;)

Lascia un commento

Arrow

(Ottieni il tuo Gravatar)

Flickr

Roy Tanck's Flickr Widget requires Flash Player 9 or better.
Download here the plugin

Our Videos






Powered by wordpress statistiche accessi