[Fix] Créer un formulaire de contact sans plugin pour WordPress.

Toujours dans ma quête de diminuer mon utilisation de plugins, aujourd’hui je vais vous présenter un modèle de formulaire de contact que j’utilise sur mon blog. Pratique, simple et adaptable à volonté, voilà une bonne initiative.

Je tiens à remercier chaleureusement Simon Vieille (https://www.deblan.io) pour avoir modifié et sécurisé les lignes PHP de mon formulaire de Contact. Je vous recommande donc de mettre à jour rapidement votre formulaire de contact si vous l’utiliser.

Vous pourrez retrouver les sources du formulaire sur mon compte github à cette adresse : https://github.com/quick-tutoriel.

Vous pouvez aussi télécharger le fichier zip contenant toutes les ressources à cette adresse : Formulaire de contact pour WordPress.

Avant de démarrer, ce tutoriel nécessite quelques compétences avec WordPress et son fonctionnement, pour se former avec une formation WordPress , je ne peux que vous conseiller l’excellent blog  wpformation.com qui est une source inépuisable d’informations, d’actualités et autre tutoriels concernant l’univers WordPress.

Installation.

Après avoir récupérer le fichier .zip, décompresser le et connectez-vous à votre hébergement WordPress.

Cette archive est composée :

  • Contact-form.php : fichier modèle que nous allons utilisé pour  afficher notre formulaire.
  • Loading.gif : image d’attente lors de l’envoi du formulaire.
  • Scripts : répertoire qui contient les fonctions JavaScripts et Jquery.
  • Style.css : fichier permettant de modifier l’apparence du formulaire.

Tous ces fichiers sont à copier dans le dossier de votre thème à savoir /wp-content/themes/nom-du-theme ou mieux encore dans le thème enfant de votre thème comme mon exemple avec le thème Sahifa.

Attention!!! Lors de la copie, il vous sera demandé si vous désirez écraser le fichier style.css. Répondez non à la question sinon la mise en page de votre thème sera détruite. Il vous suffira juste ensuite de copier à la fin du fichier style.css de votre thème le contenu du fichier style.css du formulaire.

Paramétrage du formulaire de contact.

Avant que votre formulaire ne soit opérationnel, il va falloir modifier l’adresse mail de destination. A l’aide de votre éditeur de texte ouvrez le fichier contact-form.php et rendez-vous à la ligne 66 et insérer votre adresse email de réception.

$emailTo = 'webmaster@quick-tutoriel.com';

Vu que ce formulaire est entièrement paramétrable, vous pouvez aussi modifier le contenu des autres variables à savoir :

  • $subject : Titre de l’email.
  • $body : Vous permet de paramétrer le contenu de votre mail, actuellement on récupère le contenu des variables $name, $sujet, $email, $comment (libellé de votre conatct) les autres variables sont assez parlante quand à leur contenu.

Création de la page du formulaire de contact dans WordPress.

Connectez-vous à l’interface d’administration de WordPress et aller dans le menu Pages puis cliquer sur Ajouter.

Attention!!! Si les attributs n’apparaissent pas cliquer sur Options de l’écran (en haut) et cocher Attributs de la page.

Vous aurez ainsi accès aux modèles de page. Dans la liste des modèles sélectionner Contact Form.

Ensuite donner un titre à votre page, par exemple Contact et publier la page.

Vous pouvez maintenant rajouter un lien dans la barre de menu de votre blog et utiliser votre nouveau formulaire de contact sans plugin.

Il ne vous reste plus qu’à tester votre nouveau formulaire et à vérifier que tout fonctionne bien. Et encore un plugin de supprimer.

Bien sûr nous pouvons apporter au formulaire quelques effets graphiques supplémentaires, je mets les sources sur mon compte Github à cette adresse :

Si vous le modifier, n’oublier pas de laisser un petit commentaire et même si vous l’utiliser.

Vous avez vu toute la puissance et les multiples possibilités du CMS WordPress, donc si vous voulez approfondir vos connaissances, je ne peux que vous conseiller cette série de tutoriels : Apprendre WordPress pour les nuls réalisée par le blog WPFormation. Voilà déjà un bon début pour vos premiers pas sous WordPress !

Source:wpchannel.com

That’s All.

9 Potins

  1. Bonjour,

    oui tout à fait. Un utilisateur à modifier le script pour le sécuriser.

    Cordialement

  2. Bonjour, je viens d’ajouter votre formulaire à mon site et ça marche bien.

    J’ai quelques questions : vu que je ne trouvais pas mailTo à la ligne 66 mais à la l114, je suppose que c’est lié à des modifications plus récentes que vous avez faites ?

    Car le script était vieillissant ? Vous avez corrigé les failles de sécurité mentionnées (injection XSS, injection d’headers de mail), l’utilisation de fonctions obsolètes, useless ou non rfc compliant ?

    Merci de votre réponse :)

  3. Bonjour,

    Sur l’adresse mail que vous avez renseigné dans le script, variable $emailto.

    Cordialement

  4. Bonjour,

    où attérissent les demandes ensuite ?

  5. vraiment sympa cet article

  6. Parfait, merci pour ton aide.

    @+

  7. Je rentre de festival donc un peu crevé :) Si tu veux bien, je peux au moins te faire une pull-request pour corriger les problèmes que je vois cette semaine. Ça te va comme ça ?

  8. Bonjour Simon pour ces éléments.

    Tu préconises quelles solutions pour remplacer ce script, peut-être vieillissant ? Connais-tu d’autres scripts de formulaire ?

    Merci

  9. Avoir envie de réduire le nombre de plugins et une très bonne chose, cependant, les remplacer par du code maison n’est pas toujours une bonne idée.
    Ici, je vois plusieurs failles de sécurité majeures (injection XSS, injection d’headers de mail), l’utilisation de fonctions obsolètes, useless ou non rfc compliant.

    @see php.net/filter_var
    @see php.net/htmlspecialchars
    @see phpsecure.info/v2/article/MailHeadersInject.php

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *