Les formulaires d'inscription sont trop fréquents lors de la création de nouvelles applications Web ou de réseaux sociaux. La traction des inscriptions des utilisateurs peut vraiment renforcer votre confiance en vous quant au projet lorsque vous lancez un nouveau site Web. Mais que pouvez-vous faire pour améliorer l'expérience d'inscription et espérer attirer plus d'utilisateurs intéressés?
Dans ce tutoriel, je souhaite montrer comment créer un formulaire d’inscription guidé, offrant des conseils aux utilisateurs lorsqu’ils remplissent chaque champ. J'ai inclus certains de mes propres jQuery personnalisés avec un plugin appelé Progression.js. C’est un outil puissant qui propose une info-bulle étape par étape, qui contient des astuces permettant d’orienter les utilisateurs tout au long du processus. N'hésitez pas à télécharger une copie de mon code source et à visionner la démonstration en direct ci-dessous.
Live Demo - Télécharger le code source
Commencer
Nous devons d’abord télécharger une copie du plugin Progression.js et l’inclure dans l’en-tête du site Web. Progression utilise un seul fichier JS avec une dépendance sur la bibliothèque jQuery, ainsi que ses propres styles CSS personnalisés. Prenez une copie du dépôt officiel Github qui inclut également sa propre mini-installation de démonstration.
Dans le corps de la page, j'ai créé un nouveau formulaire avec l'ID. #registerform. C'est l'élément de page que nous attachons à l'aide de la fonction Progression, avec un certain nombre de paramètres internes. Il est intéressant de noter que les info-bulles apparaîtront sur toute la largeur du formulaire, pas nécessairement sur la longueur des champs de saisie. Vous voulez donc vous assurer que tout est correctement aligné avec CSS, quel que soit le côté où les info-bulles apparaissent (à gauche ou à droite).
Chacun des champs de saisie est associé à un attribut de données HTML5 supplémentaire, qui comprend une chaîne de texte pour l'info-bulle. Ceci est étiqueté avec assistant de données et est ramassé automatiquement par le plugin. J'ai inclus un Tabindex attribut sur chaque champ, ce qui aide également les utilisateurs mobiles à passer rapidement d’un champ à l’autre.
Bien que cette forme soit quelque peu basique, elle illustre clairement les modèles que vous pouvez utiliser pour incorporer le plugin. J'ai également inclus certaines de mes propres vérifications de logique jQuery plus petites, qui déterminent si le nom d'utilisateur est suffisamment long, si l'adresse de messagerie est valide et si les deux champs de mot de passe correspondent. Ces codes ne sont pas liés au plug-in mais peuvent quand même être utiles aux développeurs construisant des types de formulaires Web similaires.
Conception de pages avec CSS
Un autre élément important de mon code se trouve dans le styles.css feuille de style. J'ai configuré les réinitialisations de page par défaut avec le wrapper principal, mais rappelez-vous que le formulaire doit également avoir une largeur exacte égale à la longueur des champs de saisie.
le #registerform L'élément est verrouillé sur une largeur totale de 512 px, les champs internes étiquette / entrée ayant une largeur de 160 px + 340 px (500 au total). L'étiquette et les champs de saisie laissent une marge supplémentaire pour le remplissage afin que l'info-bulle ne soit pas au-dessus de tout. Également .basetxt La classe est appliquée à chaque entrée qui utilise les transitions CSS3 pour colorer les effets de bordure et de zone.
Un autre élément important à cela concerne le message d'erreur p.errmsg. Vous pouvez les trouver sous trois des quatre champs qui concernent tous les contrôles de validation jQuery. Les messages sont masqués par défaut à l'aide de affichage: aucun puis affiché en utilisant la méthode .slideDown () de jQuery.
Ces derniers blocs de code définissent les styles de bouton d'envoi, ainsi que des conceptions personnalisées pour l'info-bulle. Vous pouvez simplement éditer le fichier CSS du plugin principal, mais cela rend plus difficile la mise à jour ultérieure. En outre, il peut être difficile de savoir exactement ce que vous avez modifié et de revenir en arrière serait presque impossible. Si vous souhaitez écraser certains styles de plug-ins, sélectionnez simplement le progression.min.css et découvrez les classes que vous devrez cibler.
jQuery Progression & Validation
Au bas de la page d'index avant la fermeture tag J'ai ouvert une nouvelle section JavaScript. Cela inclut l'initialisation de Progress.js ainsi que certaines de mes propres vérifications de validation. C'est un peu compliqué mais je vais le décomposer en morceaux plus petits.
Nous ciblons le formulaire d'inscription que nous appelons .progression() avec un certain nombre de paramètres internes. Je pense que la plupart (sinon la totalité) de ces paramètres peuvent parler d'eux-mêmes et la documentation du plugin peut également expliquer beaucoup de choses. showProgressBar C’est celui que j’ai désactivé dans cet exemple car j’ai le sentiment que cela ne fonctionne pas bien avec seulement 4 entrées. Mais cela donne un sentiment de satisfaction de l'utilisateur lorsque vous avez besoin d'un grand nombre de champs, car les utilisateurs peuvent réellement se voir évoluer.
Également tooltipPosition et tooltipWidth Cela vaut peut-être la peine de personnaliser et de voir comment ils s'intègrent le mieux à vos formulaires. Les autres paramètres tels que les couleurs et les tailles de police sont vraiment faciles à manipuler et s'intègrent à tous les designs. Notez également que j'ai également chaîné un gestionnaire d'événements .submit () sur ce formulaire. Ainsi, chaque fois que le formulaire est soumis, nous appelons .preventDefault () à l’événement submit pour l’empêcher de se produire. En effet, mon formulaire n'a pas d'attribut d'action réel, mais pour un formulaire de travail actif, vous devez supprimer ce gestionnaire d'événements chaîné.
Chacun des 3 derniers blocs de validation vérifiera chaque fois que l’utilisateur efface un champ de saisie. Ce premier morceau de code s’exécute une fois que l’utilisateur a fait la mise au point, puis efface le champ Nom d’utilisateur. Si la longueur du nom d'utilisateur est inférieure à 6 caractères, nous affichons le message d'erreur ci-dessous. Sinon, si le nom d'utilisateur est de 6 caractères ou plus, nous pouvons masquer le message d'erreur, en supposant qu'il soit déjà affiché.
Ces deux derniers contrôles de validation reposent sur le même type de logique. Le premier est le champ de saisie de courrier électronique qui utilise une chaîne d'expression régulière pour rechercher une adresse électronique valide. J'ai trouvé cette solution sur une question liée au débordement de pile, qui fournit une syntaxe de messagerie simple mais efficace. Cet exemple devrait être plus que suffisant pour gérer une adresse de messagerie commune.
En regardant la validation du mot de passe, vous remarquerez que cela ne se produit pas tant que l'utilisateur n'a pas brouillé le champ du mot de passe secondaire. C'est à ce moment que l'utilisateur doit ressaisir son mot de passe et il vérifiera les deux valeurs pour s'assurer qu'elles sont égales et ne pas complètement vide / vide. Je le vérifie pour m'assurer que le mot de passe fait au moins 1 caractère, mais vous pouvez rendre les restrictions plus dures si nécessaire.
Il existe des plugins jQuery qui aident réellement à exécuter ces types de vérifications de validation. Mais si vous êtes à l'aise avec les scripts, vous n'avez pas à écrire vos propres règles à partir de rien.
Live Demo - Télécharger le code source
Fermeture
Les développeurs de jQuery ont créé un certain nombre de plugins pour aider à l’avancement des formulaires.Les formulaires d’inscription sont souvent difficiles, car ils nécessitent une grande quantité d’informations. L’application de ces info-bulles de progression peut réellement inciter les utilisateurs à faire avancer le processus d’inscription et à le terminer rapidement, sans grande hésitation. Comme toujours, mon code de tutoriel est gratuit à télécharger et à mettre en œuvre dans vos propres projets Web. Aussi, si vous avez des questions ou des suggestions, n'hésitez pas à les partager avec nous dans la zone de discussion ci-dessous.