contact wordpress

WordPress : Ajouter un formulaire de contact et configurer le serveur SMTP !

Publié par | Catégories : Création de sites - Trucs et astuces

Dernière mise à jour : 22 janvier 2012

Comme vous le savez, la page de contact est un élément indispensable pour votre site web WordPress... En fait cet élément peut être le moyen le plus rapide permettant à vos visiteurs de vous contacter, que ce soit le sujet de contact...

Et comme plusieurs gens ne connaissent comment faire pour ajouter un formulaire de contact sur leurs sites web utilisant le CMS WordPress, j'ai décidé d'écrire un tutoriel permettant de créer un formulaire de contact QUI MARCHE !

Vous allez découvrir également comment changer le serveur SMTP à celui appartenant à Google pour assurer l'envoi des messages provenant des visiteurs de votre site web !

Autrement dit, les messages envoyés via votre formulaire de contact vont être envoyé via le serveur de Gmail, donc même si votre hébergement ne propose pas l'envoi de messages, vous aurez la possibilité d'envoyer les messages librement :)

Allons-y !

Installation et configuration de l'extension Contact Form 7 :

Commençons par l'installation de l'extension sur votre site WordPress, pour cela vous n'avez qu'à cliquer sur le bouton "Ajouter" se trouvant dans la page des extensions...

137

Mettez "Contact Form 7" dans la barre de recherche et lancez la recherche...

Cliquez sur "Installer maintenant" pour installer le Plugin directement...

224

Cliquez OK pour valider l'installation...

313

Puis activez l'extension...

410

Rendez-vous sur la page de l'extension en cliquant sur "Contact" dans le menu à gauche de votre tableau de bord, modifiez (si vous voulez) les cases de votre formulaire et enregistrez le...

Vous pouvez même créer d'autres formulaires si vous voulez...

Recopiez ensuite le code qui se trouve en haut pour l'insérer dans une page...

511

Voyons maintenant comment créer une page et insérer le code...

Comment créer une page et ajouter le formulaire de contact :

Créez une nouvelle page en cliquant sur "Ajouter" dans la page de gestion des pages, collez le code comme dans l'image ci-dessous et cliquez sur "Publier"...

611

Votre page est accessible, mais voyons comment le serveur SMTP de Google...

Comment configurer le serveur SMTP Gmail :

Recherchez comme on a fait tout de suite l'extension "Configure SMTP" et installez-là !

810

Cliquez sur "SMTP" dans le menu Réglages...

1211

Cochez "Send e-mail via GMail" premièrement, les champs vont changer automatiquement...

Il ne vous reste qu'à changer l'identifiant et le mot de passe, mettez votre adresse GMail complète pour le username, et le mot de passe associé à votre compte GMail, le mot de passe sera crypté automatiquement et aucun personne ne peut le récupérer...

Cliquez "Save changes" pour valider les changements...

910

Et voyons le résultat...

Le résultat :

En fait, le résultat se trouve sur cette page : http://www.easytutoriel.com/contact

Et le voici en image...

1114

Essayez de m'envoyer un message, vous devez recevoir un message de réponse en retour pour voir que cette méthode marche :)

Si vous avez des questions concernant les formulaires de contact, n'hésitez pas à utiliser les commentaires en dessous !

Soufiane - Easytutoriel.com


L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 15 commentaires ! { Ajouter le vôtre ? }

  • Zboub dit :

    SMTP Error: Could not authenticate. ?

  • frank dit :

    bonjour
    J ai fait la manip
    mais je me reçois a moi même le message.
    Pouvez vous m aider

  • noftal dit :

    Je suis hébergé chez hostinger (qui bloque les mails envoyés par PHP) et je n’arrive pas à configurer le SMTP.
    Lors du mail test, j’ai une erreur : « SMTP connect() failed. »

  • Herve dit :

    Bonjour Soufiane,
    Bon tuto !
    Comment ajouter un champ mot de passe dans Contact Form 7 ?

  • Segas dit :

    Très bien et merci bcp.

    Comment faire pour choisir l’adresse email de destination?

    Merci d’avance

  • cat dit :

    J’ai bien du essayer 10 fois d’installer ce plugin mais en vain, j’obtiens tjrs ce message :
    Téléchargement de l’archive d’installation depuis http://downloads.wordpress.org/plugin/contact-form-7.3.3.1.zip…

    Décompression de l’archive de l’extension…

    Installation de l’extension…

    L’archive n’a pas pu être installée. Aucune extension valide trouvée.

    L’installation de l’extension a échoué.

    Retourner à l’installeur d’extensions

    Je désespère !!!!!! savez-vous pourquoi ?

  • Raphael dit :

    Bonjour Soufiane et bravo pour tes explications qui sont très claires.

    J’ai bien réussi a intégrer un formulaire de contact mais je voudrais que quand les internautes cliquent sur « envoyer » après avoir rempli leur champs puissent tomber sur une page que j’ai crée sur mon blog et qui montre un image qui les felicite d’avoir rempli le formulaire.
    Est-ce que c’est possible ? Et surtout comment je fais pour intégrer cette page au formulaire de sorte que quand ils ont tout rempli et qu’ils cliquent sur « envoyer » ils puissent tomber dessus ?

    Je ne sais pas si je suis très clair mais merci par avance pour ta réponse

    Rafa

  • jack dit :

    bonjour , j’ai bien suivi les indications recommandées pour recupérer mes messages supprimés sur facebook , à savoir  » parametre du compte puis telecharger une copie puis archive etendue puis mot de passe  » cela m’ouvre une fenetre « debut de l’archive etendue  » mais pas de ok à cliquer , juste annuler . Je voudrais savoir s’il vous plait pourquoi , comment faire et combien de temps cela prends . d’avance merci.

  • Ric dit :

    Super ça fonctionne très bien.

    Juste un détail je n’arrive pas à le centrer sur ma page :s

    Sinon c’est top ;))

    Merciiiiiiiiiiiii

    • Soufiane Sabiri dit :

      Bonjour Ric,

      Cela me fait plaisir cher ami :)

      Vous n’avez qu’à faire des changements dans le code CSS, inspectez l’élément (class ou id), puis attribuez à ce dernier la propriété CSS « margin:auto 0; »…

      Bien amicalement,
      Soufiane

  • hamza dit :

    qui ce que je vais dire que mil Merci soufiane :)

  • Eliott dit :

    Je voulais juste savoir, est ce Gmail qui envoi le MSG ? Ou le serveur web ?
    Mais sinon excellent tuto ;)

    • Soufiane Sabiri dit :

      Bonjour Eliott,

      Avant de répondre à votre question, je veux juste dire que le serveur web n’est pas lui qui envoi les messages, les messages sont envoyé par le serveur SMTP (Simple Mail Transfer Protocol)…
      Dans le tutoriel, j’ai expliqué deux parties, je vous ai montré comment installer l’extension, le formulaire doit marcher, mais les message seront envoyés par votre propre serveur SMTP, soit smtp.votre-hebergeur.com dans la plupart des cas (votre-hebergeur n’est qu’un exemple)…
      Si vous utilisez le SMTP de Google (smtp.Gmail.com), les messages vont être envoyés par le SMTP appartenant à Google…

      Bien amicalement,
      Soufiane

  • grosdunord dit :

    Bonjour ,

    bon tutoriel j’utilisai déjà cette extension qui et super sur mon blog.
    Par contre je ne connaissez pas smtp merci pour l’information :)

    • Soufiane Sabiri dit :

      Bonjour Grosdnord,

      Merci pour l’encouragement, j’essaie toujours de donner le maximum d’informations, changer le SMTP peut être utile pour ceux ayant un serveur gratuit…

      Cordialement.

  • Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)