Le terme « newsletter » désigne une lettre d'information envoyée à une liste de diffusion. Au-delà d'avoir un rôle informationnel, elle peut aussi être promotionnelle. Généralement au format HTML, elle peut être accessible depuis le site de la marque ou transmise par e-mail.

>> Créez votre signature d'e-mail avec cet outil gratuit et simple  d'utilisation.

HTML, ou Hypertext Markup Language est le langage le plus largement utilisé sur le web pour la partie (en théorie) purement textuelle, contrairement au CSS, ou Cascading Style Sheets qui se charge de l'aspect esthétique. Le HTML sert notamment à la création de newsletters et de leurs formulaires d'inscription.

Pour créer un formulaire d'inscription à votre newsletter sur votre site web, vous pouvez utiliser un outil de création de formulaire d'inscription, ou intégrer à votre site une portion de code HTML dédié. Quels types de code est-il possible d'intégrer ?

Code HTML d'un formulaire d'inscription à une newsletter

Le code HTML développé pour les formulaires d'inscription à une newsletter contient une base comprenant le renseignement d'un champ e-mail ainsi qu'un bouton d'abonnement. Il peut cependant être enrichi d'autres éléments vous permettant d'obtenir des informations sur vos leads, sur son identité ou encore des indications sur ce qu'il recherche en consultant votre newsletter.

Le formulaire de base par demande d'e-mail

La portion de code suivante se compose de plusieurs balises qui vont structurer le formulaire d'inscription :

<form action="/leads-subscribing-newsletter" method="post">
<div><label for="email">E-mail :</label> <input id="email" name="subscriber_email" type="email" /></div>

<div><button type="submit">S&#39;abonner &agrave; la newsletter</button> </div>
</form>

  • Aperçu :

La balise <form>, placée au début de la portion de code, et refermée à la fin, permet d'intégrer des éléments interactifs dans le formulaire. Ces différents éléments vont, quant à eux, récolter les données renseignées par les internautes et les communiquer au serveur. Sans cette balise, il est donc impossible d'exploiter les données des prospects.

La balise

<form> est la balise principale d'un formulaire comprenant différents champs. Plus concrètement, elle spécifie un champ de saisie. Dans le cas de cette portion de code en particulier, par exemple, elle délimite le champ consacré à la saisie de l'adresse e-mail de l'utilisateur.

La balise <button> permet de créer un bouton, qui va confirmer l'action de l'utilisateur (demande d'informations, renseignement de son adresse e-mail). Elle est également directement reliée à la balise , qui encadre tous les éléments constitutifs d'un formulaire.

Enfin, <div> définit une « boîte », ou portion dans une page web – ou, comme c'est le cas ici, dans un formulaire. L'ensemble des éléments compris entre la balise ouvrante et la balise fermante sont regroupés dans un même bloc. Pour un formulaire structuré à partir de la portion de code ci-dessus, le champ e-mail ainsi que le bouton sont intégrés dans des blocs différents. Cela permettra de concevoir l'aspect graphique en CSS indépendamment pour l'un et l'autre.

 

Le formulaire qualifiant l'abonnement

Le code suivant intègre des fonctions permettant de mieux qualifier un lead s'inscrivant à votre newsletter.

<div><label for="email">E-mail :</label> <input id="email" name="subscriber_email" type="email" /></div>

<div><label for="lastname">Nom :</label> <input id="lastname" name="subscriber_last_name" type="text" /></div>

<div><label for="firstname">Pr&eacute;nom :</label> <input id="firstname" name="subscriber_first_name" type="text" /> </div>

<button type="submit">S&#39;abonner &agrave; la newsletter</button>

  • Aperçu :

C'est le cas de l'attribut "type", complémentaire aux balises <form> et <button>. Il permet de définir comment va fonctionner <input>. Par exemple, dans cette portion de code en particulier, <input type="email"> correspondant au champ de saisie de l'e-mail voit son attribut "type" adopter la valeur "email", alors que celui dans lequel l'internaute renseigne son prénom est de type "text".

L'attribut « type ="email" » est par ailleurs assez restrictif, puisque seul le format d'une adresse e-mail s'en voit valide. L'attribut « type="text" » offre quant à lui une liberté totale en matière de saisie.

Le formulaire qui qualifie l'inscription

La portion de code suivante intègre des éléments qui vont ancrer l'intégration d'un formulaire d'inscription à votre newsletter dans une logique de qualification de leads à l'inscription.

<form action="/leads-subscribing-newsletter" method="post">

<div><label for="email">E-mail :</label> <input id="email" name="subscriber_email" type="email"> </div>

<div><label for="lastname">Nom :</label> <input id="lastname" name="subscriber_last_name" type="text"> </div>

<div><label for="firstname">Prénom :</label> <input id="firstname" name="subscriber_first_name" type="text"> </div>

<fieldset><legend>Quel type de contenu souhaitez-vous recevoir ?</legend>

<div><input id="articles" name="cluster" type="checkbox" value="articles"> <label for="articles">Articles de blog</label> </div>

<div><input id="discount" name="cluster" type="checkbox" value="discount"> <label for="discount">Réductions</label> </div>

<div><input id="newproducts" name="cluster" type="checkbox" value="newproducts"> <label for="newproducts">Nouveaux produits</label> </div>

</fieldset>
</form>
<button type="submit">S'abonner à la newsletter</button>

  • Aperçu :
Quel type de contenu souhaitez-vous recevoir ?

Elle comprend des balises <fieldset> et <legend>. La première sert à regrouper entre eux plusieurs éléments du formulaire. Elle créé un cadre visuel autour de cet ensemble de sections du formulaire, représentées dans le code par différentes balises. La balise est son élément enfant. Elle permet d'afficher une légende au début du contenu de la balise <legend>.

L'attribut type="checkbox" permet de créer des cases à cocher, pour proposer, par exemple, à l'utilisateur de sélectionner un produit parmi une liste. Les différentes cases à cocher doivent se référer à un même attribut name, qui adoptera, lors de la récolte de données, une valeur unique ou un cumul de valeurs selon les préférences sélectionnées par l'internaute dans les cases.

À ce sujet, un autre attribut value dans la balise <input> consiste à fournir un intitulé de la case si elle est cochée, autrement dit la requête basée sur la sélection d'informations. Par exemple, si le formulaire comprend 3 cases à cocher, les différentes requêtes envoyées au serveur pourront être les suivantes :

  • cluster=articles.
  • cluster=discount.
  • cluster=newproducts.
  • cluster=articles&cluster=discount.
  • cluster=articles&cluster=newproducts.
  • cluster=discount&cluster=newproducts.
  • cluster=articles&cluster=discount&cluster=newproducts.

Plus les données récoltées dans votre logiciel de newsletter sont précises, plus elles seront exploitables, et plus l'expérience offerte à l'utilisateur pourra être améliorée. L'objectif sur le long terme est de réduire au maximum les désabonnements, tout en construisant une liste de contacts qualifiés.

Découvrez l'outil gratuit de création de signature pour que tous vos e-mails se démarquent.

Signature-Generator

  Créez votre signature d'e-mail gratuitement

Publication originale le 11 mai 2020, mise à jour le 12 novembre 2021

Sujet(s):

Newsletter Logiciel newsletter gratuit