Fournir à vos clients des formulaires d’inscription et d’inscription simples sur votre site Web est essentiel pour capturer des prospects, augmenter votre liste de diffusion et stimuler les ventes globales.
Il n’y a qu’un seul problème : HTML.
HTML5 est le code standard utilisé pour faire fonctionner la plupart des pages Web. C’est le langage d’Internet. Mais comme tout langage de programmation – de Javascript et jquery à PHP et CSS3 — il y a une courbe d’apprentissage abrupte, surtout si vous n’avez jamais touché de code.
N’ayez crainte. Nous sommes là pour vous aider. Nous pourrons peut-être vous transformer en Bill Gates du jour au lendemain, mais à l’aide de quelques exemples utiles, à la fin de ce tutoriel, vous serez prêt à créer un formulaire d’inscription de base en HTML en un rien de temps.
Before Avant de commencer: Vous voulez éviter les tracas liés à l’utilisation du HTML? Avec un générateur de formulaire comme Paperform, vous pouvez gagner du temps et créer un formulaire d’inscription puissant et professionnel en quelques minutes.
5 Étapes Pour Créer Un Formulaire D’Inscription HTML
Vous êtes occupé, nous le savons. Il y a un billion d’articles à lire. Films Netflix à regarder. Émissions de télévision à la frénésie. Passons donc directement au guide en cinq étapes pour créer un formulaire d’inscription en HTML.
Étape 1. Choisissez un éditeur HTML
Tout comme vous avez besoin d’un traitement de texte pour créer un document texte, vous avez besoin d’un éditeur de texte pour créer du code HTML. Ces outils de développement convertissent le code étrange et merveilleux que vous tapez en un formulaire d’inscription.
Il existe des dizaines (voire des centaines) d’éditeurs HTML sur le marché, dont la plupart ont tendance à offrir des fonctionnalités similaires. Nous ne vous ennuierons pas avec les détails, mais il y a quelques éléments clés qui vous faciliteront la vie:
Détection d’erreur: Mettez automatiquement en surbrillance les erreurs de syntaxe pour faciliter les corrections.
Auto-complétion: Suggère des éléments HTML pertinents en fonction des modifications précédentes (vous fait gagner beaucoup de temps avec un code long).
Faits saillants de la syntaxe: Applique des couleurs à différentes balises HTML en fonction de certaines catégories pour faciliter la lecture et le tri de votre code.
Recherche et remplacement : Localisez et écrasez toutes les instances d’un code particulier plutôt que de les modifier individuellement.
Si vous vous lancez vraiment dans le codage, il y a plus de fonctionnalités à craindre, mais cela devrait plus que vous couvrir pour ce simple formulaire d’inscription.
Quelle application vous sélectionnez est une question de préférence personnelle. Vous voulez quelque chose que vous pouvez utiliser dans votre navigateur? Essayez Codepen. Barebones? Bloc-notes++. Une interface utilisateur minimaliste et un champ de saisie intuitif ? Texte sublime tout le chemin.
Notre co-fondateur et résident code-geek, Dean, ne jure que par VS Code.
« D’un point de vue ringard, VS Code s’intègre parfaitement dans la pile technologique de Paperform et possède d’excellents plugins de développement à distance que j’adore. C’est aussi génial pour les éléments HTML, et super personnalisable si vous aimez que vos outils soient beaux tout en ayant toutes les fonctionnalités dont vous avez besoin.
Il n’est pas nécessaire de trop s’y fixer. Malheureusement, il n’y a pas d’éditeur HTML qui générera un formulaire d’inscription pour vous, aussi génial soit-il. Tout dépend de toi.
Étape 2. Créez votre fichier HTML
L’étape suivante consiste à indiquer à votre éditeur de texte que vous avez l’intention de créer un fichier HTML. Pour ce faire, créez un nouveau fichier, puis enregistrez-le avec le « .extension « html ».
Par exemple, » myform.HTML ». Une fois que vous avez indiqué à l’éditeur que vous créez du code HTML, il devrait générer automatiquement le code suivant pour vous:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Astuce : Certains éditeurs ne se rempliront pas automatiquement. C’est bon. Il suffit de copier et coller ce code ci-dessus et cela aura le même effet.
Étape 3. Ajoutez des champs de texte et créez votre formulaire
D’accord. Il est temps de commencer à ajouter le code pertinent et de transformer ce code HTML barebones en un formulaire d’inscription.
Maintenant, si vous êtes juste là pour le code que nous comprenons. Vous trouverez tout ce dont vous avez besoin un paragraphe ou deux ci-dessous. N’hésitez pas à aller de l’avant. But
Mais si vous souhaitez en savoir un peu plus sur ce que vous entrez signifie réellement, permettez-nous un intermède de tutoriel HTML rapide.
Un formulaire HTML est composé d' » éléments de formulaire ». Ce sont des choses comme les zones de texte, les boutons radio, les cases à cocher et les menus déroulants qui permettent aux gens d’interagir avec votre formulaire en direct.
Chaque élément a sa propre balise spécifique. Par exemple, la balise HTML < form > définit votre code comme un formulaire, tandis que la zone de texte < > peut être utilisée pour collecter les entrées utilisateur.
Ces éléments sont comme des chaussures: ils viennent toujours par paires. Toutes les balises que vous souhaitez inclure dans votre formulaire doivent être insérées entre les balises open < form > et clos </form >.
D’accord c’est les notes d’étincelles. Maintenant, pour le code, vous devez réellement entrer. Ici:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>Ce code HTML (de base) produira quelque chose qui ressemble à ceci:
Pas exactement la plus belle chose au monde n’est-ce pas? Mais bon, vous avez demandé comment créer un formulaire d’inscription HTML. Ne tirez pas sur le messager.
La balise < tr > lui indique d’organiser les réponses d’affilée, tandis que < td > (qui signifie données de table) indique que vous souhaitez capturer le type de répondants. Dans ce cas, nous avons ajouté deux champs par souci de simplicité:
- Entrez l’adresse e-mail
- Entrez les mots de passe
Rien ne vous empêche d’ajouter des champs supplémentaires. Les types d’entrée vont des nombres et des dates aux couleurs ou même aux images. Copiez simplement le code ci-dessous et insérez le type d’entrée souhaité. W3Schools a une excellente liste pour vous guider.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Conseil: Il est crucial de sélectionner le bon type d’entrée. Il indique au formulaire comment le texte doit être affiché à l’écran. Par exemple, la dernière chose que nous voulons, c’est que le mot de passe de quelqu’un soit visible lorsqu’il le tape, nous utilisons donc le type d’entrée « mot de passe » pour le dissimuler.
Étape 4. Ajouter des espaces réservés
Un espace réservé est un texte dans vos champs de formulaire qui invite les répondants à répondre d’une manière particulière. Il est principalement utilisé comme un coup de pouce dans la bonne direction, mais c’est aussi une stratégie utile pour rendre les formulaires plus engageants.
Par exemple, supposons que vous ajoutiez un champ de nom simple à votre formulaire. Vous pouvez taper « insérer un nom » et en finir avec, ou vous pouvez peaufiner les choses en écrivant « Bruce Wayne » pour un peu de flair.
Quelle que soit la stratégie choisie, il est assez simple d’ajouter des espaces réservés à votre formulaire d’inscription HTML. Après le type d’entrée, insérez « placeholder = » avec le texte que vous souhaitez afficher.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>Entrer ce code produira un formulaire comme celui-ci:
Jolis pieds nus. Mais ça marche. Vous pouvez créer des options supplémentaires permettant aux clients de sélectionner leurs données démographiques, telles que l’âge ou le sexe, à l’aide d’un code similaire à celui ci-dessus.
Pour créer un champ genre, insérez les valeurs suivantes dans votre code (juste au-dessus de la dernière balise </table >). Nous ajouterons également un numéro de téléphone et une option déroulante « Sujet ».
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>Cela transformera le champ de données en cases à cocher — une pour homme et une pour femme. Voici maintenant à quoi ressemblera l’itération finale de votre formulaire d’inscription HTML:
Pas exactement la grande révélation que vous attendiez, non? Pouvez-vous imaginer que quelqu’un recherche votre entreprise sur Google et rencontre cette page? Ou partager cela sur les réseaux sociaux?
Il est prudent de dire que ce type de formulaire de connexion HTML n’encouragerait personne à s’inscrire à votre entreprise. Il y aurait une question écrasante dans leur esprit, qui est probablement la même que celle que vous avez. . .
Pourquoi Mon Formulaire D’Inscription HTML Est-Il Si Laid?
Comme vous ne pouvez pas voir votre formulaire HTML n’est pas particulièrement attrayant. C’est un vilain petit canard. Ce qui est bien — nous ne pouvons pas tous être Margot Robbie — mais cela n’incite pas vraiment les gens à le remplir.
Et c’est le problème. Les formulaires HTML ont tendance à être:
- Ennuyeux
- Ennuyeux
- Difficile à personnaliser
- Difficile à gérer
Ceci est dû à la nature simple du HTML. C’est un cadre qui aide à compléter les actions de formulaire nécessaires, mais il ne remportera certainement aucun prix de conception.
La solution simple à ce problème consiste à utiliser un générateur de formulaires en ligne dédié comme Paperform pour éviter le lourd fardeau du HTML ou du CSS. Vous pouvez créer de superbes formulaires d’inscription, de contact et des pages de destination complètes — parmi des centaines d’autres créations — en quelques minutes sans une seule ligne de code.
Mais peut-être que vous êtes vraiment réglé sur toute la chose HTML (ou peut-être que vous n’êtes qu’une ventouse pour la punition). De toute façon, si vous êtes vraiment engagé dans votre formulaire d’inscription HTML, vous pouvez améliorer son apparence en utilisant CSS.
Étape 5: Modifiez votre formulaire d’inscription HTML avec CSS
CSS est un langage de programmation utilisé pour styliser un document HTML. Il personnalise la façon dont les éléments HTML sont affichés à l’écran et vous permet de tout personnaliser, des couleurs de police et de l’opacité à l’ajout d’une image d’arrière-plan ou à un lien vers une autre page avec une balise < href >.
Maintenant, vous seriez ici toute la semaine si nous listions chaque propriété CSS. Nous pourrions le faire et essayer de booster le référencement de cette page, mais ce n’est amusant pour personne. Si vous recherchez une liste complète, nous vous recommandons la liste de référence CSS de W3School.
Pour les besoins de notre tutoriel, nous allons donner à notre formulaire d’inscription HTML un relooking rapide avec CSS. Nous personnaliserons la couleur du texte, le style de police et ajusterons les marges pour une apparence globale (légèrement) meilleure.
Tip Astuce: La façon la plus courante d’ajouter du CSS à une page HTML consiste à utiliser un fichier de feuille de style externe lié à l’élément. Cette feuille de style est créée dans le même éditeur de texte et enregistrée avec le « .extension « css ».
Voici le code que nous utiliserons:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }Et avec cette magie de style, votre forme finira par ressembler à celle ci-dessous. C’est un peu comme gifler du rouge à lèvres sur un cochon, mais c’est mieux dans une petite mesure.
Pourquoi un formulaire d’inscription HTML n’est pas la meilleure solution
Bien qu’apprendre à coder et à créer des formulaires d’inscription de base soit une compétence amusante à acquérir, vous devriez sérieusement reconsidérer leur utilisation à des fins importantes. N’essayez pas de l’amorcer, cela ne vaut tout simplement pas le temps, les efforts et la frustration.
Que vous ayez besoin d’un formulaire de contact pour vos clients, d’un formulaire de connexion pour votre entreprise ou d’un formulaire d’inscription des étudiants pour la nouvelle année scolaire, toute solution collée avec du HTML et du CSS finira par sembler non polie et non professionnelle – surtout si vous n’avez aucune compétence préalable en codage.
Heureusement, il existe une autre façon de créer des formulaires d’inscription beaucoup plus facile, plus rapide et plus intuitive: un générateur de formulaires en ligne comme Paperform. Avec notre plate-forme facile, vous pouvez être opérationnel avec une belle forme de marque en quelques minutes.
Avec Paperform, vous n’obtenez pas seulement un formulaire HTML de base. Vous bénéficiez d’une expérience dynamique qui vous permet de collecter tout type de données dont vous avez besoin, des simples coordonnées aux calculs complexes, en passant par la prise de paiements. Aucune expertise de conception requise.
De plus, la personnalisation est sans effort. Modifiez les couleurs et les polices et ajustez l’interface utilisateur de votre formulaire en quelques clics. Ensuite, une fois que vous êtes satisfait de votre nouvelle création, vous pouvez intégrer le formulaire sur votre site Web, l’héberger en ligne gratuitement ou l’intégrer sur votre site WordPress avec notre plugin WordPress.
Pour montrer à quel point c’est facile, nous avons préparé un formulaire d’inscription:
Vous n’avez pas envie de créer votre propre création? C’est à cela que sert notre bibliothèque de plus de 600 modèles de formulaires. Sélectionnez l’un de nos modèles d’inscription, ajoutez-le à votre compte en un clic et lancez-vous plus vite que vous ne pouvez boire votre expresso du matin.
Un formulaire d’inscription n’est que le début de ce que vous pouvez faire avec Paperform. Essayez-le vous—même avec notre essai gratuit de 14 jours – aucune carte de crédit requise.
Formulaire d’inscription dans la FAQ HTML
Puis-je créer un formulaire d’inscription HTML sans CSS?
Oui, mais ce ne serait pas joli. En fait, cela ressemblerait à quelque chose des premiers jours de Microsoft. Pas joli du tout.
Comment créer un formulaire d’inscription HTML avec téléchargement d’images ?
Pour ajouter un champ de téléchargement d’image, utilisez le type d’entrée « fichier ».
Puis-je créer un formulaire HTML sans utiliser de tableau?
Bien que la commande table aide à l’alignement, il est facile de créer un formulaire sans elle. Il suffit d’entrer directement vos entrées sans les commandes ‘tr’ ou ‘td’.
Est-il possible d’utiliser un formulaire d’inscription HTML pour les achats en ligne
Oui. Pour créer un formulaire d’achat en ligne, incluez des champs pour les coordonnées, l’adresse de livraison, l’ID du produit et le point de livraison. Les choses deviennent difficiles lors de la collecte des paiements, c’est pourquoi nous recommandons les formulaires de paiement simples de Paperform.
Comment créer une page de connexion et d’inscription ?
Nous avons expliqué comment les créer, mais la réponse est avec beaucoup de code et de réglages. Il est beaucoup plus facile d’utiliser un générateur de formulaires en ligne dédié comme Paperform.