Créer un formulaire de contact en AJAX sans plugin

43 Commentaires

1. Super, Merci Jonathan !
   On utilise souvent une extension de type “Formidable” ou encore “Gravity Form” pour créer un simple formulaire Ajax, mais il y a tellement plus simple !

2. Excellent tuto, c’est long mais on apprends des choses.
   J’ai appris pour le coup du “busy”, excellent. Et wp_send_json() je ne l’avais pas encore utilisée depuis la sortie de 3.5

   Bravo pour ce temps passé à nous faire cette vidéo.

   Cela dit, j’ai 2 points à préciser (oui le mec toujours là pour rajouter un truc, c’est moi) :
   Au niveau du filtre “text/html”, il ne faut pas oublier de le supprimer APRES l’envoie du mail. EN fait, la page du codex filmée en vidéo a été modifiée depuis et on y explique le pourquoi de cette suppression à faire.
   En gros, tous les mails ne doivent pas partir au format HTML sinon WordPress l’aurait mis de base partout tout le temps.
   Personnellement j’ajoute plutôt ça dans le tableau des headers :

   $headers[] = "Content-Type: text/html; charset=UTF-8";
   

   Puis pour l’adresse email de réception j’aurais mis :

   get_option( 'admin_email' ); 
   

   qui est l’adresse email de contact de l’admin du site. Pourquoi ? Si un jour cette adresse doit changer, vous n’aurez pas à maintenir le script, d’ailleurs vous l’aurez oublié … ;) Et 2ème raison, ça ne change rien niveau perf, 0 requête, utilisons l’existant ! :)

   Merci encore et à bientôt !

3. Génial, une vraie mini-formation. Merci !
   En revanche rien compris au “pourra être frustré de ne pas avoir le contrôle total sur la soumission du formulaire, que ce soit côté JavaScript ou PHP”

   • @TweetPress : Quand tu utilises un plugin de formulaire de contact, tu ne peux pas agir sur la soumission, que ce soit en PHP ou en JS. C’est le plugin qui gère le traitement et toi tu ne peux pas faire grand chose (en général).

4. Autre chose : j’aurais plutôt mis un is_page_template() un peu plus souple que le is_page() non ? vu que tu utilises un template dans ta démo.

5. Super tuto et beau travail !

   Juste une question sur la variable ‘busy’ qui empêche l’envoi en mode ‘forcenné’ côté client… vu que c’est coté client justement, si je m’amuse à retirer sur un site le JS qui fait ça, est-ce que le nonce prend le relai côté serveur pour empêcher l’envoi de masse ?

   Encore merci pour cette démonstration et sa qualité ;)

   Ps: un pb de retour sur le form des commentaires du blog non ? :)

6. @TweetPress : Pourquoi is_page_template() serait plus souple ? On est dans la configuration d’une page, du coup le is_page() me semble plus évident.

   @R-Geek : Si le JS est retiré, il ne se passera rien puisqu’on a pas mis en place de traitement PHP pour le formulaire ^^

   Sinon, je n’ai pas bien compris le problème par rapport au plugin :/

7. C’est tout de même mieux de rester libre avec ses slugs. S’il me prend l’envie de changer le slug de la page pour des raisons SEO ou autres tout saute.

8. @TweetPress : Dans la logique, on n’est pas censé modifier le slug après la mise en ligne d’un article (redirection 301 et tout le tralala).

   Après, on adapte le code en fonction de ses besoins et de ses habitudes :)

9. J’ai oublié de répondre à Julio ^^

   je n’avais pas pensé à modifier le filtre html directement dans la variable $headers. Je pense que je ferai directement avec cela les prochaines fois plutôt que d’utiliser le filtre pour la raison que tu as évoqué.

   Merci pour tes précisions sur le sujet ;)

10. Ok mais je voulais dire je retire/trafic juste le bout de code JS (celui qui tourne autour de la variable busy) qui empêche le formulaire d’être soumis plusieurs fois si j’ai bien compris, mais en laissant la partie “submit” donc… la protection JS est plutôt minime non ? on peut donc balancer assez ‘facilement’ 10000 formulaires no ?

    D’où ma question sur le nonce – tu me diras je peux essayer :D
    (et désolé si je comprends rien :D)

    PS : j’ai évoqué un pb sur le form des commentaires du blog car j’ai eu une page blanche après soumission (et encore une fois là…)

11. @R-Geek : Je ne comprend pas très bien la question. Si on laisse le système avec la variable busy, on ne pourra pas balancer 10000 formulaires puisqu’il y aura que la dernière requête AJAX d’exécutée.

    Après si vous l’enlever, c’est votre problème =D

    (Pour le page blanche sur les formulaires, c’est un souci de cache du site ^^).

12. Coucou,

    J’ai décidé de me mettre à AJAX et ta formation me fait donc sauter le pas. Déjà merci parce que c’est clair et tu prends le temps de récapituler tout.

    Juste pour signaler que TEMPLATEPATH est deprecated donc utiliser peut-être un get_template_directory() à la place (source : boiteaweb), je pense à ton include pour la mise en forme du mail.

    Pour ma part Firebug continue de me dire que ajaxurl n’est pas défini. Capte pas pourquoi mais bon…

    En tout cas aujourd’hui j’ai pris le temps de regarder intégralement la vidéo et je n’ai pas perdu mon temps. Appris plein de trucs. :)

13. @julien : Merci pour ton retour, ça fait me plaisir de savoir que les tutos vous permettent d’apprendre des nouvelles choses :)

14. Peut-être que undefined parce que mal définie, merci la faute de frappe…. ça roule maintenant :)

15. Je souhaite me servir d’un formulaire fonctionnant avec des custom post types. Du coup, je cherche un moyen pour changer l’adresse mail du destinataire en fonction de mes post types. Y’a moyen de faire ça ? Je bloque un peu là :(

16. @Exootia : Vous êtes dans un développement spécifique, cela va être compliqué de vous aider ;)

17. Héhé, ouais s’pas faux ! Jvais continuer à chercher ;-)

18. Super, Merci Jonathan !

19. Merci pour ce tutoriel, je débute en ajax, et ce tuto m’a bien aidé.
    Il est très bien expliqué et complet.

20. Bonjour,
    Merci pour ce précieux tutoriel. C’est un peu long ;) mais vraiment bien détaillé pour bien maitriser les choses. C’est intéressant de ne pas préférer le recours à des plugins à chaque fois qu’on en a besoin et d’essayer de se débrouiller avec la programmation tant qu’on est capable de le faire.

21. Bonjour,

    Merci pour ce tuto, vraiment sympa pour tous ceux voulant programmer !
    Contact Form 7 est pas mal, mais dommage qu’il ne gère pas l’HTML5… (à moins que j’ai raté un épisode ^^’)

22. @Romain: En effet, vous avez loupé un épisode, Contact Form 7 intègre les champs HTML5.

23. merci pour ce tuto! c’est vraiment sypma

24. Merci beaucoup pour ce tuto très intéréssant, mais j’ai un soucis avec le check_ajax_referer en faite il me fait planter ma validation du formulaire et je ne sais pas pourquoi, si tu as une idée je suis tout ouie

    En tout cas merci beaucoup =)

25. Merci pour beaucoup pour ce tutoriel vraiment très sympa ! Vos explications m’ont beaucoup aidés à créer un formulaire de contact 100% en ajax sans utiliser de plugin externe. C’est vrai que c’est toujours utile de savoir créer son propre plugin, surtout vu les failles de sécurité des plus gros plugins. Merci !

26. Bonjour et bravo pour les tutos (très pédagogique),

    J’ai vu et revu de nombreuses fois ce tuto et je l’ai appliqué tant en local que sur un site en production et j’ai toujours le même problème.
    J’obtiens invariablement une réponse “0” à la requête AJAX.
    Pourtant, j’ai fait mot pour mot, en local, les scripts que vous avez fait. Je ne comprends pas où est mon pb.

    Les données sont bien envoyées. un print_r($_REQUEST[‘monChamp’]) me revoie : valeurDeMonChamp0 je ne comprends pas.

    JE suis sous WP 3.6

    Si vous avez une idée ? Peut-être une conf du fichier admin-ajax

27. @AjaxBloque: Si vous obtenez un 0, c’est que vous n’entrez pas dans la requête AJAX. Je ne peux pas plus vous aider que ça :/

28. Bonjour,

    Bravo et merci pour ce tuto !

    Une question néanmoins.

    J’essaye d’intégrer un formulaire de contact dans un site one page full ajax.
    Y a-t-il par conséquent des modifications supplémentaires à prévoir pour que le formulaire fonctionne car pour l’instant rien ne se passe.
    Par exemple, le message d’alerte (ok) n’apparait pas (test présence ‘#send-message’ 14min30), les couleurs de bordures ne changent pas (ni vert ni rouge) …

    Je précise que j’ai récupéré les fichiers utilisés pour ce tuto et que les liens vers les scripts sont corrects.

29. @ Aidansong: Ce script n’a pas été testé dans un environnement full AJAX, donc je ne vais pas pouvoir vous en dire plus.

30. Ah ok, merci de votre réponse.

    J’ai récupéré un plug-in sur le site de wordpress, j’en avais assez de me prendre la tête :-)

31. Bonjour,
    merci pour cette video qui m’a permis de ne pas passer par contactform7, et par la même occasion d’apprendre à utiliser ajax sur wordpress.
    petit question au niveau de l’effet noty.
    quand on re valide le formulaire suite à une erreur j’ai mes messages erreur et ma class qui reste en html et se superpose à mon message de réussite pendant quelques msec.
    J’ai rajouté ça ?

    $('#send-contact-part').click( function() {
        $('#noty-part').removeAttr('class');
        $('#noty-part').html('');
    });
    

32. Hé bien…. merci !

    Je cherchais de quoi faire un petit formulaire dans un coin de mon site avec des animation et en ajax sans utiliser de plugin….c’était exactement ce qu’il me fallait.

    Quelques heures à suivre le tuto et mon formulaire fonctionne.

    Merci beaucoup, le rythme du tuto est bien agréable !

33. Merci pour votre article. J’avoue être tombé par hasard sur votre site et je trouve que le contenu est réellement bien rédigé. J’utilisais Contact form 7 mais maintenant (avec un peu de pratique) j’arrive à implémenter votre formulaire. C’est super. Encore merci pour cette astuce.

34. Bien le bonjour
    Je viens de découvrir Geekpress pour mon grand bonheur.
    Par avance excusez-moi de ma méconnaissance en matière de programmation je suis en pleine apprentissage.
    Entre autre, concernant les formulaires et comme objectif de ma formation, je dois utiliser MYSQL
    Je voudrai envoyé les données du formulaire sur une base de données et non sur mon adresse mail pour pouvoir les récupérer dans un fichier PHP et par ensuite les traiter.
    Question bête si je mets mon fichier traitementformulaire.php dans <form action="", que dois-je modifier dans vos fichiers sources que je viens de télécharger ?
    Merci par avance pour vos suggestions.

35. Merci de pour ce tuto très intéressant…

    J’ai pour ma part un souci avec success: function( response )

    response vaut -1 si je fais une alert(response). Les données arrivent bien puisque cela s’affiche dans une alert(form.serialize());

    Si je ne mets aucune alert(), rien ne se passe…

    J’ai dû rater un épisode ou bien ?

    Merci

36. Harffff… j’ai trouvé la coquille !!! Une belle faute de frappe, et oui je recopie ce que tu dis, cela m’aide à bien comprendre ce que je fais !

37. Salut, merci beaucoup pour le tuto, cependant j’ai une petite question : si je veux pouvoir recevoir les mails sur ma boite gmail , comment cela se passe ?

38. Hello!

    Merci pour ce tuto! Pour mon dernier projet je construis un formulaire administrable (le client se rajoute lui meme ses champs, les organise etc.) du coup j’ai du oublier les plugins du genre CF7 etc.

    J’ai appris pas mal de trucs! Mais par contre je n’ai pas compris ce que faisais wp_send_json() ?? si quelqu’un peut me ré-expluquer ?

    Merci !

39. Bonjour,

    Merci beaucoup pour ce tuto, il est top!

    En revanche, j’ai un problème! Je rentre bien dans ma function d’envoi de mail car j’ai un success mais le mail de part pas et je ne sais pas pourquoi.
    J’utilise l’envoi de mail dans un autre programme et il est correctement envoyé.
    Tu n’aurais pas une idée?

    Merci d’avance.
    Gwen

40. Bonjour,

    je prends le tuto avec quelques années de retard et je me retrouve confronté à un souci (peut être lié au évolutions de wordpress) :

    Lorsque j’appelle mon formulaire par son URL, il s’affiche correctement ce qui semble indiquer que page-contact.php est bien trouvée lors du premier chargement… Cependant, quand je fais un submit de mon formulaire (action = “”), cela m’affiche la bonne URL mais la page n’est pas trouvée…

    Du coup je ne peux pas avancer dans le tuto alors qu’il correspond exactement à mes attentes…

    Avez vous une idée ou un retour d’expérience a partager concernant ce souci?

    Merci d’avance

41. Bonjour

    2 ans après le dernier commentaire ;)
    mais je tenais à vous remercier vivement pour ce super tuto
    ça fonctionne du tonnerre
    merci

    • @Cyril: Merci pour ton retour :)