Comment créer un formulaire de contact gratuit en PHP/Ajax/Jquery (Tutorial)




Partager sur Google Plus
Partager sur Twitter
Partager sur Facebook
Partager sur Pinterest

 

Comment créer un formulaire de contact gratuit en PHP/Ajax/Jquery (Tutorial)

 

Ce petit Tutorial vous explique comment utiliser les langages XHTML, CSS, jQuery et un peu de PHP pour faire un formulaire de contact de type « pop up » qui recouvrira votre page lorsque vous cliquerez sur un lien hypertext. Le formulaire valide tout ce qui est entré dans le formulaire, ensuite Ajax se charge d’envoyer le formulaire sans rafraichir la page.

 





Partage sur les réseaux sociaux



Commentaires (9)

Trackback URL | Fil RSS des commentaires

  1. funpro funpro dit :

    une erreur dans le code : Invalid username entered!

  2. romain dit :

    Bonjour d’abord Merci !

    Mais bon j’ai passé 4 heures à essayer de débugger le problème de : Invalid username entered!

    Et je n’ai pas réussi donc si tu as une soluce !! Plz Give !!!

  3. romain dit :

    Bon javascript corrigé par un ami par contre pour la partie transfert entre le javascript et le php! Mystère !!!
    Je ne reçois jamais le mail !!
    le .js corrigé :

    $(function() {

    // load the modal window
    $(‘a.modal’).click(function(){

    // scroll to top
    $(‘html, body’).animate({scrollTop:0}, ‘fast’);

    // before showing the modal window, reset the form incase of previous use.
    $(‘.success, .error’).hide();
    $(‘form#contactForm’).show();

    // Reset all the default values in the form fields
    $(‘#name’).val(‘Votre nom et prénom’);
    $(‘#email’).val(‘Votre adresse mail’);
    $(‘#comment’).val(‘Votre demande/message…’);
    $(‘#ville’).val(‘Votre ville’);
    $(‘#telephone’).val(‘Votre numéro’);

    //show the mask and contact divs
    $(‘#mask’).show().fadeTo( », 0.7);
    $(‘div#contact’).fadeIn();

    // stop the modal link from doing its default action
    return false;
    });

    // close the modal window is close div or mask div are clicked.
    $(‘div#close, div#mask’).click(function() {
    $(‘div#contact, div#mask’).stop().fadeOut(‘slow’);

    });

    $(‘#contactForm input’).focus(function() {
    // $(this).val(‘ ‘); <– celui là, il était traitre !
    $(this).val('');
    });

    $('#contactForm textarea').focus(function() {
    $(this).val('');
    });

    // when the Submit button is clicked…
    $('input#submit').click(function() {
    $('.error').hide().remove();

    //Inputed Strings

    var username = $('#name').val();
    var email = $('#email').val();
    var ville = $('#ville').val();
    var telephone = $('#telephone').val();
    var comment = $('#comment').val();

    //Error Count
    // var error_count;
    var error_count = 0;

    //Regex Strings
    // var username_regex = /^[a-z0-9_-]{3,16}$/, //Original
    var username_regex = new RegExp('^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$','i'); // une erreur ici : la ligne était finie par une virgule, au lieu d'un point virgule… J'ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom & Prénom, 16 caractères, ça peut être trop court…
    // email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original
    var email_regex = new RegExp('^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$', 'i'); //Original

    //Test Username
    if(!username_regex.test(username)) {
    $('#contact_header').after('Nom invalide !’ + username);
    error_count += 1;
    }

    //Test Email
    if(!email_regex.test(email)) {
    $(‘#contact_header’).after(‘Erreur de mail !’ + email);
    error_count += 1;
    }

    //Blank Comment?
    if(comment ==  ») {
    $(‘#contact_header’).after(‘Aucun commentaire écris !’);
    error_count += 1;
    }

    //No Errors?
    if(error_count === 0) {
    $.ajax({
    type: « post »,
    url: « send.php »,
    // data: « $name= » + name + « &email= » + email + « $ville » + ville + « $telephone » + telephone + « &comment= » + comment, //ORIGINAL
    data: « name= » + name + « &email= » + email + « &ville= » + ville + « &telephone= » + telephone + « &comment= » + comment,
    error: function(return_val) {
    //DEVMODE alert(‘error : ‘+return_val);
    $(‘.error’).hide();
    $(‘#sendError’).slideDown(‘slow’);
    },
    success: function (return_val) {
    //DEVMODE alert(‘success : ‘+return_val);
    $(‘.error’).hide();
    $(‘.success’).slideDown(‘slow’);
    $(‘form#contactForm’).fadeOut(‘slow’);
    }

    });
    }

    else {
    $(‘.error’).show();
    }

    return false;
    });

    });

  4. romain dit :

    Plz de l’aide !!!

  5. romain dit :

    je reviens sur les modifs :

    php corrigé :

    <?php
    header("Content-Type: text/plain; charset=UTF-8");//

  6. romain dit :

    et javascript corrigé :

    $(function() {

    // load the modal window
    $(‘a.modal’).click(function(){

    // scroll to top
    $(‘html, body’).animate({scrollTop:0}, ‘fast’);

    // before showing the modal window, reset the form incase of previous use.
    $(‘.success, .error’).hide();
    $(‘form#contactForm’).show();

    // Reset all the default values in the form fields
    $(‘#name’).val(‘Votre nom et prénom’);
    $(‘#email’).val(‘Votre adresse mail’);
    $(‘#comment’).val(‘Votre demande/message…’);
    $(‘#ville’).val(‘Votre ville’);
    $(‘#telephone’).val(‘Votre numéro’);

    //show the mask and contact divs
    $(‘#mask’).show().fadeTo( », 0.7);
    $(‘div#contact’).fadeIn();

    // stop the modal link from doing its default action
    return false;
    });

    // close the modal window is close div or mask div are clicked.
    $(‘div#close, div#mask’).click(function() {
    $(‘div#contact, div#mask’).stop().fadeOut(‘slow’);

    });

    $(‘#contactForm input’).focus(function() {
    // $(this).val(‘ ‘); <– celui là, il était traitre !
    $(this).val('');
    });

    $('#contactForm textarea').focus(function() {
    $(this).val('');
    });

    // when the Submit button is clicked…
    $('input#submit').click(function() {
    $('.error').hide().remove();

    //Inputed Strings

    var username = $('#name').val();
    var email = $('#email').val();
    var ville = $('#ville').val();
    var telephone = $('#telephone').val();
    var comment = $('#comment').val();

    //Error Count
    // var error_count;
    var error_count = 0;

    //Regex Strings
    // var username_regex = /^[a-z0-9_-]{3,16}$/, //Original
    var username_regex = new RegExp('^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$','i'); // une erreur ici : la ligne était finie par une virgule, au lieu d'un point virgule… J'ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom & Prénom, 16 caractères, ça peut être trop court…
    // email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original
    var email_regex = new RegExp('^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$', 'i'); //Original

    //Test Username
    if(!username_regex.test(username)) {
    $('#contact_header').after('Nom invalide !’);
    error_count += 1;
    }

    //Test Email
    if(!email_regex.test(email)) {
    $(‘#contact_header’).after(‘Erreur de mail !’);
    error_count += 1;
    }

    //Blank Comment?
    if(comment ==  ») {
    $(‘#contact_header’).after(‘Aucun commentaire écris !’);
    error_count += 1;
    }

    //No Errors?
    if(error_count === 0) {
    $.ajax({
    type: « post »,
    url: « send.php »,
    // data: « $name= » + name + « &email= » + email + « $ville » + ville + « $telephone » + telephone + « &comment= » + comment, //ORIGINAL
    data: « name= » + username + « &email= » + email + « &ville= » + ville + « &telephone= » + telephone + « &comment= » + comment,
    error: function(return_val) { // Si l’envoi au script PHP foire : return_val = le contenu d’une page introuvable, ex : 404 etc. (ça dépendra de la config du serveur)
    //DEVMODE alert(‘error : ‘+return_val);
    // $(‘.error’).hide();
    $(‘#contact_header’).after(« Module d’envoi introuvable. »);
    $(‘.error’).show();
    $(‘#sendError’).slideDown(‘slow’);
    },
    success: function (return_val) { // return_val = sent | empty | trigger_error de la fonction mail()
    //DEVMODE alert(‘success : ‘+return_val);
    if(return_val == ‘sent’){
    $(‘.error’).hide();
    $(‘.success’).slideDown(‘slow’);
    $(‘form#contactForm’).fadeOut(‘slow’);
    }else if(return_val == ’empty’){ //L’un des champs, traité par PHP est NULL, l’envoi a donc été validé par JS, mais bloqué par PHP
    $(‘#contact_header’).after(« Le formulaire est incomplet. »);
    $(‘.error’).show();
    $(‘#sendError’).slideDown(‘slow’);
    }
    else{ // La fonction mail() de PHP a retourné une erreur.
    $(‘#contact_header’).after(« Le site est actuellement dans l’impossibilité technique d’envoyer des messages. »); // Version officielle
    // $(‘#contact_header’).after(«  »+return_val+ » »); // Version DEVMODE (déboggage)
    $(‘.error’).show();
    $(‘#sendError’).slideDown(‘slow’);
    }
    }

    });
    }

    else {
    $(‘.error’).show();
    }

    return false;
    });

    });

  7. romain dit :

    Php corrigé pardon ^^ :
    <?php
    header("Content-Type: text/plain; charset=UTF-8");//

  8. romain dit :

    bon ben veux pas de php !!!

  9. Yoann dit :

    Salut Romain, désolé que le script ne fonctionne pas, je tâcherai d’en trouver un meilleur pour remplacer celui-ci

Laisser un commentaire




Si vous voulez une photo pour illustrer votre commentaire, rendez vous sur Gravatar.