Comment faire un formulaire d'inscription HTML pour votre newsletter ?

Les entreprises doivent obtenir le consentement des abonnés préalablement à l'envoi des newsletters. Les formulaires d'inscription insérés sur les sites web permettent de satisfaire cette obligation légale. Ils permettent également aux entreprises d'affiner leur connaissance des leads, pour leur proposer des contenus adaptés.

Des outils de création de formulaires d'inscription facilitent le travail : les formulaires sont créés, personnalisés et intégrés en quelques clics, sans connaissance technique en développement web. L'alternative consiste à utiliser le langage HTML, approprié pour structurer le formulaire d'inscription à la newsletter et pour décrire son contenu.

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

Ce code HTML permet de faire un formulaire d'inscription basique : l'entreprise obtient l'adresse e-mail du lead, et son consentement à recevoir les e-mails marketing. Le consentement est matérialisé par un clic sur le bouton d'abonnement.

See the Pen formulaire-inscription-html_code-base by HubSpot France (@HubSpot-France) on CodePen.

Voici les explications du code pour comprendre le rôle des balises HTML dans la création d'un formulaire d'inscription à une newsletter.

Les balises <form> et </form> pour créer un formulaire interactif

Les balises <form> au début et </form> à la fin indiquent que ce qui se trouve à l'intérieur constitue le formulaire. Cela permet d'afficher à l'écran des éléments interactifs : l'internaute interagit en renseignant son adresse e-mail et en cliquant sur le bouton d'abonnement à la newsletter. Quand le bouton est cliqué, l'e-mail est transmis au serveur pour être collecté puis exploité par l'entreprise.

Dans l'exemple, la balise <form> inclut deux attributs : « action » et « method ». Ces attributs sont obligatoires pour faire un formulaire HTML interactif.

• L'attribut « action » indique où envoyer les données collectées via le formulaire.
• L'attribut « method » précise la méthode HTTP pour envoyer les données au serveur : « post » ou « get ».

Les boîtes div HTML pour mettre en forme le formulaire

Les balises ouvrante et fermante <div> et </div> créent des « boîtes » HTML. Une boîte HTML est un bloc de plusieurs éléments : des titres, des champs à remplir et des boutons à cliquer, notamment. Créer une boîte HTML et lui donner un nom est utile pour accélérer le travail de mise en forme avec le langage CSS : les propriétés de style indiquées dans CSS s'appliquent à tous les éléments de la boîte div HTML.

Dans l'exemple, le champ e-mail et le bouton sont dans deux boîtes distinctes. Cela permet de concevoir et de modifier l'aspect graphique indépendamment pour l'un et l'autre, directement dans le code HTML. Attribuer un nom à chaque div HTML est nécessaire pour personnaliser la mise en forme avec CSS.

Les éléments HTML pour afficher le champ à remplir

Pour permettre aux leads de s'abonner à la newsletter de l'entreprise, il faut afficher un champ où ils renseignent leur adresse e-mail. Deux éléments HTML sont utiles pour créer ce champ à remplir.

• Le champ à remplir est une case vide dans laquelle l'internaute écrit son adresse e-mail. Pour le créer avec HTML, il faut utiliser l'élément input, avec le type « email » pour indiquer au navigateur que l'internaute va y écrire une adresse e-mail. L'attribut « name » sert à faciliter la lecture des résultats par l'entreprise. L'attribut « id » est l'identifiant du champ.
• L'élément HTML label sert à donner un titre ou une description au champ à remplir, pour guider le lead. Dans cet exemple, le label HTML indique le titre du champ : « E-mail ». Il est associé au champ à remplir grâce à l'identifiant du champ.

Le bouton HTML d'inscription à la newsletter

Le lead, une fois le champ « E-mail » rempli, doit cliquer sur un bouton pour formaliser son consentement à recevoir les newsletters de l'entreprise. Pour créer un bouton avec HTML, il faut utiliser l'élément button. Renseigner le type « submit » précise que les données sont envoyées au serveur quand l'internaute clique sur le bouton.

Dans l'exemple, le bouton porte le titre « S'abonner à la newsletter ». Le titre, quel qu'il soit, est mentionné entre les balises ouvrante et fermante <button> et </button>.

Code HTML pour enrichir la base de données d'e-mailing

Pour enrichir leur connaissance des leads, dans le cadre de leur plan d'action commercial, les entreprises peuvent collecter d'autres données que leur adresse e-mail. Le formulaire d'inscription à la newsletter peut par exemple comporter des champs à remplir avec le nom et le prénom de l'abonné, pour s'adresser personnellement à lui dans les communications marketing.

Pour demander les nom et prénom des leads dans le formulaire d'inscription à la newsletter, il faut créer de nouveaux champs à remplir avec les éléments HTML input et label. Le type de l'input change : il faut remplacer le type « email » par le type « text ». Exemple :

See the Pen formulaire-inscription-html_nom-prenom by HubSpot France (@HubSpot-France) on CodePen.

Code HTML pour personnaliser le contenu des newsletters

Plus l'entreprise collecte d'informations à propos du lead via le formulaire d'inscription, mieux elle peut personnaliser le contenu et le format des newsletters qu'elle lui envoie. Les champs toutefois doivent être rapides à renseigner pour ne pas décourager l'internaute : multiplier les champs textuels n'est pas recommandé. À la place, le formulaire d'inscription peut proposer de répondre via un système de cases à cocher. Les réponses sous ce format, en outre, sont plus faciles à analyser par l'entreprise.

Pour créer un questionnaire avec des cases à cocher, il faut utiliser un élément HTML input de type « checkbox » par réponse possible. Quand un lead clique dans le champ créé avec l'input de type « checkbox », la case est cochée. Exemple de code HTML pour savoir quelles newsletters envoyer au lead :

See the Pen formulaire-inscription-html_checkbox by HubSpot France (@HubSpot-France) on CodePen.

Dans cet exemple, les balises <fieldset> et </fieldset> créent un encart visuel pour mettre en évidence la question intitulée « Quel type de contenu souhaitez-vous recevoir ? ». Le titre de la question est renseigné grâce à l'élément HTML legend. Chaque réponse est proposée sous forme de case à cocher grâce à l'élément HTML input de type « checkbox ». Chaque input a son propre identifiant « id ». En revanche, tous les éléments HTML input de type « checkbox » ont le même attribut « name » pour indiquer qu'ils se réfèrent à la même question.

Pour que les réponses fournies par les internautes soient lisibles par l'entreprise, les éléments HTML input de type « checkbox » prennent un attribut « value ». C'est cette valeur que l'entreprise voit s'afficher si le lead a coché la case. Si un lead coche les cases pour s'inscrire aux newsletters qui concernent les réductions et les nouveaux produits, par exemple, l'entreprise lit : cluster=discount&cluster=newproducts.

Avec un logiciel de création de newsletters intégré à son CRM, l'entreprise fait communiquer les données pour automatiser et accélérer de nombreux processus. Sur la base des données collectées via le formulaire d'inscription, par exemple, le logiciel adresse exclusivement les contenus qui intéressent le lead.

Comment modifier l'apparence du formulaire d'inscription HTML ?

Couleur du texte, forme des champs à remplir ou encore taille de la police : l'apparence de tous les éléments HTML du formulaire d'inscription à la newsletter sont modifiables. Pour faciliter le travail, il est possible d'utiliser CSS, le langage dédié à la mise en forme. L'objectif est d'afficher un formulaire attractif, au design soigné et conforme à la charte graphique du site web.

Afficher le formulaire d'inscription à la newsletter dans un cadre

Pour dessiner un cadre autour du formulaire d'inscription, afin de le mettre en valeur sur la page, il faut indiquer dans le CSS que tout ce qui se trouve entre les balises <form> et </form> est entouré d'une bordure : « border ». Il est possible de personnaliser la taille de la bordure et sa couleur, ainsi que la forme des coins de la bordure (« radius »), et l'espacement entre le formulaire et la bordure (« padding »).

See the Pen formulaire-inscription-html_encadre by HubSpot France (@HubSpot-France) on CodePen.

Agrémenter le design des champs textuels à remplir

Pour changer l'aspect des champs à remplir, il faut indiquer dans le CSS que tous les éléments HTML input prennent certaines propriétés. Il est possible de personnaliser l'apparence des champs avec une multitude de propriétés : « background » pour colorer le fond du champ, « border » pour paramétrer l'aspect de la case ou encore « shadow » pour appliquer un effet d'ombrage. Exemple sommaire :

See the Pen formulaire-inscription-html_design-champs by HubSpot France (@HubSpot-France) on CodePen.

Modifier le bouton du formulaire d'inscription HTML

Centrer le bouton sous le formulaire d'inscription à la newsletter, augmenter sa taille ou encore changer la police du texte : le bouton du formulaire HTML peut être modifié de multiples manières. Il faut d'abord spécifier dans le CSS que le style décrit doit être appliqué au bouton, puis il faut décrire le style. Exemple :

See the Pen formulaire-inscription-html_bouton-apparence by HubSpot France (@HubSpot-France) on CodePen.

« Pour accompagner un formulaire d'inscription à une newsletter, il est conseillé de publier un aperçu du contenu de celle-ci. Cela permet à l'utilisateur de mieux comprendre les éléments qui y seront diffusés et ainsi d'éviter de lui envoyer des e-mails qui ne correspondent pas à ses attentes. »

Benoit Reger, Content Strategist chez HubSpot

Pour aller plus loin, découvrez comment identifier des indicateurs clés de succès pour l'e-mailing en téléchargeant le guide de la newsletter ; ou découvrez le logiciel de création de newsletter.