Logo - Full (Color)

Comment créer un formulaire HTML ? Étapes et exemples

Sur un site web, les formulaires HTML jouent un rôle important pour interagir avec le visiteur et rendre les pages interactives. L'interface du formulaire est conçue avec le langage HTML et son apparence peut être personnalisée grâce à une feuille de style CSS.
Pour créer un formulaire, deux options sont possibles : s'appuyer sur des connaissances techniques solides, ou utiliser un outil conçu à cet effet.
création d'un formulaire HTML en drag and drop avec HubSpot

Qu'est-ce qu'un formulaire en HTML ?

Le formulaire HTML permet à un visiteur d'interagir sur un site web et d'envoyer des données. Il peut prendre de multiples formes et a différents objectifs, par exemple :

  • Un formulaire de contact pour envoyer un message au SAV
  • Un formulaire d'inscription à une newsletter
  • Une demande de devis
  • Un formulaire pour se connecter à son espace personnel

Il se compose de champs de texte, de cases à cocher ou de listes d'options et est souvent ajouté à une landing page.

Si le HTML permet de créer des formulaires, il faut ensuite utiliser d'autres langages comme PHP et MySQL pour stocker et exploiter les données recueillies. Concrètement, le langage HTML sert uniquement à créer la structure, c'est-à-dire l'interface qui sera visible sur le site et dans laquelle le visiteur renseignera les informations.

Comment créer un formulaire HTML ?

Avant l'étape du codage, il faut d'abord bien réfléchir au contenu du formulaire HTML et à sa structure. Il est important de définir les informations à recueillir et les champs associés. Choisir leur forme (texte classique, case à cocher, etc.) est l'étape suivante. Il peut être intéressant de faire un croquis à la main pour avoir un aperçu global du futur formulaire ou de le réaliser sur un logiciel comme Figma.

Ensuite, la création du formulaire passe par plusieurs étapes :

  • L'élaboration de la structure brute du formulaire avec les différents champs de texte et les boutons.
  • La personnalisation du design du formulaire grâce à une feuille de style CSS.
  • La création d'un script pour le traitement des données.

Utilisez HubSpot pour gratuitement créer des formulaires web sans connaissances techniques requises.

Form

C'est la balise qui permet de déclarer le formulaire dans le code HTML. Le contenu du formulaire devra donc être situé entre « form » et « /form » (balise ouvrante et balise fermante).

Au sein de la balise « form », il faut ajouter deux attributs :  « method  » pour le protocole qui permet d'envoyer les données au serveur et « action » pour indiquer l'URL du programme ou du script pour le traitement des données recueillies.

 

Input

Il s'agit des champs de saisie au sein du formulaire. Il est possible de personnaliser le type de champ en ajoutant un attribut « type » :

  • Text : c'est une zone de texte classique.
  • Password : les caractères saisis sont masqués.
  • Check : liste de cases à cocher avec possibilité de choix multiples.
  • Radio : bouton radio pour un choix unique.

D'autres attributs peuvent être associés à la balise « input » :

  • Value : il indique la valeur par défaut du champ.
  • Size : il définit le nombre de caractères du champ.
  • Name : il permet de donner un nom au champ.

 

Label

L'élément « Label » est lié à chaque champ et donc à chaque « input ». Il permet de définir le type d'informations à saisir (nom, adresse, téléphone, par exemple). Pour un champ dédié au nom de l'utilisateur, il prendra la forme de <label for = « name »>Nom :</label>.

 

Button

Un formulaire intègre généralement après la saisie un élément « button » qui permet de valider les informations et de les envoyer. L'attribut « type = « submit » » déclenche l'envoi, en l'associant à un attribut « input » qui transformera alors le bouton en élément cliquable.

Avec l'attribut « value », du texte peut être affiché sur le bouton, comme « Envoyer » ou « Valider » par exemple. Enfin, l'attribut « reset » offre la possibilité de réinitialiser tous les champs du formulaire.

See the Pen Untitled by Justine (@justinegavri) on CodePen.

Comment activer un formulaire HTML ?

Après avoir créé l'interface en HTML, il faut maintenant traiter les informations envoyées par le visiteur. Ce sont les attributs « action » et « method » qui définissent la façon dont les données sont transmises et l'endroit de réception.

Il existe principalement deux méthodes pour l'envoi des données :

  • La méthode GET : les données transitent via l'URL de la page et apparaissent donc dans la barre d'adresse (déconseillé pour les données sensibles),
  • La méthode POST : les données sont envoyées directement au serveur, de façon confidentielle, sans passer par l'URL.

Dans tous les cas, une fois que le serveur a reçu les données, il faut pouvoir y accéder pour les traiter et les exploiter, via la création d'un script PHP.

 

Quand applicable, utiliser des formulaires dynamiques qui pré-remplissent les informations déjà connues sur les leads.

Conseils HubSpot :

  • Sélim Dahmani, en charge des conversions chez HubSpot, partage ses insights : « Le formulaire doit être aussi court que possible pour ne pas décourager les visiteurs ; chaque champ à remplir doit avoir un but précis, pour qualifier, disqualifier ou segmenter les prospects. L'utilisation des champs progressifs en particulier permet de consolider les profils des contacts à chaque nouvelle soumission. »
  • Benoit Reger, également en charge des conversions chez HubSpot, ajoute : « Lors du processus de création d’un formulaire, il est essentiel de se projeter sur l'environnement dans lequel celui-ci sera diffusé pour en adapter la forme et le contenu.
    Par exemple, un formulaire court et direct sera adapté pour une page de destination où l'on estime que l'utilisateur est avancé dans le tunnel de conversion (BOFU). Tandis qu'un formulaire interactif plus long (pour plus de contexte) peut performer sur un article de blog où l'utilisateur est situé plus haut dans le tunnel de conversion (TOFU). »

En tous les cas, il est également important de penser à réaliser des tests pour découvrir ce qui fonctionne le mieux pour vous.

Étude de cas

Découvrez comment easiware a généré +49 % de leads avec HubSpot

En savoir plus

Créez un formulaire HTML sans connaissances techniques.

Créez formulaires en ligne, intégrés à un e-mail, pop-up ou encore d'exit intent avec HubSpot. Des options RGPD sont disponibles pour assurer la conformité.

5 exemples de formulaires HTML réussis

Hellio

Le spécialiste des économies d'énergie Hellio intègre un formulaire pour être recontacté directement par un conseiller. En plus des informations classiques (nom, prénom, e-mail et téléphone), l'internaute doit indiquer s'il est un particulier, une entreprise ou encore une collectivité. Cela permet à Hellio d'effectuer un tri des différentes prises de contact afin de les rediriger vers le bon service.

exemple-formulaire-html-helliosource

 

Feed

Sur le site Feed, les clients peuvent faire une demande de SAV via un formulaire. Ils doivent renseigner le type de commande et le numéro, ainsi que leurs coordonnées. Dans le champ Message, ils indiquent ensuite le détail de leur demande. Ce formulaire permet de gagner du temps et d'obtenir toutes les informations nécessaires pour traiter la demande de SAV.

exemple-formulaire-html-feedsource

 

Comme J'aime

Le site Comme J'aime propose un formulaire HTML en plusieurs étapes pour faire une demande de devis en quelques clics. L'internaute doit renseigner plusieurs informations (âge, poids, objectif de perte de poids, etc.) et reçoit ensuite un devis personnalisé. Ce formulaire est intéressant car il est intuitif et attractif. Il permet de recueillir facilement et rapidement les informations du prospect et de lui adresser une offre sur mesure.

exemple-formulaire-html-comme-jaimesource

 

Vueling

Vueling intègre de nombreux formulaires pour les réclamations clients. Ce sont des formulaires spécifiques qui permettent de recueillir les informations précises des clients. Tous les champs sont obligatoires. Avec cette façon de procéder, le site peut réduire les prises de contact en direct avec le SAV et optimiser la gestion des demandes entrantes. Les formulaires se décomposent de plus en plusieurs étapes pour une meilleure lisibilité.

exemple-formulaire-html-vuelingsource

 

Alan

La start-up Alan, spécialisée dans l'assurance santé, propose un formulaire simple et efficace pour créer un compte et souscrire un contrat. Il comporte 4 champs pré-remplis avec un exemple, afin que l'internaute renseigne les bonnes informations. Pour le choix du mot de passe, la marque précise les prérequis pour faire gagner du temps à la personne souscrivant.

exemple-formulaire-html-alansource

 

Comment utiliser HubSpot pour créer vos formulaires ?


Ils font confiance à HubSpot

Pour créer un formulaire de A à Z, modifier son apparence et traiter les données, il faut maîtriser plusieurs langages. Les prérequis techniques sont importants. HubSpot permet de réaliser des formulaires facilement et rapidement, sans code : une fonctionnalité accessible à tous, même sans aucun bagage informatique.

creation-formulaire-html

L'outil de création est gratuit et peut être utilisé pour réaliser des formulaires en ligne conformes aux exigences RGPD. Il présente de nombreux avantages :

  • Un véritable gain de temps grâce à l'éditeur intuitif en glisser-déposer et aux nombreux modèles prédéfinis (formulaire de contact, d'inscription, etc.).
  • Aucune compétence technique requise pour créer un formulaire.
  • La possibilité de partager les formulaires par e-mail ou sur le site web.
  • Un reporting détaillé du nombre de vues, de clics et de soumissions des formulaires pour suivre leurs performances.
  • Le paramétrage d'alertes pour recevoir une notification dès qu'un formulaire est soumis.
  • La création de formulaires intelligents qui s'adaptent au statut du visiteur (par exemple, proposer moins de champs à un lead dont certaines informations sont déjà connues).
  • Des options de conformité avec le RGPD.

HubSpot-sprocket-color-Jun-07-2023-12-31-03-6038-AMPour créer un formulaire sur HubSpot, il vous suffit de :

  1. Créer un compte,
  2. Choisir un modèle de formulaire (ou partir de zéro),
  3. Personnaliser le design et ajouter le contenu, sans connaissance technique requise grâce à l'interface drag-and-drop,
  4. Publier ou planifier la publication.

Avec HubSpot, les leads générés par le formulaire sont automatiquement enregistrés dans la base de données CRM afin de faciliter le suivi marketing et commercial.

Créez un formulaire qui correspond à votre marque en quelques instants