Newsletter Optin Block — pour optimiser l’inscription depuis vos posts

Augmenter ses inscriptions newsletter sans être intrusif ? C'est possible avec un formulaire qui s'affiche au bon moment...

Cet article prend 3 minutes à lire et comporte 744 mots.

Vous avez peut-être décou­vert (par pur hasard) mon nou­veau blog, Zone Test, ou je ne par­le pas unique­ment de Word­Press, où j’ex­péri­mente un peu tout ce que je trou­ve à expéri­menter. Dont n8n.

Mes tests sur n8n m’ont emmené à m’in­scrire sur Mail­jet, je voulais tester l’en­voi d’une let­tre d’in­for­ma­tion. Mais pour pass­er toutes les étapes d’in­scrip­tion au ser­vice, j’ai galéré… avoir un serveur mail auto-hébergé, pile sur une migra­tion de Cyber­Pan­el à aaPan­el, et qui soit bien réglé pour deux noms de domaines dif­férents, ce n’é­tait pas au pro­gramme.

Le temps que les prob­lèmes tech­niques soient réso­lus, l’ar­ti­cle était déjà en ligne, je ne pro­po­sais plus d’en­voy­er une newslet­ter via Mail­jet mais un email à tous les abon­nés. Ok — mais j’avais un compte ouvert… autant en prof­iter.

Vient la ques­tion de l’in­ser­tion d’un for­mu­laire d’in­scrip­tion. Je cherche, je cherche… et je ne trou­ve pas. C’est vrai, je suis exigeant, je sais ce que je veux, et du coup… je me lance dans le développe­ment d’une exten­sion — mais si vous voulez con­naître l’his­toire, c’est sur mon autre blog (Zone Test) que vous la trou­verez : To Code or Not to Code? Serait-ce la ques­tion ?

Donc… je vous présente Newslet­ter Optin Block, une exten­sion sans toute sim­ple pour gér­er l’in­ser­tion automa­tique d’un for­mu­laire d’in­scrip­tion à une let­tre d’in­for­ma­tion.

Pour être totale­ment trans­par­ent avec vous, voici les temps d’exé­cu­tion du plu­g­in, don­nés par F12-Pro­fil­er :

Core : 0.0001s, JavaScript : 0.007s

Autrement dit, l’ex­ten­sion :

• n’alourdit pas Word­Press,
• ne ralen­tit pas le charge­ment des pages,
• et s’intègre en douceur dans le DOM côté nav­i­ga­teur.

En somme : rapi­de, dis­crète, effi­cace.

Avant d’installer l’extension

Cette exten­sion ne vous servi­ra pas sans un compte Mail­jet. Si vous avez un email bien con­fig­uré (compte Microsoft Exchange, Google Work­space ou toute autre solu­tion de mail pro­fes­sion­nel) tout ira vite. La règle chez eux : un mail pro­fes­sion­nel, bien con­fig­uré, et quelques ques­tions de rou­tine sur l’usage prévu de votre compte chez eux.

Récupérez votre clé d’API et votre clé secrète, vous allez en avoir besoin.

Installez et activez Contact Form 7

Si vous n’avez jamais instal­lé d’ex­ten­sion, l’ar­ti­cle Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press vous expli­quera com­ment faire. Ce tuto date de 2017 mais est tou­jours d’ac­tu­al­ité.

Créer le formulaire

Pour une inscrip­tion, trois champs sont néces­saires : le prénom, l’email et une case à cocher pour le con­sen­te­ment (je ne l’ai pas mise en phase de test). Le nom des champs à trans­met­tre va être imposé : mailjetname pour le prénom, mailjetemail pour le cour­riel. La case à cocher sert surtout à ne pas envoy­er le for­mu­laire tant qu’elle n’est pas… cochée. Donc son nom n’a pas d’im­por­tance.

Voici le for­mu­laire une fois les champs créés (je suis passé par le con­struc­teur en ligne de Cro­coblock pour avoir un for­mu­laire au ren­du agréable (j’en touche un mot dans mon arti­cle Con­tact Form 7 — gra­tu­it, per­for­mant, exten­si­ble…) :

<div class="cf-container mailjetFormBorder">
  <div class="cf-col-5">[text mailjetname autocomplete:given-name placeholder "Votre prénom"]</div>
  <div class="cf-col-5">[email* mailjetemail autocomplete:email placeholder "votre courriel"]</div>
  <div class="cf-col-12">[acceptance conditionsok] J'accepte les <a href="/conditions-generales">conditions générales</a> du site. [/acceptance]</div>
  <div class="cf-col-2">[submit "Envoyer"]</div>
</div>

Il reste à régler les CSS. Le bloc peut être encap­sulé dans un div, avec une classe mailjetFormBorder par exem­ple comme dans l’ex­em­ple ci-dessus.

Pour le mes­sage en cas d’in­scrip­tion, vous avez deux class­es CSS pour obtenir un ren­du per­son­nal­isé, fai-thank-you-wrapper et fai-success-message.

C’est le moment de récupér­er et d’in­staller l’ex­ten­sion.

Pour le moment, l’ex­ten­sion est en cours d’ex­a­m­en pour inté­gr­er le dépôt Word­Press, mais vous pou­vez la récupér­er directe­ment sur Github.

Après l’installation

Vous ne règlerez pas la total­ité des options en une seule passe : Le choix de la liste Mail­jet n’est pos­si­ble qu’après avoir saisi la clé d’API et la clé secrète.

Donc en pre­mier lieu, vous allez :

1. Activ­er l’ex­ten­sion
2. Entr­er vos clés (API et secrète)
3. Décider du mode de fonc­tion­nement pour les arti­cles courts (moins de 300 mots)
4. choisir le for­mu­laire à affich­er
5. Rédi­ger un mes­sage de remer­ciement, une fois l’in­scrip­tion validée
6. Ajuster le pour­cent­age avant inser­tion du for­mu­laire dans l’ar­ti­cle
7. Enreg­istr­er les mod­i­fi­ca­tions

C’est seule­ment à ce moment là que vous pour­rez choisir votre liste :

Les liste Mail­jet sont bien présentes, vous choi­sis­sez à laque­lle ajouter votre nou­v­el abon­né.

Main­tenant, dans vos pages, vous avez un sub­lime for­mu­laire d’in­scrip­tion :

Et voilà, c’est ter­miné. Vous pou­vez oubli­er l’ex­ten­sion, et vous con­cen­tr­er sur votre con­tenu. Quand un lecteur arrivera sur le for­mu­laire, il n’au­ra qu’à ren­seign­er son nom, son email, à cocher une case et à valid­er, ou à cocher une case et à valid­er, en fonc­tion de la ges­tion de l’autocomplete par le nav­i­ga­teur.