Ajouter des formulaires de contact à un site Hugo Static

1. Intro: Bonjour, je m'appelle Sean. Je suis enseignant et développeur web et je suis la bienvenue dans mon cours sur l'ajout de formulaires de contact aux sites statiques Hugo. Les formulaires de contact sont des facteurs dynamiques qui, par défaut, ne fonctionnent pas sur des sites statiques. Dans ce cours, je vais vous guider dans le processus de création d'un formulaire de contact avec Bootstrap, CSS, classes utilitaires et HTML. Je vais également vous montrer quelques façons de personnaliser le formulaire. Nous cherchons ensuite à soumettre le formulaire directement au point final. Et nous allons utiliser un fournisseur tiers pour cela. Nous examinerons ensuite la création d'une soumission de formulaire ajax avec JavaScript afin que le patient ne se recharge pas. Ensuite, nous examinerons la réception et le traitement des réponses APR et les afficher avec JavaScript. Mais ne vous inquiétez pas, si vous trouvez ces deux complexes, vous pouvez vous arrêter à la deuxième étape. On se voit dans le cours. 2. Commencer avec le projet: Pour commencer le projet, vous devez télécharger les fichiers de la section ressource à partir du fichier zip, qui s'appelle Start Here, dot zip. Vous pouvez également télécharger les fichiers depuis GitHub et cela se trouve dans la diapositive suivante. Une fois que vous avez extrait les fichiers e, ouvrez le dossier entier avec Visual Studio Code. Et je vais vous le montrer dans un instant. Avant de procéder, vous devez disposer des logiciels suivants qui installent les dernières versions. Il s'agit du code Visual Studio, node.js, qui inclut NPM. Et si c'est sur Windows et incluez également la chocolaterie. Et vous avez besoin d'Hugo, étendu. Et Extended est en fait la valeur par défaut pour Mac et Linux. Mais si vous utilisez Windows, vous devez vous assurer obtenir la version étendue de Hugo. Et éventuellement, vous aurez besoin de l' interface de ligne de commande et de GitHub Desktop. Je les recommande pour enregistrer la progression de votre travail sur GitHub, c'est un excellent endroit pour sauvegarder votre travail et vous pouvez également partager vos progrès. Nous avons créé d'autres étudiants, si vous avez besoin d' aide ou de commentaires. valeur False pour chaque leçon a été stockée sur un référentiel GitHub public. Vous pouvez obtenir la première leçon de Skillshare dans la deuxième section Ressources. Mais pour toutes les leçons, si vous avez besoin de vérifier votre progression, si vous rencontrez des problèmes et que vous le résolvez, vous pouvez saisir ces chutes du référentiel GitHub. J'ai créé un lien dans la section des ressources pour que vous puissiez y accéder et chaque leçon possède sa propre branche. C'est un moyen d'accéder aux fichiers est de télécharger un fichier zip à partir de cette branche. Bien que si vous utilisez l'option de clonage, assurez-vous de supprimer le dossier Dot Git pour pouvoir commencer à nouveau avec votre propre historique et je vais vous montrer comment cela fonctionne maintenant avec le téléchargement du fichier zip. Ainsi, une fois que vous avez cliqué sur ce lien, vous pouvez choisir la branche correspondant au numéro de leçon. Et à partir de là, si vous allez au code, vous pouvez télécharger le fichier zip. C'est la façon la plus simple de le faire. Si vous utilisez l'option de clonage ou d'utilisation de bureau GitHub, assurez-vous de supprimer ce dossier d'obtention de points. Si vous voulez finalement télécharger ce travail pour obtenir vous-même un hub. Je recommande d'utiliser le fichier zip. C'est beaucoup plus facile. Une fois que vous avez téléchargé les fichiers. Pour la première leçon, vous avez mis en place. Nous venons de faire un code selon mes instructions dans mon cours d' introduction ici, vous aurez la possibilité d' ouvrir avec le codage et le menu contextuel. Et puis une fois que vous avez ouvert avec du code, vous voyez que nous avons un tas de dossiers et en bas, nous avons des scripts NPM, et je les ai configurés pour vous afin que vous puissiez commencer immédiatement. Hugo doit être installé et vous devez être sur votre chemin pour que cela fonctionne. Nous avons quelques options que vous voudrez peut-être utiliser dev et qui exécutent le serveur de développement. Ils ont un aperçu dont vous n' aurez probablement pas besoin pour ce cours, mais cela créera des brouillons et des pages futures. La page a été marquée comme brouillon ou la date est à l'avenir. Dead Preview exécutera ces pages. Bill lui-même sert à construire Hugo dans le dossier public. Vous allez donc télécharger sur FTP. Je vous recommande de consulter mon cours sur Netlify. Vous pouvez obtenir un hébergement gratuit sur le phi et tout ce que vous avez à faire est d'exécuter un git commit. Et il y a tout à faire pour télécharger ou construire FTP. Il y a un disque de rougeur, et le disque vous permet voir les fichiers dans le dossier public pendant l'exécution du serveur Hugo. Et j'ai aussi un aperçu et une production. Production. Il est idéal pour vérifier la version de production réelle du site avant d' expédier votre code. J'ai également inclus la vérification npm pour vous, et c'est pour mettre à jour les dépendances NPM. Et la version Hugo vous indiquera quelle version de Hugo vous avez installée. Pour commencer par la version de Dodd Frank Hugo, il suffit de vérifier quelle version de Hugo vous avez installée. Et nous reviendrons à mon esprit, j'en ai un que je veux installer. Tout ce que vous devez faire, c'est d'exécuter npm install. La première fois que vous ouvrez ce dossier. La raison en est que le dossier des modules de nœuds ne sera pas présent. Il est inutile de télécharger des modules de nœuds car cela rend le référentiel beaucoup trop volumineux. Il est beaucoup plus facile de l'ignorer depuis Kip, puis de l'installer manuellement. Une fois que vous avez téléchargé les fichiers depuis GitHub, assurez-vous d'exécuter npm install. Il supprimera toutes les dépendances de package.json. Parce que ce que j'ai fait, c'est que j'ai entièrement configuré JavaScript et SES Building. J'ai un cours sur SSS avec Hugo et Bootstrap, et j'ai également un cours sur la création de JavaScript, mais je l'ai déjà configuré pour vous. Si vous accédez au dossier parcelles, ESPN s'appelle une ellipse, qui est configurée et prête à être utilisée. Les modules de nœuds doivent être installés pour le côté SCSS. Sinon, j'ai hâte de vous voir dans le cours et de voir vos progrès. 3. Créer un formulaire de contact: La première chose que nous allons faire pour commencer à créer le formulaire est que nous allons exécuter le serveur de développement maintenant Si vous avez une nouvelle version de Visual Studio Code, par défaut, le plugin de scripts NPM est installé et activé. Et vous pouvez exécuter n'importe quel script NPM que j'ai déjà inclus pour vous avec le bouton Lecture à côté du serveur de développement. Et il y va assez vite par rapport aux autres générateurs de site statiques. Et puis, une fois qu'il a démarré le jeu de développement, mais nous pouvons le voir dans le navigateur en cliquant sur la touche Ctrl. Nous avons un simple site Hugo qui correspond à la page d'accueil. Et j'ai inclus une seule page dont j'ai parlé. Je vais créer une autre page unique, qui sera la page Contact. Nous allons donc fermer ce terminal pour l'instant. Le serveur va continuer à s'exécuter. Si nous entrons dans le contenu et que nous copierons et collerons la page À propos. Et nous allons le renommer en contact. Et c'est pour l'URL. Mais nous devons ensuite renommer le titre de la page pour nous contacter ou ce que vous aimeriez qu'elle soit. Nous allons nous débarrasser d'un sous-titre. En termes de menu vivront dans le Maine mais changera le poids à 30. Par conséquent, le Contact Us paiera à droite de environ. Et nous allons nous débarrasser du texte pour l'instant. Nous allons sauver ça. Maintenant. Nous ne voulons pas qu'elle affiche la page Contactez-nous en utilisant le même code HTML, qui est utilisé pour les pages individuelles car nous voulons également afficher un formulaire. Une façon de le faire est de mendier que le point de contact MD serait le type. Et nous allons le mettre en contact en minuscules. Ensuite, dans le dossier Mises en page, créez un nouveau dossier appelé contact. Et nous allons copier et coller le code HTML à point unique dans le dossier Contact. Dans le navigateur. Vous verrez que nous avons le bouton Menu Nous contacter, mais il n'y a actuellement aucun texte sur la page et nous n'avons pas encore personnalisé le code HTML, alors revenons en arrière pour le faire. Les deux seuls que je vous ai laissé un lien dans la section ressources sur les réformes de cinq pages de bootstrap ont regardé la section mise en page . Si nous faisons défiler vers le bas jusqu'au premier exemple, nous le copierons. Ensuite, dans le contexte unique de ce HTML sous contenu, nous allons le coller dans. Nous devons créer un formulaire. Il suffit de taper la forme et d' émettre écrira le Fourier. Nous n'allons pas encore agir. Et nous allons mettre deux entrées à l'intérieur. Vous pouvez utiliser Alt Control F2, formater le code HTML. Et nous allons le vérifier maintenant dans le navigateur. Cela fonctionne exactement comme prévu. Passons maintenant et mettons en place notre formulaire. Je vais le faire, c'est que je vais me débarrasser de l'étiquette. Et le type de texte est ce dont nous avons besoin. En ce qui concerne la pièce d'identité. ID. Nous appellerons le nom d'entrée, et le détenteur de la place changera en nom. Et puis il faut ajouter aria dash, étiquette. Et c'est pour un lecteur d'écran et des technologies d'assistance , car il n'y a plus d'étiquette pour l'entrée réelle. Il n'y a qu'un espace réservé, et nous le modifierons également en nom. Ensuite, nous devons ajouter un champ de nom réel à l'entrée. Et nous appellerons ça nom. Et cela vous aidera lorsque nous soumettrons le formulaire. Le contenu de cette entrée aura le nom attaché à celui-ci, qui sera nom. Ce que nous allons faire, c'est que nous mettrons en évidence la lame d'électrons. Il copiera ce que nous avons. Nous allons le coller ci-dessous. Celui-ci, nous appellerons un e-mail. Nom. Le type sera le courrier électronique, ce qui aide à la validation. L'ID, nous l' appellerons e-mail d'entrée. Et deux espaces réservés. Si vous utilisez un clic alternatif et que vous les modifiez simultanément, créez l'espace réservé par e-mail. Vous pouvez utiliser Alt Control F pour ranger votre code HTML. Copiera et collera ensuite la première entrée. Collez-le ci-dessous. Et nous allons le changer en sujet. L'objet Inputs modifiera nos deux espaces réservés pour soumettre le nom de l'espace réservé. Et le dernier sera une entrée multiligne. Nous allons donc copier et coller le sujet, l'entrée et le contrôle F pour le nettoyer. Débarrassez-vous de l'entrée et débarrassez-vous également du type. Et nous allons remplacer ces deux-là par une zone de texte. Avant que vous n'oubliiez. À la fin de la balise, vous devez insérer une zone de texte oblique de balises de fermeture. Sinon, cela ne fonctionnera pas et vous devez vous assurer qu'il n'y a pas d'espace entre les balises d'ouverture et de fermeture. Si vous deviez placer une zone de texte sur une nouvelle ligne, vous obtiendrez un tas d'espace entre les deux. Et vous rencontrerez des problèmes avec des textes vierges en place dans votre zone de texte. Nous allons maintenant devoir changer le nom en message, l'ID en message d'entrée. Et nous changerons notre porte-place et notre étiquette Aria-Label en message. Il y a une autre chose que nous pouvons ajouter, c'est Rose. Et nous allons changer cela par quatre pour l'instant. Et nous verrons si nous le verrouillons. Alors sauvegardez-le et nous verrons un coup d'œil dans le navigateur. C'est génial. Essayons maintenant de limiter la largeur, donc elle n'est pas trop large. Si nous voulons aller inspecter, vous verrez qu'il est tout à fait utilisable à cette largeur. Comme il devient de plus en plus large, ce n'est pas pour paraître un peu dérangé. Revenons donc et nous allons mettre en place des lignes et des colonnes. Cela fera donc que nous allons envelopper le formulaire dans une ligne imbriquée et imbriquée et certaines colonnes. Nous allons donc utiliser la ligne de div , puis nous allons activer les clics en pointillés secs. Affichez donc Flex , puis justifiez le contenu. Et puis on va faire Div Dot Col, Mid Six. Nous allons y aller. Ensuite, nous l'appellerons notre formulaire, nous le coupons et le collerons et l'enregistrerons et jetons un coup d'œil. J'ai remarqué quelques choses. Si nous commençons à le ramener à la taille MD, remarquez les formulaires un peu petits. Mais quand on arrive à la grande taille, la taille de six est plutôt bonne. Et nous pourrions également intégrer le titre à cela. Les titres sont donc alignés comme lorsque nous passons en dessous de MD. Ce que nous allons faire, c'est que nous allons faire LG dash six et à gauche appellerons le MD dash neuf. Ensuite, nous allons saisir le titre, le contenu, les placer au-dessus du formulaire, et nous nous débarrassons de la ligne et de la colonne existantes. Mais la façon dont vous structurez votre forme dépend entièrement de vous. Ce n'est qu'une façon d'y penser. Normalement, je mettrais certaines informations de contact à gauche du formulaire s'il s'agit d'un MD ou plus large. Je vais donc le sauvegarder et jeter un coup d'œil dans le navigateur. Si nous passons à la grande taille, vous verrez que nous avons six de la moitié de l'écran, ce qui est génial. Et ensuite, si on le ramène à MD, c'est neuf sur 12. Et ensuite, si nous passons en dessous de MD, nous avons toute la largeur. Si vous regardez Excel, c'est tout. Je pense que c'est génial pour l'instant. La dernière chose que nous allons faire est de créer le bouton Soumettre. Donc, écrire dans le formulaire, mettre un bouton et nous ferons type égal, soumettre et classe. Btn, puis btn dash amorçage, c'est le bouton de base du voyage. Et le texte de Submit. Ensuite, nous allons jeter un coup d' œil à cela dans le navigateur. C'est un bon début pour vous préparer pour la prochaine leçon, nous allons personnaliser un peu plus le formulaire. 4. Personnalisez le formulaire de contact: Créditez donc un formulaire de contact de base. Allons de l'avant maintenant et examinons certaines personnalisations. Eh bien, ce que je trouve vraiment sympa, c'est, et j'ai laissé le lien vers cette page dans la section résultats sous bootstrap cinq formulaires. Nous avons des étiquettes flottantes et voici quelques exemples. Nous avons un espace réservé, mais lorsque vous cliquez à l'intérieur du champ, l'espace réservé diminue et reste visible , ce qui facilite considérablement l'expérience de l' utilisateur. De cette façon, ils n'oublient pas quel est le champ qu'ils tapent. J'ai un exemple ici. Vous devez placer la classe de forme flottante dans la div qui enveloppe l'entrée. Nous devons ensuite mettre notre étiquette après l'entrée. Allons de l'avant et allons le configurer, nous allons copier la classe flottante du formulaire. Exécutez le code HTML à point unique dans le dossier Contact. Nous avons notre première div et nous cliquerons, puis nous cliquerons sur toutes les autres divs du formulaire, et nous allons le coller et mettre un espace pour le formulaire flottant. Ensuite, nous allons cliquer sur la fin de l'entrée. Nous utilisons une étiquette. Dans le domaine quatre. Nous devons copier et coller au niveau Id. Ensuite, nous copierons et collerons de notre espace réservé et nous laisserons l'espace réservé là au cas où il serait nécessaire de recourir au cas où ce CSS n'est pas pris en charge par le navigateur. Et quelque chose que vous pouvez faire, c'est difficile dire si ça va être moins de travail pour vous ou non. Mais si vous placez un identifiant sur l'étiquette et que nous copierons et collerons l' ID à partir de l'entrée. Je vais mettre fin au mot étiqueté. Vous pouvez utiliser aria étiqueté par, et vous pouvez copier et coller dans cet ID. Ensuite, la technologie du lecteur d'écran saura avec certitude que cette étiquette est l' étiquette de l'entrée. n'y a aucun doute là-dessus. Passons à travers et mettons en place le reste. Nous allons donc l'insérer pour obtenir l'étiquette, coller en dessous, puis nous devrons la personnaliser. Il s'agira donc de saisie, d' e-mail, d'entrée, d'e-mail, d'étiquette. Débarrassez-vous de l'étiquette Aria. Le porte-place est le même. Ensuite, nous avons notre sujet. Et pour le dernier, je retournerai simplement sur le site Bootstrap car nous ne pouvons plus utiliser de lignes. Donc, pour les théories technologiques sur un défaut, il y aura la même hauteur qu'une entrée que nous ne voulons pas. Nous voulons que les utilisateurs puissent voir Comme je saisis un message multiligne dans le formulaire de contact. Il est donc dit qu'Il n'utilise pas l'attribut routes. Vous devez définir explicitement un attribut de hauteur, en ligne ou via un CSS personnalisé. Nous avons juste fait la queue pour l'instant. Il est préférable d' utiliser des CSS personnalisés, surtout si votre stratégie de sécurité empêche les styles en ligne. Mais pour l'instant, nous allons simplement utiliser un style. Nous allons copier ce style là-dedans pour la hauteur. Nous allons le coller, puis nous obtiendrons notre étiquette. Étiqueté par étiquette. Les rangées. Il ne fonctionne pas avec le CSS. Nous allons l'enregistrer et nous y jetterons un coup d'œil. Maintenant, nous avons nos champs, ils le sont, mais au-delà de cela, vous devez considérer le look que vous voulez réellement. Mais lorsque vous cliquez dessus, vous remarquerez que l'espace réservé étiqueté diminue. Vous avez donc de l'espace pour saisir votre nom. À titre d'exemple. Nous allons juste corriger l'étiquette du sujet, qui devrait être un message. Jetons un coup d'œil rapide. Maintenant, j'aimerais que ce champ soit plus grand. La meilleure façon de le faire, si vous cliquez avec le bouton droit de la souris et l'inspectez. Nous pouvons voir que nous avons la zone de texte. Vous pouvez réellement double-cliquer et faire en direct dans le navigateur. Par exemple, disons que nous allons essayer 150 PXE et je pense que c'est un bon cœur pour eux. Nous retournerons à Hugo et nous rendrons cela permanent. Nous allons changer notre hauteur à 150 PXE. Maintenant, si, par exemple, vous voulez faire votre CSS, ce que vous pouvez faire est probablement que nous allons le couper et l'enregistrer. Ensuite, nous allons passer au CSS personnalisé. Nous allons le coller dedans. Et la hauteur 150 PXE doit comporter un point-virgule après. Et nous allons copier et coller l'ID du champ. L'identifiant est donc un message d'entrée. Donc, copiez ça. Nous hachons le message d'entrée et cela fonctionne ce qui est chaud là-dedans ? Nous allons enregistrer cela et jeter un coup d'œil dans le navigateur. Maintenant, si vous inspectez, vous verrez qu'il n' y a pas de style en ligne. Nous regardons à droite. Vous remarquerez que nous avons reçu le message d'entrée de hachage qui cible l' idée de message d'entrée. Et la hauteur est fixée à 150. Et c'est notre CSS là-bas. Parce qu'il a obtenu est exécuté comme serveur de développement. Et j'ai configuré CSS pour les cartes sources. Vous pouvez en fait afficher le fichier d'origine ici. Et enfin, nous allons personnaliser si le bouton examinera une autre façon de le faire avec ce piège. Ainsi, en plus de changer primaire en secondaire, nous pouvons également utiliser le contour puis choisir la couleur, par exemple primaire. Nous allons l'enregistrer et jeter un coup d'œil. Et c'est l'option de contour. C'est tout ce que nous allons faire avec la personnalisation pour le moment. Je vous verrai dans la prochaine leçon. 5. Se connecter à API Endpoint: Dans cette leçon, nous cherchons à connecter le formulaire à un point de terminaison d'API. Actuellement, notre action est vide. Je voulais un endroit où envoyer ce formulaire afin qu'il puisse être traité. Ainsi, un e-mail peut être envoyé à vous, la personne qui gère le site Web, afin que vous puissiez recevoir les messages de vos clients. Utiliser le bison pour manipuler les formes. J'y ai laissé un lien dans la section Ressources. Une fois que vous avez cliqué sur le lien et que vous vous êtes inscrit, il y a un formulaire qui a déjà été généré pour vous par défaut, appelé Mon premier de tous Une fois que vous y serez entré, vous verrez un lien sur la droite jusqu'au point final. Copiez ça. Ensuite, nous allons entrer dans l' action de formulaire et le coller là-dedans. Et nous avons besoin d'une méthode pour le formulaire et en majuscules pour le mettre en poste. Nous allons sauver ça. Voici donc notre formulaire. Mettons quelques données de test. Et nous allons appuyer sur Submit et cela sera envoyé au point de terminaison. Puis il redirige vers une page de bassin en disant : merci pour le message. Ensuite, allez dans le bassin. Vous pouvez voir que le message lui-même est arrivé et nous pouvons le regarder ici. Pour l'instant. Je vais juste le supprimer. Par défaut, l'e-mail vous sera envoyé avec l'adresse que vous avez fournie. Vous pouvez également modifier le nom du destinataire des e-mails qui vous sont envoyés. Vous pouvez également changer de sujet. C'est drôle, je vais juste le laisser aux valeurs par défaut. Je vous verrai dans la prochaine leçon. 6. Détection du spam: La première chose que nous devons faire en matière de spam, passons dans le formulaire et nous allons configurer Google recapture. Lorsque vous accédez aux paramètres puis au spam. Et vous devez activer la récupération , puis lire les documents. Cliquez donc sur Lire les conduits. Et pour la capture de la brasserie, vous devez utiliser la clé de site de récupération suivante. Vous ne pouvez pas utiliser votre propre clé de G, c'est cela, ce qui facilite la tâche d'une certaine manière car cela signifie qu'elle est facile à configurer. Je vais suivre les instructions des fournisseurs de bassins. C'est probablement le moyen le plus simple d'utiliser Google. récupération est la première chose à faire, c'est que nous copierons et collerons le script. Je le placerai sous le formulaire. Juste sous le formulaire où vous pouvez le placer dans la section si vous le souhaitez. Je vais dire que c'est du HTML valide. En fait, je vais sauter la deuxième étape parce que nous utiliserons la recapture invisible. Passez directement à la troisième étape. Je dois m'assurer que vous avez activé requiert recapture, que nous avons activé et que nous sauvegarderons ces modifications. Et je préfère utiliser la récupération invisible. Faites en sorte que cela arrive. Vous devez insérer des scripts puis un bouton. Copie qui additionnerait le script. Et nous allons copier les boutons. Ce n'est pas vraiment un bouton d'envoi, c'est un bouton qui appelle recapture. Ensuite, recapture appellera ce script qui soumettra manuellement votre formulaire. Nous allons donc mettre ça en place dans le script. Commentez donc le bouton d'origine en le masquant et en utilisant Control ou Command K, C, où vous pouvez principalement insérer le commentaire HTML si vous le souhaitez. Ensuite, nous allons coller notre nouveau bouton, qui appelle Google recapture. Maintenant, pour que la fonction d'envoi fonctionne, il est actuellement à la recherche d'un formulaire avec l'ID du formulaire de recapture invisible. Et nous n'avions pas ça. Donc ce que nous allons faire, c'est que nous allons soutenir cela et nous le changerons en contact JS Daesh pour la raison pour laquelle j'ai mis un tiret JS. Le début est que je sais que lorsque je dis le formulaire et qu'il a l'identifiant du formulaire de contact, je sais que si je change l'ID de ce formulaire, je vais avoir un problème JavaScript. Donc j'avais toujours l' habitude de préfixer toutes mes idées qui se rapportent uniquement à JavaScript. Ensuite, nous mettrons en surbrillance l' ID et nous le copierons. Et nous allons faire défiler jusqu'au formulaire. Et nous allons mettre une pièce d'identité égale. Et ensuite, on peut coller ça. Nous sauvegarderons cela, et nous allons jeter un coup d'œil dans le navigateur. Donc, nous pouvons régler quelques choses ici. La première chose à faire est le budget de récupération Google par défaut pour voir qu' il est désactivé à droite. Vous pouvez le définir de droite à gauche. Nous allons simplement supprimer la propriété, donc elle est par défaut à droite. Et nous allons également styliser notre bouton de soumission. Alors, faisons-le. Vous pouvez donc voir le badge de données en ligne. Débarrassons-nous complètement de ça. Ensuite, ce que nous allons faire, c'est que nous allons passer à la classe et nous ajouterons btn et btn outline primaire ou n'importe quelle classe Bootstrap vous souhaitez ajouter au style de votre bouton. Nous allons donc sauvegarder cela et je vais regarder dans le navigateur, juste mieux maintenant avec le badge caché à droite et notre bouton de soumission, mettons quelques données dans, voyons ça fonctionne. Généralement, vous allez interroger pour cliquer sur la photo. Si vous effectuez un test à partir d'un hôte local , notre soumission est passée. pense qu'ils peuvent faire, c'est un pot de miel. Un pot de miel est un champ de saisie pour vos quatre personnes, qui est masqué pour les utilisateurs humains, mais généralement pas caché pour les robots de spam. Certains robots de spam peuvent se rendre compte qu'il est caché, mais ce qui se passe est facile pour le spam bot de mettre des données dans ce champ et d'appuyer sur envoyer, puis utiliser bassin ne va pas transférer cette formule dans votre e- adresse mail parce qu'il est assez évident que c'est un bot parce que les humains ne peuvent rien mettre physiquement dans ce domaine. Vous contrôlez le clic sur le bouton Lire les documents. Vous remarquerez que nous devons mettre un nom de soulignement. Gotcha. Et nous allons simplement faire défiler vers le bas jusqu' à l'option « pot de miel ». Le type sera masqué et le nom sera gotcha. Nous allons donc cliquer dessus avec le bouton droit de la souris et le copier dans votre formulaire et le coller. Gardez-le. Et vous avez activé automatiquement une protection pour le pot de miel . Dès que le bot a mis quelque chose dans ce domaine, il ne va pas passer, pas garanti de fonctionner, mais cela ne fait pas de mal de l' inclure en option. 7. Validation de formes: Regardez la validation du formulaire pour le moment, rien n'empêche l'utilisateur de soumettre le formulaire. Lorsqu'ils n'ont pas rempli certains champs, je peux simplement cliquer sur Soumettre et partir de là. Et il sera envoyé et vous obtiendrez un formulaire vierge. Nous allons donc jeter un coup d'œil à la façon dont nous allons gérer cela dans le navigateur. Nous ne pouvons pas le gérer d'un point de vue extérieur car cela est géré par le point de terminaison lequel nous n' avons pas le contrôle. Ce que nous pouvons contrôler ce qui se passe dans le navigateur. Revenons donc dans le code Visual Studio. Nous sommes donc dans le code HTML singulier du dossier de contenu. Ce que nous allons faire, c'est que nous allons parcourir chaque champ et nous assurer que vous examinez la balise d'entrée réelle. Chaque champ que vous souhaitez être requis, ce que vous faites c'est que vous contrôlez le clic dans ce champ, fera également la zone de ticks. Nous avons mis dans la propriété requise. Ensuite, nous le sauvegarderons. Ce que nous faisons ici, c'est que nous utilisons chaque mécanisme inclus dans les navigateurs pour exiger des entrées. Il dépend donc du navigateur. Si l'utilisateur dispose d'un ancien navigateur, il ne va pas l'arrêter. Le problème que nous avons, c'est que nous avons un bouton Soumettre dans ce formulaire. Nous avons un bouton qu'il appelle sur le script de recapture. En fait, nous ne soumettons pas le formulaire directement à l'aide de la fonctionnalité intégrée du navigateur. Ce que nous allons faire, c'est que nous commenterons notre bouton modifié avec le contrôle Casey. Ensuite, nous décommenterons le bouton d'origine avec Control K. Vous l'enregistrerez et nous verrons un coup d'œil dans le navigateur. Maintenant, si nous cliquons sur le bouton Soumettre , un avertissement va apparaître, car disons, par exemple , que nous avons mis un nom, puis demandé le suivant , etc. Jetons maintenant un coup d'œil à la modification de notre code pour que nous utilisions réellement Google recapture. Ainsi, pour que Google recapture fonctionne parallèlement à la validation, car Google recapture est JavaScript et remplace la fonction d'envoi par défaut dans le navigateur. Nous allons devoir utiliser la validation JavaScript. Maintenant, j'ai laissé le lien vers la page de documentation Bootstrap pour validation. Faites défiler vers le bas Il y a des styles personnalisés que nous allons réellement utiliser. Et cela utilise Bootstrap pour styliser le formulaire en cas de succès ou de problème. Si vous faites défiler jusqu' à la suivante, vous verrez la valeur par défaut du navigateur, qui ne fera que regarder, nous allons faire mieux que ça. Styles personnalisés. Ce que nous devons faire, tout d'abord, c'est que nous avons besoin de la validation de la classe des besoins sur le formulaire. Ensuite, nous avons besoin de la propriété Novalidate. La propriété indique au navigateur ne pas utiliser sa validation intégrée. Et la validation des besoins que nous utiliserons sera pour l'état, qu'il soit validé ou non. Et le fait qu'il doit être validé avec Bootstrap. Nous allons donc copier la classe et la propriété novalidate. Et ensuite, pour le formulaire, placer une classe est égal à une validation. Et nous n'avons pas de validation. Nous devons ensuite ajouter du JavaScript. Nous possédons déjà les propriétés requises pour chacun des champs. Vous faites défiler vers le bas, nous avons du JavaScript de base pour commencer, donc nous allons le copier. Ensuite, nous le collerons sous le code de récupération Google. Ce que cela fait est la première chose à faire, c' est que nous sélectionnons chaque formulaire de la page qui comporte une classe de validation des besoins pour chacun de ces formulaires. Et c'est ce que le point de tableau FoReach est quatre, nous exécutons la fonction et il écoute le bouton Submit. Nous avons donc actuellement un bouton d'envoi standard. Ce que nous allons faire, c'est que nous allons simplement ajouter un commentaire sur leurs écoutes pour soumettre un événement sur formulaire. Ensuite, si le formulaire n'a pas réussi la validation, nous allons arrêter par défaut, soumettre plus lourd. Et s'il est passé, il se soumettra normalement. Ensuite, nous allons ajouter une classe pour afficher l' état de validation des champs qui se produisent indépendamment. Nous sauvegarderons cela et nous allons jeter un coup d'œil dans le navigateur. C'est donc un formulaire de contact. Nous ajouterons un nom , puis nous appuierons sur « soumettre ». Et ce qu'il fait, c'est qu'il empêche la sommation de se produire. C'est dire que nous devons remplir ces trois éléments. Nous le ferons, c'est que nous le mettrons dans un e-mail douteux sans l'extérieur et aucun .com ne sera mis dans un sujet et un message. Vous verrez que ce n'est toujours pas content car nous n' avons pas d'adresse e-mail correctement formatée. Nous ferons donc des courriels sur domain.com et nous le remarquerons même avec la vérification de réussite de la maintenance. Ensuite, nous pouvons cliquer sur Soumettre. Mais installons-le maintenant afin d' intégrer la récupération dans le formulaire lui-même. La première chose que nous allons faire, c'est que nous allons apporter de légères modifications à ce code d'amorçage. Le JavaScript Bootstrap cible peut-être plusieurs formulaires et nous ne voulons cibler qu'un seul pour moi car je suis le seul formulaire qui travaillera avec la recapture. Ici, nous avons des formulaires var égaux et c'est tous les formulaires nécessitant une validation, ce que nous ferons à la place, c'est que nous ferons des formes égales. Et puis nous utilisons ce code ici, document.getElementByID et le formulaire de contact JS. Et nous allons juste mettre des adolescents célibataires tout à fait cohérents avec le style. Mettez un point-virgule. Ensuite, nous avons un prototype de redot Slashdot. Et c'est pour les formulaires pour huit exemplaires sûrs pour chacun des formulaires. Mais cette fois, nous allons juste appeler la fonction. Pour le formulaire unique. Nous allons le faire, c'est que nous avons déjà utilisé le formulaire variable. Pour chaque itération. Nous avons créé notre nouvelle variable appelée formulaires. Tout ce que nous voulons faire, c'est enlever la boucle, nous débarrasser de cette ligne aussi. Ensuite, Alt Shift F pour reformater, et nous sauvegarderons cela. Et nous allons jeter un coup d'œil dans le navigateur. Pour les tests de base, nous appuyons sur le bouton Soumettre et vous verrez que nous continuons de cibler le formulaire et que nous suivons toujours les mêmes étapes, mais ce n'est que pour le formulaire unique. Passons maintenant et reprenons les choses. Le moment est que le formulaire n'a pas été validé. Nous empêchons la fonction d' envoi par défaut d'y fonctionner. Seul le formulaire a été validé. Il se soumet simplement normalement. Nous voulons toujours empêcher le fonctionnement de la fonction d'envoi par défaut. Nous allons donc copier ces lignes. Nous les collerons et copierons également notre commentaire. Et collez ça dedans. À l'origine. Ce contrôle s'est produit. Tout d'abord, il a la validation de la passe de formulaire. Mais maintenant, nous voulons arrêter la soumission dans tous les cas, nous voulons afficher le statut de validation. Ensuite, nous voulons vérifier la validation de la forme polaire. Et si c'est le cas, nous voulons passer par le processus de récupération Google et, en fin de compte, l'envoi de formulaires. Donc, ce que nous allons faire, c'est que nous allons couper ça. Nous allons le coller ci-dessous. Si le formulaire a réussi la validation, nous éliminerons le point d'exclamation. Je vais m'en débarrasser. Je vais faire un commentaire sur la récupération du charbon pour vérification et soumission. Nous sauvegarderons cela et nous vérifierons rapidement le navigateur pour nous assurer que tout fonctionne comme prévu. De toute évidence, il ne s' appellera pas recapturer et il ne va pas soumettre notre formulaire. Il nous dit actuellement qu'il y a des problèmes. Nous allons mettre des données et cliquer sur Soumettre. Et évidemment, cela ne fonctionne pas, mais c'est validant comme nous le souhaitons. Comme vous pouvez le constater, il n'est pas passé par le processus du sommet. Et c'est parce que nous n'avons pas encore mis en place, jusqu' à présent, tout va bien. Passons maintenant et mettons en place la recapture, mais j'adore créer un lien vers Google recapture des canaux invisibles dans la section des résultats. Il s'agit d'un exemple en bas de la page. Pour invoquer la récupération après validation côté client, nous allons utiliser une partie de cela. Nous allons d'abord utiliser la div. Nous mettons à l'intérieur du formulaire. Nous passons dans notre forme. Et après notre dernière entrée, nous allons coller ça dans. Nous devons obtenir la clé du site. Copiez ça. Collez-le à l'endroit où il indique la touche SART. Nous n'avons pas à nous soucier des scripts onload car nous le faisons déjà avec Bootstrap. Et ce que fait le script en ligne ici , c'est qu'il dit que lorsque vous cliquez sur le bouton Soumettre, vous devez valider ce que nous gérons déjà. Mais ce qui est important, c'est que nous avons l'appel à l'exécution de points capturés grecs si la validation réussit. Nous allons donc copier ça. Et nous allons faire défiler vers le bas jusqu'à notre code Bootstrap. Et nous avons ici appelé recapture et vérification et soumission. Ensuite, nous devons dire que recapturer ce qu'il faut faire. Une fois que le contrôle a eu lieu. Ici, dans notre div de recapture, nous avons des données sur le rappel est en cours de soumission. Si vous redescendez, nous sommes sur soumission. Et ce que cela fait, c'est qu'il reçoit le formulaire et qu'il le soumet. Nous revenons donc à notre code et nous y ajouterons un petit commentaire. Recapturez les appels sur Soumettre après vérification. Nous sauterons cette ligne indiquant « stop default », AVX. C'est un peu trompeur. Nous avons pleuré. Il va faire un commentaire. De l'or par recapture. Soumet le formulaire, mais pas via le navigateur par défaut. Alors sauvegardez-le et nous allons le vérifier dans le navigateur. Je mets un nom, un e-mail, domain.com. Vous devez en fait mettre le .com sous forme. Spree n'a pas d'erreur. Puis j'ai eu des sujets. Nous allons l'extraire lors de la soumission, puis un message. Parce que nous faisons de l'hôte local et que nous en avons soumis pas mal de prêts. Cela va nous défier, ce qui est génial. Cela signifie qu'il fonctionne correctement. La dernière chose que nous allons faire, c'est que nous allons obtenir tous ces JavaScript et les insérer dans un fichier JavaScript. Cela facilite grandement le débogage. Mettez donc tout en évidence là-dedans. Ensuite, nous allons entrer dans les ressources dans JS et nous créerons un fichier appelé contact dot js. Nous allons coller ça et l'enregistrer. Nous pouvons nous en débarrasser. Mais nous devons nous assurer que le script est chargé pour cette page particulière. La façon dont nous allons le faire, car nous ne travaillons pas à partir d' un dossier statique. Nous utilisons ES build, que j'ai configuré par défaut pour vous. Vous pouvez entrer dans les partiels, puis dans le dossier Script. Et c'est là que nous chargeons le fichier JS principal. Maintenant, nous devons le faire si EQ point au-dessus du T majuscule et le haut sera contact. Nous allons mettre notre apport et tout de suite. Nous pouvons ensuite copier et coller ce code et il contactera ab.js , puis nous nettoierons le fichier JavaScript. La première chose est que la fonction onsubmit ne fonctionnera pas car recapture ne pourra pas accéder à la fonction à partir de ce fichier pour créer une variable et la lier à la fenêtre. Donc, la fenêtre, le point sur la soumission est égal. Je vais faire de ça une fonction flèche. Et nous référençons le même élément que celui que nous faisons ici, nous ajoutons l'écouteur d'événements. Ce que nous pouvons faire, c'est que nous pouvons saisir cette variable. Je vais le mettre en haut de l'écran. Et puis nous pouvons simplement exécuter le point de soumission formé. Est-ce que j'utiliserais strict en haut de la page ? Et ensuite, nous allons nous débarrasser de la fonction d' auto-initialisation parce que cela ne fonctionnera pas non plus. Et nous allons faire le contrôle. Alt Shift F pour reformater. Et si vous le souhaitez, vous pouvez créer une fonction d'erreur ici pour dire que si vous courez un hiver, par exemple Eastland, il y aura probablement une erreur car vous n'utilisez pas de jeton. Vous pouvez donc le retirer. Et pour éviter la confusion, on changera lors de l'envoi à la fonction Submit car onsubmit pourrait poser un problème. Et nous reviendrons à notre code HTML à point unique, qui le modifie en formulaire de soumission. C'est la fonction qui sera appelée. Et cela sauvera cela. Ensuite, nous allons jeter un coup d'œil dans le navigateur. Alors mettez un peu d'escroquerie à un JS externe. C'est pourquoi, si vous avez des questions sur façon dont nous exécutons le code ASP pour compiler ce fichier JavaScript. J'ai tout un cours sur Hugo appelé la construction de JavaScript avec vous. Et vous avez tout au long du processus de configuration d' AS build avec Hugo et vous m'avez basculé navigateurs Craig et tous les paramètres pour les environnements de développement et de production. Si vous vérifiez cela, vous traverserez l'ensemble du processus étape par étape. Maintenant, je dis que vous pouvez être configuré avec AS build afin que vous puissiez le personnaliser selon vos besoins. Je vous verrai dans la prochaine leçon. 8. Soumission du formulaire AJAX (aucune page de rechargement): Donc, nous essayons de faire ici avec ajax, c'est essayer de soumettre le formulaire, mais sans rafraîchir la page et soumettre de cette façon, c'est une expérience beaucoup plus simplifiée pour l'utilisateur. Et nous savons qu'ils restent définitivement sur notre page et nous n' allons pas les perdre. Et nous pouvons leur fournir des commentaires beaucoup plus rapides. Les options pour fournir des commentaires. Je suis très bien si vous gérez votre propre point de terminaison, mais si nous travaillons avec quelqu'un d'autre, il y a un peu simple, mais c'est bon. Commençons donc. La première chose que nous allons faire, c'est que nous allons désactiver les formulaires de moi parce que je ne vais pas soumettre avec le navigateur. Merci, nous allons le faire, c'est que nous allons aller chercher toutes les données du formulaire. Nous avons donc mis un commentaire dans obtenir des données de formulaire. Ainsi, les données du formulaire const sont égales aux nouvelles données de formulaire avec F majuscule, D majuscule et nous allons les extraire d'un formulaire. Et nous allons changer notre variable de forme en constante. Ce que nous allons faire, c'est de créer une nouvelle instance ECS. Nous constituons XHR, qui est la nouvelle requête HTTP XML. Ensuite, nous le ferons, nous commencerons à travailler avec XHR. La première chose que nous allons faire est d'ouvrir dans Configurer XHR, XHR open. Et nous devons utiliser les méthodes pour pouvoir l'extraire du code HTML. Nous formons donc la méthode point, c'est la méthode que nous avons déjà définie sur le formulaire. Et l'ARO sera en forme. Action. Vous avez choisi le code HTML, vous verrez votre action à partir du formulaire et vous allez envoyer des données à partir du formulaire. Nous avons donc des points XHR , puis nous allons envoyer les données du formulaire. Maintenant, c'est un synchrone, donc il va être envoyé tout de suite. Il en enverra un, il est prêt à le faire, mais nous avons mis cette commande là-dedans . Il est donc prêt à partir. Il définira le délai d'attente de huit secondes. Xhr dot est égal à ce n'est pas le cas. Vous pouvez changer cela. Et ils vont s'arrêter. Donc, le XHR est à l'heure. Nous allons créer une fonction flèche. Ensuite, nous allons faire une erreur de console. Dites toujours le délai d'attente. Nous pouvons donc déboguer le cas échéant. C'est là que ça devient intéressant. Traditionnellement, vous feriez le téléchargement de points XHR. Vous recherchez ensuite HTTP Two 100. Sinon, vous regardez une erreur HTTP et vous avez également XHR point on era. C'est pour votre arrogant XHR. Ce que nous pouvons faire, c'est que nous le ferons sur le chargement fini puis incluons des flèches. C'est donc le point XHR à l'extrémité de chargement. C'est donc comme le déchargement et l'ère on. Nous allons créer une fonction anonyme. Donc, d'une manière générale, vous vouliez filtrer si nous connaissons notre succès ou notre échec HTTP. L'échec signifie généralement que vous avez l'URL erronée ou que le service est en panne et autres. La façon dont nous faisons cela est si état des points XHR et, par exemple, si n est égal à 200. Vous avez ensuite obtenu le succès de l'ATP. Et autre exemple 44 non trouvé. L'ère Http. Vous pouvez maintenant obtenir quelques statuts différents, de 200 à 299 plus 304. Nous allons donc faire plus ou égales à 200. Et l'état des points XHR est inférieur à 300. Et le tout avec un double tube qui se déplace et la vanne K en état XHR est égal à 304. Jetons un coup d'œil aux documents car pour ce point de terminaison particulier, nous pouvons en fait rester un peu plus simple. Voici donc comment cela fonctionne. Ils ont des codes et, par exemple, statut http de 200, qui est un code d'accès AC. Ils nous ont également donné du texte de réponse et il est codé en JSON. Et cela aura du succès, c'est vrai. Ce qui nous indique que tous les champs sont corrects, API sont satisfaites et que les e-mails sont envoyés. Nous pouvons donc placer ces commentaires sur le formulaire jusqu'à ce que l'utilisateur ait réussi votre soumission. Merci beaucoup. Nous vous enverrons un e-mail. Si nous obtenons une ère réactive, comme tous sont livrés avec des messages personnalisés, ce qui est génial car il vous montre un peu plus d' informations sur l'erreur. Mais ils ont également un code d'erreur HTTP qui leur est attaché. Vous avez donc obtenu un transfert HTTP réussi, mais ils attachent votre code d'erreur HTTP pour cette raison, nous n'allons pas filtrer en fonction de HTTP. Parce que nous avons deux codes, les mêmes mais des erreurs différentes. Nous sommes juste un peu filtrés en fonction des codes d'erreur. Allons-y et faisons-le. Nous allons le faire, c'est que nous mettrons en évidence toute la fin du chargement. Nous allons le copier, le coller ci-dessous, commenter, le filtrage d'état HTTP. Et ensuite, nous commencerons à nouveau. La première chose que nous allons faire est de transmettre le texte de réponse. Nous allons donc faire une réponse const égale à Jason et des majuscules. Et nous allons passer la réponse au point XHR. Si la réponse est un succès. Et cela implique que c'est vrai. Nous allons faire le journal des points de console juste pour l'instant. Ces excès. Et ensuite, nous ferons d'autre chose. Si la réponse est sombre, ère, vendue, connectez-vous, revenez, cochez. Et puis quand le signe du dollar et les accolades frisées répondent .data. Vous pouvez donc obtenir le message d'erreur. Nous mettons un deux-points , puis nous faisons un autre. Si aucune erreur n'est fournie. Console.log. Une nouvelle ère, qui n' arrivera probablement pas à trouver. A moins que quelque chose de terrible ne va pas. Nous sauvegarderons cela et nous allons jeter un coup d'œil dans le navigateur. Cliquez avec le bouton droit de la souris et inspectez-le pour vous assurer, si vous payez le quai à gauche ou à droite. Vous pouvez donc voir complètement le formulaire. Nous allons mettre quelques détails dans la console. Il devrait y avoir un succès qui fonctionne correctement. C'est la technologie T a détecté le succès vrai. C'est donc une erreur. Maintenant, je vais y retourner et nous allons ajouter un chiffre supplémentaire à l'URL du point de terminaison et l' enregistrer et aller dans le navigateur. Nous allons essayer ça. Et nous avons maintenant ce message qui revient. Et nous avons mis ce texte en nous-mêmes, à l'époque Jason. Il est maintenant prêt à configurer certains messages pour l'utilisateur. Avant que continuer ne retire ce 0, celui de l' action de formulaire sera supplémentaire, juste pour s'assurer qu'il fonctionne correctement maintenant, nous allons le faire, nous allons désactiver le formulaire. Il ne peut donc être activé que si JavaScript est présent. Deux qui lui donneront une pièce d'identité pour commencer. Nous allons l'appeler JS dash, soumettre et tous désactivés, le formulaire avec la propriété de handicapé. De cette façon, il est désactivé par défaut. Ajoutera ensuite un script sans script. Je suis Todd, le formulaire. JavaScript est capable de soumettre ce formulaire, va mettre ce bouton Danny. C'est donc un peu évident car le bouton sera désactivé. Message là-dedans. Très bien, alors il va falloir y aller et activer. Il est dit que nous devons cibler le bouton. Donc const submit, bouton est égal au point de document, obtient élément par ID. Et restez en planque, soumettez-vous. Ensuite, envoyez les points de bouton, désactivé est faux. Nous commenterons les charges JavaScript. Jetons un coup d'œil. Nous avons donc une propriété handicapée sur le formulaire. Je vais dans les zones de la console, donc le bouton Envoyer fonctionne réellement. Essayons de désactiver JavaScript. Nous allons donc passer à des commandes exécutées comme Java, puis désactiverons JavaScript. Et le contrôle va voir qu'un bouton est désactivé et vous devez activer JavaScript pour envoyer ce formulaire. Il suffit donc de renommer JavaScript. Je suis prêt à commencer à travailler sur nos messages. Créez donc notre spinner de chargement. Surtout, nous allons faire une variable de crédit, point de document, une écriture, un élément , une div, créer un ID pour cela. Donc doc id est égal à b maintenant, et nous allons ajouter quelques classes. Donc spinner dot class, list, dot, add, do, spinner, dash, border, et d, aucun pour le cacher. Ensuite, nous l' ajouterons au formulaire. Donc, le point de forme Pinchot et nous ajouterons, ça a été un début. Nous allons nous débarrasser de l'écran, aucun, juste pour le voir là. Il y a un spina assis là et nous allons le désactiver par défaut. Ensuite, nous créerons notre message. Je ne peux pas documenter le moment sombre avant la div. Laissez le point du corps du point plus ce point ajouter. Laissez-le pour l'instant. Un nouveau pour les tests. Nous allons donc faire des alertes. Allons accéder à l'enfant. Et nous reviendrons rapidement dans notre formulaire et nous allons sur le bouton NB pour examiner cela. Ça a l'air bien. Nous supprimons donc la classe de succès car elle dépend de l'état du message. Et nous allons cacher ces deux éléments pour l'instant. Donc D None. Très bien, nous sommes prêts à commencer. Ensuite, ce que nous allons faire, c'est que nous créerons nos icônes de fonction pour manquer h est égal à Great et fonction flèche. Et ses propriétés que nous pouvons apporter seront le statut et le texte de statut. Et nous commencerons par le message de réussite. Ces vrais textes seront que votre message vous a été renvoyé sous peu. Écrivez notre fonction. Donc, nous devons d'abord vérifier l'état. Donc, si le statut est égal à vrai, classez ce point et accédons au point de liste de classes. Ajoutez du danger. Nous allons ajouter le code HTML. Et nous allons jeter un coup d'œil. En quoi consiste l'inflation ? Elle a dit, et je reviendrai vers vous sous peu. La filière n'a même pas été aussi rapide que ça ? Voyons maintenant s'il échoue. Donc, dans notre fausse copie, cette chaîne littérale avec des tiques arrière, époque. Et ensuite, pour l' ère générique, cette ligne. Cette fois, nous le ferons plus tard. Nous allons aller jusqu'à notre délai d'attente. Jetez un coup d'œil. Alors vieux truc, on ajoute un chiffre et on obtient l'erreur. Maintenant, nous devons réinitialiser le formulaire après que cela ait eu lieu, qu'il s'agisse d'un succès ou d'un fichier, je veux réinitialiser le formulaire pour que nous puissions recommencer et que la reprise puisse recommencer. On y est. Réinitialiser le formulaire créera la fonction. La première chose que nous allons faire, c'est de réinitialiser le contenu du formulaire. Réinitialisation des points de formulaire, validation des ensembles, statut, sss, liste de classes de points, validé. Débarrassez-vous de tous les CSS que nous venons d'ajouter ici. Puis réinitialisez pour récupérer. Tout comme Hey, nous avons utilisé Jewry capturé, exécutez des points de recapture s'il vous plaît G. Nous avons dit, enregistrez cela et jetez un coup d'œil dans le navigateur. J'ai mis quelques détails et je soumets. Et nous avons réinitialisé le formulaire. Récapitulatif, il suffit de lancer une erreur, ce qu'il fait occasionnellement, mais ça fonctionne toujours. Tout va bien. Nous allons maintenant supprimer tous les console.logs. Maintenant que nous avons fini de le tester, nous devons montrer la rotation de toutes les formes d'éclairage , puis masquer le spinner lorsque le formulaire a terminé le chargement. Donc, lorsque le bouton de soumission du formulaire était trop impressionné et que Google recapture a donné l'accord, et que nous savons que le formulaire de soumission est appelé, supprimera alors le doyen non classe du spinner. Ce que nous pouvons faire, c'est que nous pouvons copier la ligne pour l'ajouter. La classe va retirer le tour réel d'une bordure et va changer, ajouter pour supprimer. Et on va encore faire la une des journaux. Nous allons passer à la section des messages et nous supprimerons le spinner en le masquant là. Essayons ça. Donnez donc quelques détails. tendance à tourner et à tourner cette période lorsque le message d'état est revenu. Donc, ça fonctionne très bien. Assurez-vous de tester soigneusement le formulaire pour tous les cas d'utilisation et tous les scénarios d'erreur. Avant vous. Sur un site de production, vous avez des questions ou des commentaires, veuillez les laisser dans la section de discussion ci-dessous. Je suis heureux de vous aider. Votre meilleure option est de télécharger votre code sur GitHub, puis de me laisser un lien vers le code. Et je regrette de vous dire quelques captures d'écran de formulaires de crédit que vous avez faites dans la section projet.