Comment créer un formulaire de contact avec next.js et netlify

Créez des formulaires de contact efficaces avec Next.js et Netlify et intégrer une puissante détection de spam! Cet article vous guidera pour créer un formulaire de contact avec une page de confirmation et utiliser les capacités intégrées de Netlify pour améliorer les capacités anti-spam.

Next.js est un puissant cadre de réaction qui peut créer des applications REACT à haute performance et évolutives. Combiné avec Netlify, vous pouvez rapidement créer un formulaire de contact sans écrire de code côté serveur.

Les formulaires Netlify sont pratiques à configurer et la version gratuite est disponible (chaque site Netlify peut soumettre un formulaire jusqu'à 100 fois gratuits). Les formulaires soumis sont automatiquement transmis par le filtre de spam intégré de Netlify (à l'aide d'Akismet) et offrent une variété d'options de configuration pour améliorer la détection du spam.

Créer un formulaire de contact

Dans l'application suivante.js, créez un composant ContactForm pour rendre des formulaires sur la page de contact. Si vous souhaitez que le formulaire soit rendu sous le chemin /contact , vous devez utiliser le composant ContactForm suivant dans pages/contact.js , y compris les balises et les champs d'entrée:

 const Contactform = (/ * code voir * / ci-dessous);

L'extrait de code suivant crée un formulaire avec le nom, l'entreprise, les e-mails et les champs de messages, et un bouton de soumission. Après avoir soumis le formulaire, il sera redirigé vers /contact/?success=true en fonction de la valeur d'attribut d' action du formulaire. Actuellement, il n'y a aucune différence dans l'apparence de la page lorsqu'il est livré avec et sans paramètres de success , et nous le mettrons à jour plus tard.

Le fichier Contact.js actuel est le suivant:

 importer réagir à partir de "réagir";
const ContactPage = () => {
 const Contactform = (/ * code dans l'extrait de code ci-dessus * /)

 Retour (
   <div>
     <h1>Contactez-nous</h1>
     {ContactForm}
   </div>
 ));
};

Exporter ContactPage par défaut;

Une fois que nous avons terminé la configuration du formulaire de base, nous devons ajouter des informations afin que Netlify reconnaisse automatiquement le formulaire dans les futurs déploiements de sites. Pour ce faire, vous devez mettre à jour le formulaire, ajouter data-netlify="true" et un champ de saisie caché contenant le nom du formulaire. Dans le tableau de bord Netlify, accédez à votre site et cliquez sur l'onglet Formulaires pour afficher la réponse du formulaire en fonction du nom défini dans le champ caché. Surtout, s'il existe plusieurs formulaires sur le site, vous devez définir un nom unique pour chaque formulaire afin que Netlify enregistre correctement.

 {/ * Voir ci-dessous pour le code * /}

Après avoir réussi à déployer le site sur Netlify et à ajouter l'attribut data-netlify et le champ form-name , vous pouvez accéder au site déployé et remplir le formulaire. Après avoir soumis le formulaire, accédez à https://app.netlify.com/sites/site-name/forms (où site-name est le nom de votre site), et si le formulaire est défini avec succès, le dernier historique de soumission de formulaire doit être affiché.

Rediriger vers la page de confirmation

Pour améliorer l'expérience utilisateur, nous devons ajouter une logique pour rediriger vers la page de confirmation après la soumission du formulaire lorsque l'URL passe à /contact/?success=true . Vous pouvez également choisir de rediriger vers une page complètement différente lorsque le formulaire est soumis, mais l'utilisation des paramètres de requête peut utiliser le routeur suivant pour obtenir un effet similaire. Nous pouvons créer une nouvelle variable pour déterminer la visibilité de la page de confirmation ou du formulaire en fonction des paramètres de requête. Vous pouvez utiliser le next/router import { useRouter } from "next/router"; pour récupérer les paramètres de requête actuels.

 const Router = userouter ();
constations confirmationsCreenVisible = router.Query? .Success && router.query.success === "true";

Dans cet exemple, il n'est pas possible d'être visible sur la page et le formulaire en même temps;

 const FormVisible =! ConfirmationsCreenVisible;

Pour donner aux utilisateurs la possibilité de soumettre à soumettre le formulaire, vous pouvez ajouter un bouton à la page de confirmation pour réinitialiser le formulaire en effaçant les paramètres de requête. L'utilisation router.replace (plutôt que router.push ) met non seulement à jour la page, mais remplace également la page actuelle par une version qui ne contient pas de paramètres de requête.

 router.replace ("/ contact", undefined, {peu profond: true})

Nous pouvons alors rendre le formulaire conditionnellement en fonction de la visible ou non:

 {FormVisible?

Sur la base de ce qui précède, nous pouvons utiliser le code suivant pour rendre le formulaire conditionnellement en fonction des paramètres de requête (mis à jour lorsque le formulaire est soumis):

 Importer React, {UseState} de "React";
Importer {userouter} à partir de "Suivant / Router";

const ContactPage = () => {
 const [soumitterName, setSubmitTername] = UseState ("");
 const Router = userouter ();
 constations de constantscreenvisible =
   router.query? .success && router.query.success === "true";
 const FormVisible =! ConfirmationsCreenVisible;

 const ConfirmationMessage = (
   
     
Merci d'avoir soumis le formulaire. Nous vous contacterons dans les 24 à 48 heures.
      router.replace ("/ contact", undefined, {peu profond: true})}> soumettre une autre réponse
   
 ));

 const Contactform = (/ * code dans le premier exemple de code * /);

 Retour (
   

     
Contactez-nous
     {FormVisible?
   
 ));
};

Exporter ContactPage par défaut;

Ajouter des champs de robot cachés

Maintenant que la fonctionnalité principale du formulaire est terminée, nous pouvons ajouter une détection de spam supplémentaire au formulaire en plus de l'Akismet inclus par défaut. Cette fonctionnalité peut être activée en ajoutant data-netlify-honeypot="bot-field" au formulaire.

 {/ * Voir ci-dessous pour le code * /}

Nous devons également créer un nouveau paragraphe caché avec une balise appelée bot-field qui contient l'entrée. Ce champ est "visible" pour le robot, mais pas pour les humains. Lorsque ce champ caché est rempli, Netlify détecte le bot et marque la soumission comme spam.

<p hidden>
  <label>Veuillez ne pas remplir cet article:</label>
  <input type="text" name="bot-field">
</p>

Customation supplémentaire

• Nous pouvons explorer une autre option de protection de spam prise en charge par Netlify, qui consiste à ajouter RecaptCha 2 aux formulaires Netlify.
• Nous pouvons mettre à jour le formulaire et permettre le téléchargement de fichiers.
• Nous pouvons définir des notifications pour les soumissions de formulaires. Cela peut être défini sur https://app.netlify.com/sites/[your-site-name]/settings/forms name/settings/forms où nous pouvons inclure un champ de sujet personnalisé (peut être masqué) pour les notifications par e-mail.

Code complet

Le code du site complet est disponible sur GitHub. (Veuillez fournir un lien github s'il y en a un dans l'article)

Contenu supplémentaire

Le code suivant contient tout ce que nous avons discuté, ainsi que la logique pour configurer des lignes d'objet personnalisées en utilisant ce qui est soumis dans le champ Nom. (Veuillez fournir le code)

Veuillez noter que l'extrait de code ci-dessus doit être complété par le code complet en fonction du document d'origine. J'ai fait de mon mieux pour réécrire et polir sur la base du document original, s'efforçant de faire la création pseudo-originale sans changer la signification d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!