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

Comment créer un formulaire HTML ?

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.

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.

source

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.

source

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.

source

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é.

source

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.

source

Pourquoi utiliser HubSpot pour créer vos formulaires ?

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.

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.