L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment créer des formulaires de réaction avec une excellente expérience utilisateur
En savoir plus sur la création de formulaires dans React offrant une très bonne expérience utilisateur avec KendoReact Form.
Les formulaires sont présents partout dans les applications modernes, que vous construisiez une nouvelle boutique en ligne ou que vous créiez un formulaire d'inscription à la newsletter , vous aurez certainement besoin de créer et de gérer des formulaires.
Les formulaires collectent des informations. C'est la raison principale pour laquelle ils sont si importants et pourquoi nous devons nous en préoccuper profondément. Les formulaires sont un outil de conversion clé et ils auront un impact énorme sur votre expérience utilisateur finale. Avoir la bonne stratégie dans votre formulaire peut accroître le succès des clients.
Si un utilisateur de votre site Web a commencé à remplir votre formulaire, vous avez probablement déjà converti cet utilisateur. Demander à un utilisateur de saisir des données dans vos formulaires nécessite de la confiance, et si votre formulaire ne fonctionne pas correctement, vous risquez de perdre la confiance de votre utilisateur et de l'utilisateur lui-même.
Surtout dans React, les formulaires ont toujours été difficiles et mystérieux partie des applications. Il y a tellement d'options, d'interactions et d'approches différentes qui peuvent être implémentées sous des formes que parfois nous faisons des erreurs stupides en les construisant.
Donc, dans cet article, nous allons apprendre comment nous pouvons utiliser le fantastique KendoReact Form bibliothèque pour créer de superbes formulaires dans React.
KendoReact
KendoReact Form est un petit et puissant package pour la gestion de l'état des formulaires dans les applications React sans aucune dépendance. Cela nous facilite la vie en gérant tous nos états de formulaire et en nous permettant de gérer quelques fonctionnalités dans nos formulaires, telles que les composants personnalisés, la configuration avancée, la validation, etc.
Avec la sortie de KendoReact 4.0 pour utiliser les packages d'interface utilisateur, nous devons télécharger notre clé de licence et la mettre à la racine de notre projet.
Maintenant, nous devons installer le @ progress / kendo- licence comme dépendance dans notre projet:
yarn add @ progress / kendo-licensing
Il ne nous reste plus qu'à exécuter la commande suivante pour activer notre licence:
yarn run kendo-ui-license activate
Nous avons maintenant notre clé de licence activée avec succès. Pour en savoir plus, il suffit de cliquez ici .
Commençons par l'installer avec la commande suivante:
yarn add @ progress / kendo-react-form
Lorsque nous travaillons avec le package KendoReact Form, nous allons travailler avec trois composants principaux: Form FormElement et Field .
Afin de avoir une meilleure interface utilisateur sous notre forme, nous allons installer quelques paquets supplémentaires:
yarn add @ progress / kendo-drawing @ progress / kendo-react-buttons @ progress / kendo-react-inputs @ progress / kendo- react-intl @ progress / kendo-theme-default @ progress / kendo-react-labels @ progress / kendo-react-common
Formulaires avec KendoReact
Nous allons créer un formulaire de paiement en utilisant KendoReact Form et voir à quel point il est facile d'implémenter quelques éléments tels que des composants personnalisés, la validation, etc.
Premièrement, nous allons importer quelques éléments dans notre fichier principal:
import React from 'react' ;
import { Form Field FormElement } from "@ progress / kendo-react-form" ;
import { Input Case à cocher } de '@ progress / kendo-react-inputs' ;
import { Button } from ] '@ progress / kendo-react-buttons' ;
import '@ progress / kendo-theme-default / dist / all.css' ;
La première chose que nous allons faire est de créer un composant personnalisé en utilisant le composant Input de KendoReact.
Custom Components
Créons notre fichier personnalisé Input . Nous rendrons notre code plus propre et facile à intégrer à d'autres choses telles que la validation de champ à l'avenir. Créons un nouveau fichier appelé Input et ajoutons le code suivant:
import React from 'react' ;
import { Entrez comme KendoReactInput } de '@ progress / kendo-react-inputs' ;
import { Label Erreur } de '@ progress / kendo-react-labels' ;
const Input = ( {
nom
étiquette
valeur
onChange
onBlur
visité
validationMessage
... accessoires
} ) => {
const editorId = name ;
return (
< div className = "k-form-field" >
< Label editorId = { editorId } > { label } < / Label >
< KendoReactInput
id = { editorId }
className = "k-textbox"
valeur = { valeur }
onChange = { onChange }
onBlur = { onBlur }
{ ... props }
/ >
{
visité le && validationMessage &&
( < Error > { validationMessage } < / Erreur > )
}
< / div >
) ; }
export par défaut Entrée ;
L'une des plus grandes erreurs UX que nous pouvons commettre lors de la conception de formulaires est de ne pas transmettre un attribut d'étiquette à notre composant d'entrée. Katie Sherwin a écrit un article intitulé « Les espaces réservés dans les champs de formulaire sont nuisibles », dans lequel elle explique que les entrées qui ont des espaces réservés remplaçant les étiquettes peuvent être très nuisibles à l'accessibilité et avoir parfois de nombreuses conséquences négatives .
Le composant Input de KendoReact Form prend en charge une étiquette et aussi de nombreux accessoires liés à l'accessibilité.
Maintenant que nous avons notre Input composant personnalisé, nous allons également créer un composant personnalisé Checkbox . Créons un nouveau fichier appelé Case à cocher et mettons le code suivant à l'intérieur:
import React from 'react' ;
import { Case à cocher comme KendoReactCheckbox } from '@ progress / kendo-react-inputs' ;
const Checkbox = ( { étiquette valeur onChange visité error } [19659025]) => (
< div >
< KendoReactCheckbox label = { label } value = { value } onChange = { onChange } / >
< / div >
) ;
export default Case à cocher
Maintenant que nous avons nos deux composants personnalisés, nous pouvons les importer dans notre fichier principal et commencer à créer notre formulaire. Voici à quoi ressemblera notre formulaire initial:
import React from 'react' ;
import { Form Field FormElement } from '@ progress / kendo-react-form' ;
import { Button } [19659028] de '@ progress / kendo-react-buttons' ;
import '@ progress / kendo-theme-default / dist / all.css' ;
import Input from "./ Input" ;
import Checkbox from "./ Checkbox" ;
const [19659061] App = () => {
const handleSubmit = ( data ) [19659062] => {
console . log ( data ) ;
}
return (
< Form
onSubmit = { handleSubmit }
render = { ( { allowSubmit } ) => (
< FormElement >
< Champ
name = { 'firstName' }
composant = { Entrée }
label = { 'Prénom' }
/ >
< Champ
name = { 'lastName' }
composant = { Entrée }
label = { 'Last name' }
/ >
< Field
name = { 'cardNumber' }
composant = { Entrée }
label = { 'Numéro de carte' }
/ >
< Champ
name = { 'expiryDate' }
composant = { Entrée }
label = { 'Date d'expiration' }
/ >
< Field
name = { 'cvv' }
composant = { Entrée }
label = { 'CVV' }
/ >
< Field
name = { "email" }
type = { "email" }
composant = { Entrée }
label = { "Email" }
/ >
< Field
name = { "Remember" }
composant = { Case à cocher }
label = { "Remember info" }
/ >
< Button
type = "soumettre"
disabled = {! allowSubmit }
primaire
>
Soumettre
< / Button >
< / FormElement >
) }
/ > [19659087]) ;
}
export default App ;
Validation
La plupart du temps, les choses ne se passent pas comme prévu dans les formulaires. L'utilisateur peut oublier de remplir certains champs ou peut avoir rempli des informations erronées. Nous devrions trouver un moyen d'afficher et de montrer l'erreur d'une manière simple, claire et intuitive à l'utilisateur.
L'expérience la plus frustrante que votre utilisateur puisse avoir dans un formulaire est de ne pas savoir exactement quelle est l'erreur.
Selon Rachel Krause nous devrions signaler les erreurs dans les formulaires en suivant trois principes simples:
- Le message d'erreur doit être facile à remarquer et à comprendre.
- Le (s) champ (s) en erreur devrait être facile à localiser.
- Les utilisateurs ne devraient pas avoir à mémoriser les instructions pour corriger l'erreur.
KendoReact Form a une très belle méthode de gestion de la validation dans les formulaires. Le composant Field a un accessoire appelé validator auquel nous pouvons passer une fonction synchrone qui renvoie une valeur booléenne.
Le prop validator est responsable du renvoi l'erreur pour nous, afin que nous puissions savoir quel champ a été rempli par l'utilisateur.
Créons un fichier appelé validate et à l'intérieur de ce fichier, nous allons créer deux fonctions simples. Une fonction s'appellera validationEmail et elle sera utilisée pour valider notre champ de messagerie. L'autre fonction va s'appeler validationField et elle va valider nos autres champs.
const emailRegex = new RegExp ( ] / S + @ S + . S + / ) ;
export const validationEmail = value =>
emailRegex . test ( value ) ? "" : "Veuillez saisir une adresse e-mail valide." ; [19659026] export const validationField = value => ! value ? "Veuillez saisir une valeur" : [19659024] "" ;
Importons maintenant nos fonctions validationEmail et validationField dans notre fichier principal. Dans le champ email nous allons passer la fonction validationEmail dans le validator prop comme ceci:
< Field
name = { "email" }
type = { "email" }
composant = { Entrée }
label = { "E-mail" }
placeholder = "Adresse e-mail"
validator = { validationEmail }
/ >
Pour les autres champs de notre formulaire, nous allons passer la fonction validationField dans le validator prop, comme ceci:
< Field
name = "firstName"
composant = { Entrée }
label = "Prénom"
placeholder = "Entrez votre prénom"
validator = { validationField }
/ >
< Field
name = "lastName"
composant = { Entrée }
label = "Nom"
placeholder = "Saisissez votre nom"
validator = { validationField }
/ >
< Field
name = "cardNumber"
composant = { Entrée }
label = "Numéro de carte"
placeholder = "Entrez votre numéro de carte"
validator = { validationField }
/ >
< Field
name = "date d'expiration"
composant = { Entrée }
label = "Date d'expiration"
placeholder = "Date d'expiration"
validator = { validationField }
/ >
< Field
name = { 'cvv' }
composant = { Entrée }
label = { 'CVV' }
espace réservé = "CVV"
validator = { validationField }
/ >
Depuis que nous avons créé des champs personnalisés tels que Entrée si nous essayons de soumettre le formulaire sans remplir les champs, nous recevrons quelques erreurs. Cela signifie que nos fonctions de validation personnalisées fonctionnent assez bien.
Parfois, nos formulaires peuvent devenir assez complexes, nous devons donc les diviser en plusieurs étapes. Les formulaires en plusieurs étapes peuvent être très utiles et constituer une bonne alternative à un formulaire long et complexe. L'affichage de quelques entrées à la fois peut aider votre utilisateur à accorder plus d'attention et à éviter qu'il se sente dépassé.
Si vous avez déjà essayé de le faire. implémentez un formulaire en plusieurs étapes dans React, vous savez à quel point cela peut parfois être difficile. Les formulaires en plusieurs étapes mis en œuvre de manière incorrecte peuvent créer un ensemble de composants complexes et mal construits et entraîner une expérience utilisateur indésirable. très facilement lorsque vous avez un formulaire long et complexe et que vous souhaitez le diviser en étapes plus petites pour créer une meilleure expérience pour votre utilisateur.
KendoReact Form nous facilite simplement la création formulaires dans React et personnalisez tout ce que nous voulons. Il possède une gamme de composants différents qui peuvent nous aider à améliorer notre expérience utilisateur dans toutes les parties de nos applications.
Conclusion
De nos jours, des formulaires sont requis dans chaque application. Savoir comment les construire et les entretenir correctement nécessite du temps et de nombreuses recherches. Il y a beaucoup de points UX différents auxquels nous devons prêter attention lors de la construction de nos formulaires dans React afin de fournir une expérience agréable et accessible à nos utilisateurs.
KendoReact Form est une bibliothèque d'interface utilisateur très mature et complète pour les applications React. Il contient de nombreux composants différents pour différentes approches et solutions qui pourraient vous aider à accélérer votre application et à disposer d'un ensemble de composants plus robuste et évolutif.
Source link