Comment créer un formulaire de contact avec Netlify Forms et Next.js

Si vous voulez que quelqu'un puisse vous contacter ou soumettre des informations sur un site Web, un formulaire HTML est un moyen assez standard d'y parvenir.

Mais accepter les soumissions de formulaires nécessite généralement un service supplémentaire ou un code complexe côté serveur. Comment profiter de Netlify pour créer facilement de nouveaux formulaires?

  • Qu'est-ce que Netlify?
  • Qu'allons-nous construire?
  • Combien ça coûte?
  • Partie 1: Créer un formulaire de contact avec HTML
  • Partie 2: Ajout d'un formulaire Netlify personnalisé à une application Next.js React

Qu'est-ce que Netlify?

Netlify est une plate-forme Web qui vous permet de déployer facilement de nouveaux projets Web avec des flux de travail faciles à configurer. Cela inclut le déploiement d'un site Web statique, des fonctions lambda et, comme nous en parlerons ici, des formulaires personnalisés.

Leur service de formulaire fonctionne dans le cadre du pipeline de génération et de déploiement. Lorsque nous incluons un formulaire avec un attribut spécifique à notre page, Netlify reconnaît ce formulaire et le configure pour qu'il fonctionne.

Qu'allons-nous construire?

Nous allons créer un formulaire de contact qui permettra aux gens de vous envoyer une note via votre site Web.

Le formulaire lui-même sera assez simple. Comme un formulaire de contact standard, nous vous demanderons le nom, l'adresse e-mail et un message d'une personne.

Nous allons le construire en utilisant du HTML simple pour montrer comment cela fonctionne, puis le construire avec Next.js pour créer un formulaire dans une application React.

Combien ça coûte?

Les formulaires Netlify sont gratuits pour commencer. Ce niveau gratuit est limité à 100 soumissions de formulaires par site Web et par mois, donc si vous restez en dessous, il sera toujours gratuit.

Cela dit, si vous dépassez 100 soumissions de formulaires sur un site particulier, le premier niveau sera de 19 $ + au moment de la rédaction de cet article. Vous pouvez consulter les derniers plans tarifaires sur le site Web de Netlify.

Partie 1: Créer un formulaire de contact avec HTML

Pour commencer, nous allons créer un formulaire de base avec du HTML pur. C'est une victoire rapide pour démontrer comment cela fonctionne.

Étape 1: création d'un formulaire HTML

Pour notre forme, nous pouvons vraiment utiliser ce que nous voulons. Les formulaires de contact peuvent être aussi simples qu'une adresse e-mail et un champ de message ou inclure une variété d'options pour aider une entreprise à répondre à des questions spécifiques.

Nous allons commencer par quelque chose de simple. Nous allons créer un formulaire qui demande le nom, l'adresse e-mail et un message d'une personne.

Pour commencer, créez un nouveau fichier HTML à la racine de votre projet. Ce fichier HTML doit inclure la structure de base d'un document HTML. À l'intérieur du corps, ajoutons notre nouveau formulaire:

Name

Email

Message

Send

Dans l'extrait ci-dessus, nous sommes:

  • Créer un nouveau formulaire
  • Le formulaire a un attribut de nom, une méthode et un data-netlifyattribut défini surtrue
  • Création de 3 champs de formulaire avec des étiquettes, chacun identifié par un attribut de nom
  • Créer un bouton pour soumettre le formulaire

Ce que nous voulons le plus remarquer, c'est l' data-netlifyattribut et la forme name. Lorsque Netlify lit le site, il voit ces champs et les utilise pour transformer votre formulaire en un formulaire actif.

Je vais également ajouter un peu de CSS pour rendre les étiquettes un peu plus cohérentes. Vous pouvez éventuellement ajouter ceci à la du document:

 body { font-family: sans-serif; } label { display: block; margin-bottom: .2em; }  

Et à ce stade, nous devrions avoir une forme basique!

Vous voudrez maintenant mettre ce formulaire sur GitHub ou votre fournisseur Git supporté par Netlify préféré et nous serons prêts pour l'étape suivante.

Suivez le commit!

Étape 2: Configurer un nouveau formulaire avec Netlify

Une fois notre formulaire transmis à notre fournisseur Git, nous pouvons maintenant le synchroniser avec Netlify.

Créez d'abord un compte ou utilisez un compte existant avec Netlify et cliquez sur le bouton Nouveau site depuis Git .

Ici, sélectionnez le fournisseur Git que vous avez utilisé. J'utilise GitHub dans mon exemple.

Une fois votre fournisseur Git sélectionné, il vous demandera d'autoriser l'accès afin que Netlify puisse trouver votre référentiel Git.

Une fois que vous avez réussi à connecter votre compte, vous devriez maintenant voir une liste des référentiels auxquels vous avez donné accès. Recherchez le référentiel dans lequel vous avez ajouté votre formulaire et sélectionnez-le.

Si vous suivez avec moi, notre formulaire est pur HTML, ce qui signifie qu'il ne devrait y avoir aucune étape de construction ou aucun répertoire spécial dans lequel il sera publié. Mais n'hésitez pas à modifier ces paramètres si vous avez fait quelque chose de différent.

Maintenant, cliquez sur Déployer le site qui ouvrira une nouvelle page dans Netlify et en peu de temps votre site sera déployé avec succès.

Enfin, cliquez sur l'URL en haut du tableau de bord du projet Netlify qui se termine par netlify.app. Une fois chargé, vous verrez votre formulaire!

Étape 3: Affichage des soumissions de formulaires

Maintenant que nous avons notre formulaire, nous voulons finalement voir des réponses.

Pour commencer, ajoutez des informations à votre formulaire et cliquez sur Soumettre.

Une fois que vous avez soumis, vous remarquerez que vous êtes redirigé vers une page Netlify qui indique que le formulaire a été soumis avec succès.

Vous pouvez maintenant revenir au tableau de bord de votre projet Netlify et faire défiler un peu vers le bas où vous pouvez maintenant voir une boîte avec les soumissions de formulaire récentes ainsi que votre nouvelle soumission.

Partie 2: Ajout d'un formulaire Netlify personnalisé à une application Next.js React

Si le formulaire doit vivre par lui-même et ne pas faire partie d'un site plus grand, il y a beaucoup d'avantages à laisser votre formulaire en HTML pur. Mais souvent, nous voulons que notre formulaire de contact fasse partie de notre site Web ou de notre application.

Ici, nous allons passer en revue l'ajout d'un formulaire à une application Next.js.

Remarque: notre démonstration d'utilisation de Next.js est une application rendue statiquement. Si vous chargez votre formulaire côté client, ce qui signifie que le HTML sous-jacent n'inclut pas le formulaire, consultez les notes en bas de cette page pour plus d'informations sur les solutions.

Étape 0: Création d'une application Next.js

Pour commencer, nous avons besoin d'une application. Nous allons utiliser Next.js car nous pouvons facilement créer une nouvelle application à partir de zéro.

Pour ce faire, vous pouvez accéder à l'endroit où vous souhaitez créer l'application et exécuter:

yarn create next-app [project-name] # or npx create-next-app [project-name] 

Je vais nommer mon projet my-nextjs-netlify-form.

Une fois que Next.js aura terminé d'installer les dépendances, il vous donnera des instructions pour accéder au répertoire de votre projet et démarrer votre serveur de développement.

Et après avoir exécuté yarn devou npm run dev, vous devriez être prêt à utiliser votre application Next.js:

Suivez le commit!

Étape 1: Ajout d'un formulaire HTML à une application Next.js

Notre étape 1 va ressembler beaucoup à la partie 1.

À l'intérieur de pages/index.js, nous voulons trouver notre wrapper de grille et nous l'utiliserons pour ajouter notre formulaire.

Recherchez et remplacez le bloc entier par ce qui suit:

Name

Email

Message

Send

Voici ce que nous faisons:

  • Nous profitons de la grille existante de Next.js
  • Nous profitons également de la carte existante dans laquelle nous inclurons notre formulaire
  • À l'intérieur de la carte, nous collons exactement le même formulaire HTML que la partie 1

Si nous rechargeons la page, nous pouvons maintenant voir notre formulaire à l'intérieur d'une carte, comme ceci:

Maintenant, avant de continuer, nous voulons faire 2 choses.

Tout d'abord, parce que nous créons ce formulaire dans une application JavaScript, Netlify recommande d'ajouter une entrée masquée avec notre nom de formulaire.

À l'intérieur de notre formulaire, ajoutez l'entrée suivante en haut de l'élément de formulaire:

Assurez-vous que la valeur de cette entrée est la même que le nom de votre formulaire.

Deuxièmement, comme la carte que nous réutilisons est destinée à une liste de liens, Next.js inclut des effets de survol. Cela rend le formulaire difficile à utiliser, supprimons donc ces

Supprimez les éléments suivants de styles/Home.module.css:

.card:hover, .card:focus, .card:active { color: #0070f3; border-color: #0070f3; } 

Pour une étape de bonus supplémentaire, je vais mettre à jour le titre de ma page en "Contactez-moi" et supprimer la description. N'hésitez pas à en faire ce que vous voulez.

Et une fois que vous êtes prêt, comme avant, ajoutez-le en tant que nouveau référentiel à GitHub ou à votre fournisseur Git préféré.

Suivez le commit!

Étape 2: Configuration et déploiement de votre application Next.js sur Netlify

Le déploiement de notre application sur Netlify sera assez similaire, mais avant d'y arriver, nous devons configurer notre application Next.js pour pouvoir exporter lors de la compilation.

Dans notre application Next.js, à l'intérieur du package.jsonfichier, nous voulons mettre à jour le buildscript pour:

"build": "next build && next export", 

Maintenant, lorsque vous exécutez le buildscript, il compilera l'application en HTML, CSS et JS statiques à l'intérieur du outrépertoire. Cela nous permettra de le déployer sur Netlify. Vous pouvez même l'essayer localement sur votre machine si vous le souhaitez.

Avec ce changement, validez-le et transmettez-le à votre fournisseur Git.

Ensuite, le déploiement de l'application ressemblera principalement à la partie 1. La seule différence est que nous avons une application Next.js, nous devons ajouter nos étapes de construction.

Pour commencer, nous voudrons connecter notre fournisseur Git comme dans la partie 1.

Une fois que nous arrivons à la page Deploy Settings, nous voulons configurer notre commande Build et notre répertoire Publish.

Notre commande Build sera yarn buildou npm run buildselon le gestionnaire de packages que vous avez utilisé et le répertoire de publication sera out.

Après cela, cliquez sur Déployer le site et il démarrera comme avant.

Une fois le déploiement terminé, nous serons maintenant prêts à ouvrir l'application.

Et une fois que nous avons ouvert notre application, nous pouvons tester notre formulaire en le remplissant et en appuyant sur Soumettre.

Comme auparavant, nous atterrirons sur une page de réussite Netlify. Mais si nous revenons en arrière et regardons à l'intérieur de notre tableau de bord Netlify, nous verrons maintenant notre soumission!

Suivez le commit!

Bonus: gardez les gens sur votre site Web avec un message de réussite

Une autre fonctionnalité intéressante avec les formulaires Netlify est qu'il vous permet de configurer votre formulaire pour garder les gens sur votre site Web en configurant le formulaire directement sur la page.

Vous avez de nombreuses options ici, qu'il s'agisse de rediriger quelqu'un vers une nouvelle page ou de configurer la messagerie sur la page à partir de laquelle il a soumis.

Pour cette démo, nous allons configurer un paramètre d'URL que nous pouvons détecter pour afficher un message de réussite si nous voyons ce paramètre.

Pour ce faire, sur votre formulaire HTML, ajoutez l'attribut suivant:

action="/?success=true" 

Cela indiquera à Netlify que nous voulons rester sur la page d'accueil (puisque nous n'avons qu'une seule page) mais appliquer le paramètre URL afin que nous puissions le détecter dans notre application.

Ensuite, nous pouvons utiliser les hooks useStateet useEffectpour voir ce paramètre et mettre à jour la page.

En haut du fichier, importons ces hooks:

import { useState, useEffect } from 'react'; 

À l'intérieur de notre composant Home en haut, ajoutons notre état:

const [success, setSuccess] = useState(false); 

Et pour détecter le paramètre URL, nous pouvons utiliser le useEffecthook:

useEffect(() => { if ( window.location.search.includes('success=true') ) { setSuccess(true); } }, []); 

Remarque: il s'agit d'un moyen simple d'obtenir ce résultat pour la démo. Si vous avez une application plus compliquée, vous voudrez peut-être nommer le paramètre de manière plus logique et analyser correctement les paramètres d'URL pour la valeur.

Ce que cela fait, c'est que lorsque le composant est rendu, il déclenchera ce useEffecthook, vérifiant les paramètres dans l'URL et recherchant success=true. S'il le trouve, il mettra à jour notre successvariable d'état en true!

Ensuite, sous le titre de notre page (

), ajoutons l'extrait suivant:

{success && ( 

Successfully submitted form!

)}

Ici, nous cherchons à voir si successest vrai, et si c'est le cas, nous incluons une ligne de texte indiquant que le formulaire a été soumis avec succès.

Bien que vous ne puissiez pas soumettre votre formulaire localement, vous pouvez le tester en visitant votre application exécutée localement avec le ?success=trueparamètre URL comme:

//localhost:3000/?success=true 

Enfin, vous pouvez transmettre ces modifications à votre fournisseur Git et Netlify reconstruira automatiquement votre site.

Et une fois terminé, vous pouvez soumettre votre formulaire comme avant et voir le message de réussite.

Et voyez que notre formulaire est toujours en cours d'envoi!

Suivez le commit!

Formulaires Netlify et code côté client

Une chose à noter avec la solution Netlify est que cela ne fonctionne que «simplement» pour les pages HTML statiques.

Si votre page utilise JavaScript pour gérer le contenu de cette page, par exemple n'ajoute pas de formulaire avant le chargement de la page, vous devrez consulter la documentation de Netlify sur la façon dont vous pouvez faire fonctionner cela avec un attribut de formulaire supplémentaire.

Netlify donne également un exemple sur la façon dont vous pouvez soumettre votre formulaire de manière dynamique avec JavaScript afin que vous puissiez créer une expérience personnalisée dans votre application.

Que pouvez vous faire d'autre?

Configuration de flux de travail avancés avec d'autres outils

Netlify vous permet d'intégrer d'autres outils pour vous permettre de gérer vos soumissions de formulaires. Notamment, Netlify fonctionne avec Zapier, ce qui signifie que vous pouvez accepter les soumissions entrantes et faire ce que vous voulez avec elles.

//docs.netlify.com/forms/notifications/

Prévention du spam avec reCAPTCHA

Le spam est également une chose réelle. Vous ne voulez pas que votre boîte de réception soit inondée de spam, vous pouvez donc profiter du champ Honeypot intégré de Netlify ou ils vous expliquent comment ajouter reCAPTCHA 2.

//docs.netlify.com/forms/spam-filters/

Suivez-moi pour plus de Javascript, UX et d'autres choses intéressantes!

  • ? Suis moi sur Twitter
  • ? Abonnez-vous à mon Youtube
  • ✉️ Inscrivez-vous à ma newsletter
  • ? Sponsorisez moi