Blog

modulo contatti in php,ajax e jquery

Creare un modulo contatti in php,ajax e jquery

Uno degli aspetti più importanti nel lavoro del web design è quello di dover creare un modulo contatti.
In questo tutorial vi spiego come crearne uno in php,ajax e con validazione jquery grazie al plugin jquery validation.

Innanzitutto prepariamo la parte in html creando un file chiamandolo modulo.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FREEWEBSOLUTION :: Contatti</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://bootstraptaste.com" />
<!-- css -->
<link href="style.css" rel="stylesheet" />

<!--jquery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/validate.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">
		<h2>Modulo contatti</h2>
		<form id="contactform" action="contact.php" method="post" class="validateform" name="send-contact">
			<div id="sendmessage">Messaggio inviato correttamente</div>
			<div class="row field">
				<input type="text" name="name" placeholder="*Inserisci il tuo nome" 
				data-rule="maxlen:4" data-msg="*inserisci un testo di almeno 4 caratteri" />
				<div class="validation"></div>
			</div>
			<div class="row field">
				<input type="text" name="email" placeholder="*Inserisci la tua email" 
				data-rule="email" data-msg="*inserisci un'email valida" />
				<div class="validation"></div>
			</div>
			<div class="row field">
				<input type="text" name="subject" placeholder="*Inserisci un ogetto" 
				data-rule="maxlen:4" data-msg="*inserisci un testo di almeno 4 caratteri" />
				<div class="validation"></div>
			</div>
			<div class="row text field">
				<textarea rows="12" name="message" class="input-block-level" 
				placeholder="* Inserisci il tuo messaggio qui..." 
				data-rule="required" data-msg="*Inserisci un testo"></textarea>
					<div class="validation">
					</div>
							
			</div>
			<p>
				<input type="submit"class="button" value="Invia il messaggio"/>
				<span class="pull-right margintop20">* i campi contrassegnati con l'asterisco sono obbligatori!</span>
			</p>
		</form>
	</div>
	
	
</body>
</html>

Ora analiziamo il codice anche se è di facile comprensione:
innanzitutto all’interno del tag header non dimentichiamoci di aggiungere il collegamento alla libreria jquery ed al plugin jquery validation:

<!--jquery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/validate.js"></script>

Quindi andiamo a creare il nostro form assegnandogli un identificativo ed una classe molto importanti alla fine della validazione:

		<form id="contactform" action="contact.php" method="post" class="validateform" name="send-contact">
			<div id="sendmessage">Messaggio inviato correttamente</div>
			<div class="row field">
				<input type="text" name="name" placeholder="*Inserisci il tuo nome" 
				data-rule="maxlen:4" data-msg="*inserisci un testo di almeno 4 caratteri" />
				<div class="validation"></div>
			</div>
			<div class="row field">
				<input type="text" name="email" placeholder="*Inserisci la tua email" 
				data-rule="email" data-msg="*inserisci un'email valida" />
				<div class="validation"></div>
			</div>
			<div class="row field">
				<input type="text" name="subject" placeholder="*Inserisci un ogetto" 
				data-rule="maxlen:4" data-msg="*inserisci un testo di almeno 4 caratteri" />
				<div class="validation"></div>
			</div>
			<div class="row text field">
				<textarea rows="12" name="message" class="input-block-level" 
				placeholder="* Inserisci il tuo messaggio qui..." 
				data-rule="required" data-msg="*Inserisci un testo"></textarea>
					<div class="validation">
					</div>
							
			</div>
			<p>
				<input type="submit"class="button" value="Invia il messaggio"/>
				<span class="pull-right margintop20">* i campi contrassegnati con l'asterisco sono obbligatori!</span>
			</p>
		</form>

Nota bene gli attributi data-rule e data-msg assegnati ai tag input e textarea, questi saranno poi analizzati dal nostro plugin jquery validation.

E’ giunto il momento di dare uno stile al nostro form,è chiaro che potete modificarlo secondo i vostri gusti:

/* ===================================
1. General
==================================== */

body {
	font-family:'Open Sans', Arial, sans-serif;
	font-size:14px;
	font-weight:300;
	line-height:1.6em;
	color:#656565;
}


h1,h2, h3, h4, h5, h6 {
	//font-family:'Open Sans', Arial, sans-serif;
	font-weight:700;
	line-height:1.1em;
	color:#333;
	margin-bottom: 20px;
}

/* ===================================
2. layout
==================================== */

.container {
	width: 78%;
	margin: 0 auto;
	border:1px solid #dadada;
	height: auto;
	overflow: hidden;
	background: url(images/wrapperbg.png) repeat;
	font-family: 'Shadows Into Light', cursive;
}
.container h2{
	padding-left:2.5%;
}

.row{
	float:left;
	width: 30%;
	margin:0 0 5% 2.5%;
}
.row.text{
	float:left;
	width: 95%;
	//margin:0 0 5% 2.5%;
}



/* ============================
3. Forms
============================= */

/* --- contact form  ---- */
.container form#contactform{
	font-family: 'Shadows Into Light', cursive;
}
form#contactform input[type="text"] {
  width: 100%;
  display:inline;
  border: 1px solid #f5f5f5;
  min-height: 40px;
  padding-left:20px;
  font-size:13px;
  padding-right:20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

form#contactform textarea {
border: 1px solid #f5f5f5;
  width: 100%;
  padding-left:20px;
  padding-top:10px;
  font-size:13px;
  padding-right:20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}
button.btn{
	background: color:green;
}

form#contactform .validation {
	font-size:11px;
	color:red;
	font-family:'Open Sans', Arial, sans-serif;
}
h2.mail{
	background: url(images/mail.png) no-repeat left;
	width: 120px;
	height: 135px;
	margin-bottom:-100px;
}

#sendmessage {
	border:1px solid #e6e6e6;
	background:#f6f6f6;
	display:none;
	text-align:center;
	padding:15px 12px 15px 65px;
	margin:10px 0;
	font-weight:600;
	margin-bottom:30px;

}

#sendmessage.show,.show  {
	display:block;
}
.button{
	background: #07c5e7;
	color:#fff;
	border:none;
	padding:8px;
	margin-left:2.5%;
	transition: 0.5s;
}

.button:hover{
	background-color:#078ea6;
}

Ora analiziamo il plugin jquery validation:

/*global jQuery:false */
jQuery(document).ready(function($) {
"use strict";

	//Contact
	$('form.validateform').submit(function(){

		var f = $(this).find('.field'), 
		ferror = false, 
		emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

		f.children('input').each(function(){ // run all inputs

		    var i = $(this); // current input
		    var rule = i.attr('data-rule');

		    if( rule != undefined ){
			var ierror=false; // error flag for current input
			var pos = rule.indexOf( ':', 0 );
			if( pos >= 0 ){
			    var exp = rule.substr( pos+1, rule.length );
			    rule = rule.substr(0, pos);
			}else{
			    rule = rule.substr( pos+1, rule.length );
			}
			
			switch( rule ){
			    case 'required':
				if( i.val()=='' ){ ferror=ierror=true; }
				break;

			    case 'maxlen':
				if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
				break;

			    case 'email':
				if( !emailExp.test(i.val()) ){ ferror=ierror=true; }
				break;


			    case 'checked':
				if( !i.attr('checked') ){ ferror=ierror=true; }
				break;
				
			    case 'regexp':
				exp = new RegExp(exp);
				if( !exp.test(i.val()) ){ ferror=ierror=true; }
				break;
			  }
			  i.next('.validation').html( ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
		    }
		});
		f.children('textarea').each(function(){ // run all inputs

		    var i = $(this); // current input
		    var rule = i.attr('data-rule');

		    if( rule != undefined ){
			var ierror=false; // error flag for current input
			var pos = rule.indexOf( ':', 0 );
			if( pos >= 0 ){
			    var exp = rule.substr( pos+1, rule.length );
			    rule = rule.substr(0, pos);
			}else{
			    rule = rule.substr( pos+1, rule.length );
			}
			
			switch( rule ){
			    case 'required':
				if( i.val()=='' ){ ferror=ierror=true; }
				break;

			    case 'maxlen':
				if( i.val().length<parseInt(exp) ){ ferror=ierror=true; }
				break;
			  }
			  i.next('.validation').html( ( ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '' ) ).show('blind');
		    }
		});
		if( ferror ) return false; 
			else var str = $(this).serialize();
		
			   $.ajax({
			   type: "POST",
			   url: "contact.php",
			   data: str,
			   success: function(msg){
			$("#sendmessage").addClass("show");
			$("#errormessage").ajaxComplete(function(event, request, settings){
		
			if(msg == 'OK')
			{
				$("#sendmessage").addClass("show");
				
			}
			else
			{
				$("#sendmessage").removeClass("show");
				result = msg;
			}
		
			$(this).html(result);});}});
				return false;
	});

});

Come potete notare ho effettuato una chiamata Ajax ,questo fa si che non occorre ricaricare un’altra pagina:

  $.ajax({
			   type: "POST",
			   url: "contact.php",
			   data: str,
			   success: function(msg){
			$("#sendmessage").addClass("show");
			$("#errormessage").ajaxComplete(function(event, request, settings){
		
			if(msg == 'OK')
			{
				$("#sendmessage").addClass("show");
				
			}
			else
			{
				$("#sendmessage").removeClass("show");
				result = msg;
			}
		
			$(this).html(result);});}});
				return false;

In pratica se tutto è andato a buon fine questo mi mostra un messaggio di conferma.

Non ci rimane che creare il file contact.php che ci consente di inviare l’email:

<?php

include 'config.php';

error_reporting (E_ALL ^ E_NOTICE);

$post = (!empty($_POST)) ? true : false;

if($post)
{
$ip = $_SERVER[REMOTE_ADDR];
$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);


$error = '';



if(!$error)
{
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
     "From: ".$name.' '. $ip." <".$email.">\r\n"
    ."Reply-To: ".$email."\r\n"
    ."X-Mailer: PHP/" . phpversion());


if($mail)
{
echo 'OK';
}

}


}
?>

Come avrete notato in esso è incluso un file config.php:

<?php
// To
define("WEBMASTER_EMAIL", 'tuaemail@email.it');//definiamo una costante, qui dovrai inserire la tua email
?>

Al posto di tuaemail@email.it inserite il vostro indirizzo email.
Forse è più facile da realizzare che da dire comunque spero di essermi espresso in maniera semplice, se avete problemi non esitate a contattarmi.

Visonate la demo oppurescaricatevi i file.

lucio

Chi è ?

Lucio Ticali è un Web & App developer con la passione per il web marketing,si occupa anche di tecniche di indicizzazione del sito e di promozione dello stesso (SEO e SEM).

Lascia la tua opinione