Formulaire de contact AJAX

Formulaire de contact AJAX

A la fin de ce tuto, vous serez capables de réaliser des formulaires qui fonctionnent sans rafraîchir la page, seules les données du formulaire sont envoyées au script PHP (communication avec l’objet XMLHttpRequest ou AJAX).

Ici, il est question d’un formulaire de contact, mais avec cette base, vous pouvez très bien développer un système d’ajout de commentaires, de notation etc.

A noter : Les scripts proposés ici ne traitent pas l'ensemble des contrôles de validité des champs de saisie, pas plus que de la lutte contre le SPAM. C'est une base de travail qui illustre le principe de communication entre une page HTML et un script serveur PHP.

Prérequis

Disposer d’un serveur web avec PHP, en ligne, ou en local avec une solution comme WAMP, XAMPP ou MAMP (liens à la fin du tuto)
avoir déjà écrit un script PHP est conseillé.
avoir déjà utilisé jQuery un plus.

Le formulaire HTML

Le formulaire est des plus basiques, il comporte :

- 3 champs de saisie.
- un champ pour afficher des infos sur l’opération
- un bouton pour envoyer le message

On met en forme a minima avec un peu de CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mediabox - formulaire jQuery + PHP</title>

    <link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
    <div id="content"> 
        <form action="#">
            <h3>Contact</h3>
            <input type="text" id="nom" name="nom" placeholder="Nom">
            <br>
            <input type="text" id="mail" name="mail" placeholder="Mail">		
            <br>
            <textarea name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
            <p id="statut"></p>
            <button>Envoyer</button>
        </form>
    </div>
</body>
</html>

Le fichier style.css

html, body{
    margin      : 0 ;
    font-family : Lucida Grande, Tahoma, Arial, sans-serif ;
    font-size   : 14px ;
}

#content {
    width   : 600px ;
    margin  : 20px auto 0 auto ;
}

input{
    width : 255px ;
}

input, textarea {
    border          : 1px solid #bbb ;
    border-radius   : 6px ;
    font-size       : 14px ;
    padding         : 3px 6px 3px 6px ;
    box-shadow      : inset 0 1px 1px #DDD;
}

Script PHP d'envoi de mail

Pour l’envoi du mail, nous allons utiliser une librairie PHP qui va nous faciliter la vie : XPM 4 (pour XPert Mailer 4)

On récupère donc la librairie (url en fin de tuto) et on l'appelle dans notre page avec require_once( ) ;

Il faut renseigner les variables au début du script pour permettre l'envoi des mails : à renseigner

<?php
/**
* script d'envoi d'un mail avec la librairie XPM4
*
* vous devez renseigner vos identifiants de messagerie pour envoyer les mails
*
*/


require_once("XPM4-v.0.5/SMTP.php") ;


// destinataire du mail
$to = "adresse@provider.fr" ; // à renseigner : adresse mail où sera envoyé le message, exemple destinataire@yahoo.com

// paramétrage pour envoi des mails
$smtpProvider = "smtp.provider.com" ; // à renseigner : le smtp de votre provider, exemple : smtp.gmail.com

$u = "user@provider.com" ; // à renseigner : user de votre compte de messagerie, exemple test@gmail.com
$p = "password" ; // à renseigner : mot de passe de votre compte de messagerie


// sujet du mail
$subject = "tuto mediabox" ;

// mode debug = true pour tester le script en l'appelant directement dans un navigateur
$debug = false ;

if( $debug ){
	$_POST['nom']     = "debugmode" ;
	$_POST['mail']    = "debugmode@test.fr" ;
	$_POST['message'] = "debugmode - Un simple test pour voir." ;
}



// tableau retourné au script JS
$arReturn = array() ;

// test si présence des données
if( !isset($_POST['nom']) || !isset($_POST['mail']) || !isset($_POST['message']) )
{
	$arReturn['error'] = "Toutes les données ne sont pas renseignées" ;
}
else
{
    // contenu du message
    $message = "Nouveau message de " . $_POST['nom'] . ", (". $_POST['mail'] .")" ;
    $message .= "\r\n\r\n" . $_POST['message'] ;
    
    // envoi du message
    $c = SMTP::connect( $smtpProvider, 465, $u, $p, 'tls', 10) ;
    
    $m = "From: ".$u."\r\n".
        "To: ".$to."\r\n".
        "Subject: ".$subject."\r\n".
        "Content-Type: text/plain\r\n\r\n".$message ;
    
    if( ! SMTP::send($c, array($to), $m, $u) ){
        $arReturn['error'] = "Echec de l'envoi du mail :(" ;
    }else{
        $arReturn['result'] = "Mail envoyé !" ;
		$arReturn['data'] = array(  "nom"     => $_POST['nom'], 
                                    "mail"    => $_POST['mail'], 
                                    "message" => $message ) ;
    }
}

// on retourne au javascript le résultat de l'envoi du mail
echo json_encode($arReturn) ;

?>

Pour tester le script seul, on dispose en début de script d’une variable debug qui permet de forcer la valeur des données normalement envoyées par le javascript.

On passe donc dans un premier temps cette variable à true et on affiche le script dans un navigateur pour voir si le mail est bien envoyé.

Le mail est bien envoyé avec les variables de debug, on passe debug à false pour la suite

Script javascript d'envoi des données au PHP

Pour envoyer les données sans rafraîchir la page, nous allons utiliser l’objet XMLHttpRequest (dont on doit la création à Microsoft)

L’implémentation de cet objet peut différer d’un navigateur à l’autre c’est pourquoi, pour nous simplifier la tache, nous allons utiliser la librairie jQuery qui se charge de faire fonctionner un même code sur tous les navigateurs.

Après avoir récupéré la dernière version du script jQuery (lien en fin de tuto), on l’appelle dans la balise HEAD de notre page HTML. On crée également un script main.js qui contiendra notre code et on appelle ce script, ce qui donne :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>mediabox - formulaire jQuery + PHP</title>

    <link rel="stylesheet" href="style.css" media="screen">

    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>

vérification que tout est prêt

Avant de coder l’envoi des données du formulaire, nous allons nous assurer que jQuery est bien disponible.

Pour cela, nous affichons la console javascript du navigateur et y affichons un message lorsque le DOM est disponible. Ce code est saisi dans le script main.js

jQuery(document).ready(function(){
    console.log(“dom ready”);
});

sous IE8, utiliser console.log() génère une erreur javascript, pour ne pas avoir de soucis, vous pouvez utiliser cette fonction

function trace( msg ){
    try{
        console.log( msg );
    }catch(e){
        // on ne fait rien
    }
};

Ce qui donne donc pour notre exemple

jQuery(document).ready(function(){
    trace(“dom ready”);
});

Lorsqu’on rafraîchi la page, on doit alors voir notre message apparaître dans la console.

le script main.js d'envoi des données

Voici le script complet

jQuery(document).ready( function($){
    console.log("dom ready") ;
    
    // référence à des éléments du DOM (commencent par $ pour être identifiables facilement)
    var $form   = $("form");
    var $statut = $("form #statut");
    
    // écouteur sur la soumission du formulaire
    $form.on("submit", function(e){
        // récupération des éléments du formulaire    
        var formData = getFormData();
        
        // si ok, on appelle le script PHP d'envoi du mail
        if( formData !== false )
        {
            $statut.html("envoi en cours ...") ;
            
            $.ajax({
                url     : "send_mail.php",
                type    : "POST",
                data    : formData,
                success : function(data)
                {
                    var result = $.parseJSON( data );
                    if( !result.error ){
                        $statut.html("message envoyé !") ;
                        clearForm() ;
                    }else{
                        $statut.html(result.error) ;
                    }
                },
                error   : function(data)
                {
                    $statut.html(data) ;
                }
            }) ;
        }
        else
        {
            $statut.html("Erreur : il manque des données ou le mail est incorrect") ;
        }
        
        // on retourne false pour bloquer le comportement par défaut du formulaire HTML 
        return false ;
    }) ;


    /** 
    * controle et retourne les elements du formulaire
    *
    * @return Object si ok, false sinon
    *
    */
    function getFormData(){
        var nom     = $form.find("#nom").val() ;
        var mail    = $form.find("#mail").val() ;
        var message = $form.find("#message").val() ;
        
        var returnData = false ;
        
        if( nom && mail && message ){
            if( checkMail(mail) ){
                returnData = { nom : nom, mail : mail, message : message };  
            }
        }
        
        return returnData;
    };
    
    /**
    * remet le form à vide
    */
    function clearForm(){
        $form.find("input, textarea").val('') ;
    };
    
    /**
    * contrôle la validité de l'adresse mail
    */
    function checkMail( mail ){
		var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
        var valide = false ;
		if(reg.test(mail))
		{
			valide = true;
		}
        return valide;
	};
    
}) ;

L'envoi des données est réalisé par la méthode ajax de l'objet jQuery. Cette méthode prend en paramètre un objet.

- “data” contient les données du formulaire
- “success” contient une fonction qui sera appelée si le script est appelé sans erreur, ça ne veut pas dire que l'envoi du mail à fonctionné, juste que l'appel du script PHP a pu se faire.
- “error” : contient une fonction appelée si l'appel du script PHP échoue

Dans la fonction success, on teste la présence dans les données retournées par PHP de l'attribut error qui indiquerait que l'envoi du mail a échoué : if( !result.error ){ … }

$.ajax({
    url     : "send_mail.php",
    type    : "POST",
    data    : formData,
    success : function(data)
    {
        var result = $.parseJSON( data );
        if( !result.error ){
            $statut.html("message envoyé !") ;
            clearForm() ;
        }else{
            $statut.html(result.error) ;
        }
     },
     error   : function(data)
     {
        $statut.html(data) ;
     }
}) ;