Creare un modulo contatti in php,css3 ed ajax

Posted on by lucio
Category: ajax, blog, css3, guide, php
27.324 views Tempo di lettura: 5 minuti

In questo tutorial vi spiego passo passo come  realizzare un form, nello specifico un modulo contatti, in Php,Ajax e con validazione html5 in maniera semplicissima.

demo  codice

Modulo contatti in html

Innanzitutto andremo a creare il form inserendo il seguente codice nella nostra paginetta html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FREEWEBSOLUTION :: Modulo Contatti php,css3 ed ajax</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://www.freewebsolution.it" />
<!-- css -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.css" media="screen">
<link rel="stylesheet" href="assets/font/css/font-awesome.min.css" media="screen">
<link href="style.css" rel="stylesheet" media="screen" />

<!--jquery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!--google font-->
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
<div class="container">
	<div class="text-center"><h1>Modulo contatti realizzato in php, css3 e ajax</h1></div>
	<div class="row modulo-contatti">
		<form id="contact-form" action="" name="contact-form" method="post">
			<div id="responde"></div>
			<p class="contact-form-fields input col-sm-5 col-sm-offset-1">
				<input id="nome" name="nome" placeholder="Enter name" required="required" type="text"></br>
				<input id="email" name="email" placeholder="Enter email" required="required" type="email"></br>
				<input type="tel" id="tel" name="tel" placeholder="your phone" required="required" pattern="^[0-9]{2,4}[0-9]{4,10}"></br>				
				<input id="oggetto" name="oggetto" placeholder="subject" required="required" type="text">	
			</p>
			<p class="contact-form-fields textarea col-sm-5">
				<textarea id="message" name="message" cols="33" rows="5" aria-invalid="false" placeholder="Message"></textarea>	
			</p>
			<p class="text-muted check contact-form-fields input col-sm-5 col-sm-offset-1" style="margin-top:-23px;">
				<input type="checkbox" name="privacy" id="privacy" value="1" required="required" onclick="ControlloSubmit()">
				Autorizzo ai sensi della <a href="http://www.freewebsolution.it/privacy/" target="_blank" title="leggi la nostra informativa" class="informativa_link"> legge 675/96 </a>il trattamento dei dati personali trasmessi. 
			</p>
			<p class="contact-form-fields input col-sm-4 col-sm-offset-1" style="margin-top:-20px;">
				<button type="submit" class="btn btn-skin pull-right" id="button" name="invia"><span class="load"><i class="fa fa-refresh fa-spin"></i></span> Send Message</button>
			</p>
		</form>
	</div>
</div>
</body>
</html>

Come potete notare nei miei progetti utilizzo il framework bootstrap il quale rende il sito responsive. Per quanto riguarda la validazione, l’HTML5 prevede l’attributo ‘required’ il quale convalida i campi senza la necessità che questo venga eseguito con l’ausilio di alcun plugin jquery. Inoltre è compatibile anche con i dispositivi mobile.

Stile css3

Ora aggiungiamo un pizzico di stile con i css3:

div.modulo-contatti{
	border:1px solid #dadada;
	background:#fafafa;
	margin-top:40px;
}
p.contact-form-fields input[type="text"],p.contact-form-fields input[type="email"] {
    border: 1px solid #ddd;
    height: 40px;
    padding: 9px 10px;
    line-height: 30px;
    color: inherit;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
	width:100%;
	margin:12px 0;
}

p.contact-form-fields textarea {
    border: 1px solid #ddd;
    padding: 9px 10px;
    line-height: 30px;
    color: inherit;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
	margin:12px 0;
	width:100%;
}

p.contact-form-fields input[type=text]:focus{
	border:1px solid rgb(255, 182, 6) !important;
}
/*placeholder style*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

input:focus::-webkit-input-placeholder { /* WebKit browsers */
    color:    transparent;
}
input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    transparent;
}
input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    transparent;
}
input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:   transparent;
}

textarea:focus::-webkit-input-placeholder { /* WebKit browsers */
    color:    transparent;
}
textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    transparent;
}
textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    transparent;
}
textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:   transparent;
}
p.contact-form-fields{
	margin-bottom:20px;
	text-align:left;
}

button[type="submit"] {
	outline:0;
    text-transform: uppercase;
    font-size: 13px;
    height: 50px;
    border: none;
    padding: 10px 25px;
    font-weight: 700;
    line-height: 30px;
    color: #333333;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

}
button[type="submit"] {
	background: #ffb606;
}

button[type="submit"]:hover {
	background: #e3a102;

}

button[type="submit"]:focus{border:0;}
.load{
	display:none;
	color:#fff;
	font-size:14px;
}
#responde p.success{
	color:green !important;
	text-align:center;
}
p.check{
	font-size:12px;
}

p.check a{
	color:#222;
	font-weight:bold;
}

form input:focus,form textarea:focus{
	border:1px solid rgb(255, 182, 6) !important;
}

Il tutto è fatto in maniera molto soft voi sentitevi liberi di stilizzarlo come meglio si addice nei vostri progetti.

Come potete notare ho fatto in modo che il focus dell’attributo ‘placeholder’ ne nasconda il testo.

Ajax

E’ arrivato il momento di aggiungere Ajax al nostro modulo conatti:

/*FORM CONTATTI*/
$(document).ready(function() {
  
  $("#button").click(function(){
    var nome = $("#nome").val();
    var email = $("#email").val();
    var oggetto = $("#oggetto").val();
    var message = $("#message").val();
    var privacy = $("#privacy");
    var datastring ='nome=' + nome + '&amp;email=' + email + '&amp;oggetto=' + oggetto +'&amp;message=' + encodeURIComponent(message)+'&amp;privacy=' + privacy;
    
    if(nome.length&lt;1){
    	valid += '&lt;p class="alert"&gt;*Name is required';
    }
    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {

		valid += '&lt;p class="alert"&gt;*Please enter a valid e-mail address';

	}
	
	if(message.length&lt;1){
    	valid += '&lt;p class="alert"&gt;*Name is required';
    }
    

	if ((privacy).is(":not(:checked)")){ 
		valid += '&lt;p class="alert"&gt;*Please enter a valid e-mail address';
		
	}

	$(".load").fadeIn("slow");
		
	$.ajax({	

		type: "POST",

		url: "mail.php",

		data: datastring,

		cache: false,
		
		success: function(html){
		
		$("#responde").fadeIn("slow");
		
		$("#responde").html("&lt;p class='success'&gt;&lt;i class='fa fa-check'&gt;&lt;/i&gt; Message sent successfully!&lt;/p&gt;");

		//$("#risposta").css("background-color","#40f732");

		setTimeout('$("#responde").fadeOut("slow")',2500);
		
		setTimeout('$(".load").fadeOut("slow")');
		
		$('#contact-form')[0].reset();
			
		}

	});
	
    return false;
  });
});

Quindo se tutti i dati passati al controllo sono ok il tutto si invia al nostro file php il quale provvederà ad inviarci l’email.

Notate l’aggiunta nello script di:’$(‘#contact-form’)[0].reset();‘ questo serve a resettare tutti i campi dopo l’invio.

Php

Eccoci arrivati alla fine:

<?php
//Recuperiamo tutte le variabili
    $mail = $_POST['email'];
    $name = $_POST['nome'];
	$tel= $_POST['tel'];
    $subject = $_POST['oggetto'];
    $text = $_POST['message'];
    $ip = $_SERVER['REMOTE_ADDR'];
	if(isset($_POST['privacy'])){
		$privacy="Ho letto ed accetto l'informativa sulla privacy";
	}

//Qui andrà inserito il tuo indirizzo e-mail
$to = "info@tuaemail.it";

//Creazione del mesaggio da inviare
$message = "Hai ricevuto una e-mail da:<br/><br/><b>Nome:</b> ".$name."<br/><br/><b>Email:</b> ".$mail." <br/><br/><b>Telefono:</b> ".$tel."<br/><br/><b>Privacy:</b> ".$privacy."
";
$message .= "<p><b>Messaggio:</b>
".$text."

";
$message .= "<p>IP: ".$ip."
";
$headers = "From: $mail \n";
$headers .= "Reply-To: $mail \n";
$headers .= "MIME-Version: 1.0 \n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1 \n";

//Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio
 if(mail($to, $subject,$message,$headers)){
    echo "

Messaggio inviato con successo

";
}
//Altrimenti un messaggio di errore
else{
    echo "

<span style='color:red'>Ci sono stati degli errori nell'invio del messaggio.</span>

";
}

?>

Ecco realizzato il modulo contatti con validazione html5, spero vi sia utile.

demo  codice
Ciao ed alla prossima.