Dans cet article, nous allons voir ensemble comment créer un formulaire de contact. Avec les commentaires, c’est le principal moyen qu’auront vos lecteurs pour communiquer avec vous ! C’est donc un élément à ne pas négliger.
Un grand nombre d’extensions WordPress existent pour créer le formulaire approprié. J’utilisais précédemment Ninja Forms, qui est extrêmement facile d’utilisation et m’a donné pendant longtemps entière satisfaction. Malheureusement, j’ai eu des soucis de cohabitation avec une autre extension, et j’ai dû trouver une autre solution.
Je me suis donc par la suite tourné vers WPForms, une autre extension populaire toute aussi ergonomique.
Quelle adresse de contact utiliser ?
Si le plus simple est d’utiliser votre adresse personnelle, je déconseille fortement cette solution. En effet, cela veut dire que cette adresse sera aussi utilisée quand vous répondrez à un message reçu. Pour des raisons évidentes de confidentialité, mieux vaut créer une adresse dédiée.
Une autre solution est de créer un compte Gmail pour avoir une adresse votreblog@gmail.com, mais comme la plupart des hébergeurs proposent de créer des comptes mail correspondant à votre domaine, pourquoi s’en priver ?
Je conseille donc de créer un compte de courrier électronique chez votre hébergeur, par exemple prenom@votreblog.fr. Il vaut mieux éviter d’utiliser une adresse générique telle que contact@votreblog.fr, car ce type d’adresse est fréquemment spammé ! Voyons concrètement comment se passe ce processus, en général assez simple.
Création d’un compte e-mail avec SiteGround
Chez SiteGround, il est extrêmement simple de créer des adresses e-mail pour votre domaine. Dans les outils de votre site, allez dans l’écran Email / Accounts, et remplissez les deux champs sous « Create New Email Account » avec le nom d’utilisateur et le mot de passe désiré. Validez avec le bouton « Create » et voilà, votre adresse est prête à être utilisée !
Pour consulter vos mails, il faut en bas de ce même écran cliquer sur le menu à droite du nom d’utilisateur et choisir « Login to Webmail ». Vous serez alors amené sur l’écran de la boite de réception utilisant RoundCube.
Création d’un compte e-mail chez o2switch
La procédure est toute aussi simple que chez SiteGround, bien que les écrans soient bien moins esthétiques ! Rendez-vous d’abord sur votre interface cPanel, et recherchez le bloc « e-mail ». Cliquez sur l’icône « Comptes de messagerie » juste en-dessous.
Sur la page suivante, cliquez sur le bouton « Créer ». Entrez le nom d’utilisateur et le mot de passe désiré, puis validez avec « Créer ».
Vous serez alors ramené sur un écran listant les comptes e-mail, d’où vous pourrez accéder à la page de consultation des mails.
Consulter ses mails depuis Gmail
Il est assez contraignant d’avoir à consulter les mails via l’interface d’administration de son hébergeur. Voyons donc comment les lire et y répondre directement sous Gmail !
Pour pouvoir gérer votre boite aux lettre depuis Gmail, il faut connaître la configuration mail utilisée par votre hébergeur. Celle-ci est constituée des mails entrants (« Incoming server ») utilisant le protocole POP3, et des mails sortants (« Outgoing server »), avec le protocole SMTP. Pour chacune d’entre elle, il faut connaître le nom du serveur ainsi que le port utilisés (souvent 995 pour le protocole POP3 et 465 en SMTP).
C’est du charabia pour vous ? Pas de panique ! Prenons le cas de SiteGround. La configuration est indiquée clairement en bas à droite de l’écran de création d’un compte mail.
Comme un peut le voir, chez SiteGround, c’est à nouveau très simple; en effet, le serveur à utiliser est simplement le nom de domaine de votre site, tandis que les ports sont standards (995 pour les emails entrants en POP3, 465 pour les emails sortants en SMTP).
Chez o2switch, la configuration est quasiment tout aussi simple, mais il faut préfixer votre domaine par « mail. » (par exemple mail.monblog.fr). Les ports utilisés sont 995 et 465.
Chez les autres hébergeurs, la configuration devrait être aussi trouvable sans difficulté majeure (recherchez SMTP ou POP3 dans la documentation)
Passons donc aux choses concrètes : la configuration de Gmail pour qu’il récupère les mails sur le serveur de votre hébergeur. Cliquez sur l’engrenage en haut à droite de votre boite de réception, et choisissez « Paramètres » dans le menu. L’onglet qui nous intéresse est « Comptes et importation », et plus précisément la section « Consulter d’autres comptes de messagerie ».
Cliquez sur « Ajouter un compte de messagerie »; une fenêtre pop-up va s’ouvrir, indiquez l’adresse e-mail que vous avez créé chez votre hébergeur. Entrez le mot de passe, le serveur POP (c’est donc votre nom de domaine si vous êtes chez SiteGround), et choisissez le port (995 chez SiteGround et o2switch). Si elle n’est pas cochée, cochez la case concernant la connexion SSL afin de sécuriser la connexion. Enfin, je conseille de stocker les mails reçus sur votre site dans un dossier spécifique afin de vous y retrouver plus facilement.
Après validation, Gmail va essayer de se connecter. En cas de succès, essayer d’envoyer un mail depuis votre compte personnel à votre adresse de blog; celui-ci devrait être récupéré par Gmail après un petit délai.
Voyons maintenant comment envoyer des mail en utilisant l’e-mail de votre blog (cela servira aussi à répondre à vos lecteurs).
Envoyer des mails depuis Gmail
Dans l’écran de paramétrage de Gmail précédent, on s’intéresse maintenant à la section « Envoyer des e-mails en tant que ». Cliquer sur « Ajouter une autre adresse e-mail », et rentrez le nom d’expéditeur et l’adresse e-mail correspondante. Là encore, pour des raisons de confidentialité, je vous conseille d’utiliser comme nom d’expéditeur le nom de votre blog, ou simplement votre prénom.
Sur l’écran suivant, il faut reporter la configuration mail de l’hébergeur : nom du serveur et port (votre domaine / 465 si vous utilisez SiteGround), le nom d’utilisateur et mot de passe. Petite subtilité, le nom d’utilisateur doit contenir le domaine; il sera donc de la forme prenom@domaine.fr. Vérifier que la connexion SSL est activée, et validez.
Il vous sera désormais possible de choisir l’adresse e-mail utilisée quand vous rédigerez un e-mail sous Gmail, grâce à la liste déroulante présente à côté du champ « De : ». De même, quand vous répondrez à un e-mail envoyé sur cette adresse, la réponse proviendra de cette même adresse plutôt que de votre adresse personnelle.
Voyons maintenant comment intégrer un formulaire de contact dans votre site. Par rapport à la gestion des adresses mail, cette étape sera bien plus rapide !
Création d’un formulaire de contact avec WPForms
Commencez par installer l’extension WPForms via Extensions / Ajouter; tapez WPForms dans la boite de recherche en haut à droite et installez / activez l’extension.
Celle-ci ajoute un menu WPForms dans le menu principal du tableau de bord. Rendez-vous dans la section « Ajouter » de ce menu, et choisissez « Créer un formulaire de contact simple ». Vous pourrez alors prévisualiser ce à quoi ressemblera le formulaire.
Il est possible de personnaliser facilement cette interface. Vous pouvez soit modifier un champ existant en cliquant dessus, ou alors en ajouter un via le glisser-déposer. Pour ma part, j’ai trouvé la version proposée suffisante pour mes besoins.
Rendez-vous ensuite dans la section « Réglages » / « Notification », et entrez l’adresse mail à laquelle recevoir les notifications dans le champ « adresse e-mail du destinataire ».
Pour « Nom de l’expéditeur », cliquez sur « Afficher les balises intelligentes » et choisissez « Nom » dans la liste. De même, pour « E-mail de l’expéditeur » et « Répondre à », choisissez « E-mail ». La configuration devrait ressembler à cela :
Enregistrez ensuite les modifications. C’est parti pour intégrer ce formulaire dans votre site !
Intégration et test du formulaire de contact WPForms
Depuis l’écran de paramétrage du formulaire WPForms, cliquez sur le bouton « intégration » et haut à droite. Une popup apparaîtra alors, affichant un bout de code un peu barbare, qu’on va copier-coller dans la page de contact. Copiez donc le bout de texte affiché (appelé shortcode).
Le numéro indiqué après id sera probablement différent de celui de la copie d’écran, c’est normal.
Créons alors une nouvelle page (Créer / page en haut de l’écran) qu’on appellera « Contact ». Vérifier que le permalien (dans l’onglet « Document » à droite de l’écran) est bien « contact », et collez le shortcode dans un bloc de type « paragraphe », comme vous le feriez avec du texte normal.
Si vous le désirez, vous pouvez bien sûr personnaliser la page en ajoutant un message avant le formulaire, ou encore une image.
Prévisualisez ensuite la page, et si vous êtes satisfait du résultat, c’est parti pour la publier ! Elle devrait ressembler plus ou moins à celle-ci, avec probablement quelques différences suivant le thème utilisé !
Vous pouvez alors tester votre formulaire. Rendez-vous sur votre page de contact, et envoyez un message en utilisant votre adresse personnelle comme expéditeur. Après un petit délai, votre message devrait être visible dans le dossier correspondant de votre compte Gmail !
Finalement, n’oubliez pas de rendre la page de contact accessible via le menu de votre site.