Skip to main content

Ajout d'une page de contact

Dans sa version actuelle (16 janvier 2026), Publii ne propose pas de plugin de contact. Il existe plusieurs plugins permettant à vos utilisateurs de laisser des commentaires sur vos pages ou bien de consulter vos réseaux sociaux. Mais ce n’est pas satisfaisant si vous voulez simplement recevoir un message de vos visiteurs. Je vous propose trois façons de contourner ce problème.

Ajout de votre adresse mail sur une page de votre site

Bon, c'est vrai que cette méthode paraît être une invitation au spammeurs. En général, les adresses mail lisibles sur les sites internet sont collectées de manière automatique et vont enrichir des bases de données plus ou moins légales. Certaines personnes ont proposé de créer une page de présentation (page "À propos" par exemple) en y insérant un image où apparait leur adresse. Avec ce type de solution, votre adresse ne sera pas récoltée de manière automatique, et vos visiteurs peuvent vous écrire un message. Robustesse et simplicité !

adresse-mail.png

Ajout d’un formulaire de contact chez votre hébergeur

Vous pouvez créer une page de contact en langage PHP chez votre hébergeur. Les visiteurs qui souhaitent vous contacter seront dirigés vers cette page. Puis un clic sur un lien les ramèneront à la racine de votre blog. On peut trouver de nombreux scripts sur internet.

Cette technique a plusieurs avantages parmi lesquels, la gratuité, la sécurité, une certaine simplicité. Cependant, sa mise en œuvre nécessite des connaissances qui dépassent le cadre de cette présentation du logiciel Publii.

Utilisation d’un service extérieur

Une autre solution consiste à utiliser un service tiers, il en existe plusieurs. Certains proposant des prix faibles ou même la gratuité. J’ai testé le site Formspree (voir figure 23) qui permet de créer une page de contact sans diffuser votre adresse mail à tout vent.

fig23.png

Figure 23 – Page d’accueil de formspree.io

J’ai apprécié la simplicité de cette solution. Il existe une option gratuite avec des fonctionnalités limitées, suffisante pour tester l’outil (vous avez droit à 50 soumissions par mois).

Le fonctionnement est simple : lorsqu’un message vous est envoyé à partir de votre blog, il part vers le site de Formspree. Votre adresse n’apparaît nulle part. Vous recevez ensuite un mail d’information sur votre boite perso, avec le contenu du message. La mise en place ne devrait pas poser de difficultés. Pas de PHP, pas de JavaScript ni de CSS. Une connexion internet suffit. J’exagère un peu, une feuille de style sera bienvenue pour améliorer le présentation de votre page. Voyons comment ça fonctionne.

Inscription sur le site Formspree

Si vous n’êtes pas encore inscrit, cliquez sur “Get Started” pour démarrer votre inscription.

Vous devrez fournir un nom, un prénom, une adresse mail (celle qui permettra à Formspree de communiquer avec vous) ainsi qu’un mot de passe. Attention, ce n’est pas le mot de passe de votre mail perso qui vous est demandé ! Ce nouveau mot de passe vous permet de gérer votre compte Formspree.

Après un échange de mail de confirmation vous êtes prêt à rédiger votre page de contact. Sur la page d’accueil de Formspree, vous avez quelques lignes de code HTML permettant de dessiner un formulaire. Ce formulaire présenté sur la page d’accueil est assez rudimentaire (il manque le contenu du message !), mais suffisant pour comprendre le fonctionnement. Il vous suffira de remplacer, dans la première ligne de ce formulaire, le paramètre {form_id} par celui qui vous est fourni lors de votre inscription : https ://formspree.io/f/xxxxxxxx

Et c’est tout. Le site filtre les spams avec ses propres outils. Ça fonctionne, à confirmer à l’usage si c’est suffisamment efficace.

Création de votre page de contact

Vous allez créer une page de contact. Attention, c’est bien une page, pas un article. Donnez lui le nom “contact”. Vous pouvez écrire une brève présentation ou ajouter une image pour le rendre convivial. Ce serait aussi une bonne idée de munir cette page et ce formulaire d’une feuille de style. Mais telle qu’elle est, elle fonctionne.

Ajoutez cette page à votre menu.

Maintenant, éditez à nouveau cette page dans l’éditeur WYSIWYG de Publii. Dans la barre d’outils, vous disposez d’un bouton “<>HTML”. Lorsque vous cliquez sur ce bouton, vous ouvrez une fenêtre intitulée “code source”. Copiez les lignes de code ci-dessous dans cette fenêtre, sauvegardez et visualisez votre site.

<form class="fs-form" action="https://formspree.io/f/xxxxxxxx"
method="POST" target="_top">
<div class="fs-field"><label class="fs-label" for="name">Nom</label>
<input class="fs-input" type="text"></div>
<div class="fs-field"><label class="fs-label" for="email">Email</label>
<input class="fs-input" id="email" name="email"
required="" type="text"></div>
<div class="fs-field"><label class="fs-label" for="message">Votre message</label>
<textarea id="message" class="fs-textarea" style="width: 450px;
height: 120px;" name="message"></textarea><br>
<p class="fs-description">Nous vous répondrons dès que possible.</p>
</div><br>
<div class="fs-button-group"><button class="fs-button"
type="submit">Envoyer</button></div>
</form>

Vous pouvez maintenant tester l’envoi de mail à partir de votre page de contact. En cas de problème :

  1. vérifiez que vous avez bien copié votre identifiant Formspree à la place des “xxxxxxxx”.
  2. Vérifiez que le code HTML a bien été copié dans une fenètre "code source" et non pas directement dans l'éditeur.

Le site Formspree vous propose des codes de formulaire plus complets, des solutions pour la sécurité des échanges, et des tutos pour répondre à vos besoins. D’autres services que Formspree proposent des solutions similaires. Je ne les ai pas testés. Pour en savoir plus :

Back to top