Voir nos modèles

Lire nos tutoriels

Welcome

Docs

Outils de ligne de commande

Manuel de déploiement continu

Fonctions de déploiement

Domaines personnalisés

DNS gérés

SSL / HTTPS

Transformation d'imagesgrand média

Test de fractionnement

Redirections

Identity

Git Gateway

En-têtes decontrôle d'accès des visiteursetfournisseurs d'authentification

OAuth debase

Formulaires

• Recevoir des soumissions
• Exportation de soumissions
• Suppression de soumissions
• Intégration de fonctions sans serveur
• Filtrage de spam
• Formulaire AJAX
• Formulaires rendus par JavaScript
• Les notifications
• Des conseils de dépannage
• Utilisation et facturation

----------------------------------

Formes

Netlify est livré avec une gestion de formulaire intégrée. Nos générateurs de logiciels le font en analysant directement vos fichiers HTML au moment du déploiement. Vous n'avez donc pas besoin de passer un appel d'API ou d'inclure du code JavaScript supplémentaire sur votre site.

Codez un formulaire HTML dans n'importe quelle page de votre site, ajoutez un netlifyattribut ou data-netlify="true"à la <form>balise, et vous pourrez commencer à recevoir des soumissions dans le panneau d'administration de votre site Netlify.

L' nameattribut de votre formulaire détermine ce que nous appelons le formulaire dans l'interface de l'application Netlify. Si vous avez plusieurs formulaires sur un site, chaque formulaire doit avoir un nameattribut différent .

Voici un exemple:

<form name="contact" method="POST" data-netlify="true">

  <p>

    <label>Your Name: <input type="text" name="name" /></label>   

  </p>

  <p>

    <label>Your Email: <input type="email" name="email" /></label>

  </p>

  <p>

    <label>Your Role: <select name="role[]" multiple>

      <option value="leader">Leader</option>

      <option value="follower">Follower</option>

    </select></label>

  </p>

  <p>

    <label>Message: <textarea name="message"></textarea></label>

  </p>

  <p>

    <button type="submit">Send</button>

  </p>

</form>

Par défaut, lorsque les visiteurs remplissent un formulaire, ils voient un message de réussite de style générique avec un lien vers la page du formulaire. Vous pouvez remplacer le message de réussite par défaut par une page personnalisée que vous créez en ajoutant un actionattribut à la <form>balise, en entrant le chemin de votre page personnalisée (comme "/pages/success") en tant que valeur. Le chemin doit être relatif à la racine du site, en commençant par a /.

Recevoir des soumissions

Vous pouvez trouver toutes les soumissions à vos formulaires Netlify dans l' onglet Formulairesdu tableau de bord de votre site. Sélectionnez un nom de formulaire dans la liste des formulaires actifs pour accéder aux soumissions pour ce formulaire. Par défaut, seules les soumissions vérifiées sont répertoriées. Vous pouvez passer aux spams via un menu déroulant au-dessus de la liste. Il est possible d' exporter des soumissions vérifiées dans un fichier CSV. Vous pouvez également accéder aux soumissions via notre API .

Netlify dispose de plusieurs options de notification intégrées pour l'envoi de formulaires vérifiés, notamment des notifications par courrier électronique et Slack. Vous pouvez les trouver dans Paramètres> Formulaires> Notifications de formulaire . Sélectionnez le menu déroulant Ajouter une notification pour voir vos options. (Cette fonctionnalité peut ne pas être disponible sur tous les forfaits .)

Netlify s'intègre également à Zapier afin que vous puissiez configurer des déclencheurs qui envoient vos soumissions de formulaires vérifiées à l'une des 500 applications et plus de leur catalogue.

Utilisez ce lien pour accéder à l'application Netlify Zapier: Netlify sur Zapier

TÉLÉCHARGEMENT DE FICHIERS

Netlify Forms peut recevoir des fichiers téléchargés via des soumissions de formulaire. Pour ce faire, ajoutez une entrée type="file"à n’importe quel formulaire. Lorsqu'un formulaire est soumis, un lien vers chaque fichier téléchargé sera inclus dans les détails de la soumission du formulaire. Celles-ci sont visibles dans l'application Netlify, dans les notifications par courrier électronique et via notre API.

Exportation de soumissions

Dans l'application Netlify, vous pouvez exporter les soumissions de formulaires vérifiés dans un fichier CSV. Dans l' onglet Formulaires , sélectionnez le formulaire que vous souhaitez exporter, puis cliquez sur le bouton Télécharger en tant que CSV situé en haut de la page de détail du formulaire.

Suppression de soumissions

Pour sélectionner une ou plusieurs soumissions de formulaire d'un formulaire particulier, cochez la case en regard de chaque titre de soumission.

Après avoir sélectionné la ou les soumissions, un bouton rouge Supprimer sera disponible. Lorsque vous cliquez sur le bouton de suppression, vous êtes invité à confirmer l'action de suppression. Une fois que vous avez confirmé, les envois sélectionnés seront définitivement supprimés.

Intégration de fonctions sans serveur

Vous pouvez intégrer vos formulaires aux fonctions sans serveur de Netlify en déclenchant une fonction lors de l'envoi de formulaires vérifiés. Pour en savoir plus, consultez la documentation sur les fonctions .

Filtrage de spam

Akismet , l’un des leaders du marché en matière de détection de spam, filtre toutes les formes de spam envoyées . Seules les soumissions qui passent le filtre sont incluses dans la liste des soumissions vérifiées de votre formulaire . On peut trouver les soumissions marqués comme spam par Akismet en passant à votre formulaire soumissions Spam liste.

Pour une protection supplémentaire, vous pouvez ajouter un champ pot de miel et / ou un défi reCAPTCHA 2 explicite . Nous rejetons automatiquement les soumissions qui ne répondent pas à ces défis. Les envois indésirables capturés par un champ pot de miel ou reCAPTCHA 2 ne seront même pas inclus dans les envois de spam de votre formulaire.

CHAMP DE MIEL

Les champs «pot de miel» sont des champs de formulaire cachés qui incitent les utilisateurs de bot à remplir un champ que les utilisateurs humains ne peuvent pas voir. Un formulaire soumis avec un champ pot de miel rempli peut être rejeté en toute sécurité, car seul un bot verrait et compléterait le champ. Vous pouvez avertir Netlify d'un champ pot de miel caché en ajoutant un netlify-honeypotattribut à votre <form>avec le nom de votre champ caché. Assurez-vous ensuite que ce champ est présent dans le formulaire, mais masqué via CSS ou JavaScript.

Voici un exemple:

<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true">

  <p class="hidden">

    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>

  </p>

  <p>

    <label>Email: <input type="text" name="email" /></label>

  </p>

  <p>

    <label>Message: <textarea name="message"></textarea></label>

  </p>

  <p>

    <button type="submit">Send</button>

  </p>

</form>

Désormais, si quelqu'un entre une valeur dans le bot-field, Netlify rejettera discrètement la soumission du formulaire.

RECAPTCHA EXPLICITE 2

Si vous souhaitez ajouter un défi reCAPTCHA 2 à un formulaire, Netlify peut en inclure un pour vous ou vous pouvez en ajouter un . Pour que Netlify fournisse le CAPTCHA:

1. Ajoutez un data-netlify-recaptcha="true"attribut à votre <form>tag.
2. À l'endroit où vous souhaitez que le CAPTCHA apparaisse, ajoutez un <div>élément vide dans votre formulaire avec le même data-netlify-recaptcha="true"attribut.

Lors de la publication de votre site, le formulaire inclura le code HTML nécessaire pour rendre le CAPTCHA.

Voici un exemple:

<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true">

  <p>

    <label>Email: <input type="text" name="name" /></label>

  </p>

  <p>

    <label>Message: <textarea name="message"></textarea></label>

  </p>

  <div data-netlify-recaptcha="true"></div>

  <p>

    <button type="submit">Send</button>

  </p>

</form>

Lorsqu'un visiteur soumet le formulaire, nos serveurs valideront le serveur CAPTCHA. Si la validation échoue, nous redirigeons le visiteur vers la même page et rejetons la soumission du formulaire.

RECAPTCHA 2 PERSONNALISÉ AVEC VOS PROPRES PARAMÈTRES

Vous pouvez également ajouter votre propre code reCAPTCHA 2 sur votre site et laisser Netlify valider que les formulaires soumis proviennent d'un humain. Ceci est utile si vous souhaitez avoir plus de contrôle sur vos validations ou si vous utilisez une bibliothèque JavaScript pour injecter un CAPTCHA dans vos formulaires.

Dans ce cas, Netlify a besoin de votre clé de site reCAPTCHA2 et de votre secret pour valider l'exactitude de la réponse captcha. Vous pouvez fournir ces valeurs via des variables d'environnement dans les paramètres de votre site. Utilisez SITE_RECAPTCHA_KEYpour définir la clé de votre site et SITE_RECAPTCHA_SECRETpour définir le secret fourni par reCAPTCHA 2.

Pour configurer un reCAPTCHA personnalisé:

1. Inscrivez-vous pour une paire de clés API reCAPTCHA et suivez les instructions pour ajouter reCAPTCHA à votre site. Cela implique généralement l'ajout d'un script avant la fermeture </head>de votre modèle HTML et d'un extrait de code à la fin de l' <form>emplacement où vous souhaitez que le widget reCAPTCHA apparaisse.

2.Connectez-vous à votre tableau de bord Netlify et ajoutez les variables d'environnement suivantes au panneau Paramètres> Construire et déployer> Environnement> Variables d'environnement :

• SITE_RECAPTCHA_KEY avec la clé de site API reCAPTCHA.
• SITE_RECAPTCHA_SECRET avec la clé secrète de l'API reCAPTCHA.

1. Ajoutez un data-netlify-recaptcha="true"attribut au formulaire HTML contenant le widget reCAPTCHA personnalisé.

<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true">

  <!-- input fields and custom reCAPTCHA snippet -->

</form>

Les serveurs Netlify vérifient les envois de ce formulaire et ne les acceptent que s’ils incluent une g-recaptcha-responsevaleur valide .

Si vous envoyez votre formulaire via AJAX, assurez-vous que le g-recaptcha-responsechamp est inclus dans le corps de la demande POST.

CHANGER L'ÉTAT D'UNE SOUMISSION

Vous pouvez modifier l'état d'une soumission de spam à vérifié ou vice versa. Pour ce faire, sélectionnez une ou plusieurs soumissions, puis utilisez le bouton Marquer comme spam ou Marquer comme vérifié .

Formulaire AJAX

Vous pouvez également soumettre des formulaires via AJAX / XHR, en utilisant l' actionattribut du formulaire comme cible de la demande AJAX.

Notez que Netlify ajoute automatiquement à votre formulaire publié un champ masqué appelé form-nameavec une valeur correspondant à l' nameattribut du formulaire lorsque vous envoyez un formulaire HTML au lieu de le générer avec JavaScript. Assurez-vous d'inclure ce champ dans votre demande AJAX!

Voici un exemple simple de jQuery:

$("#my-form").submit(function(e) {

  e.preventDefault();

  var $form = $(this);

  $.post($form.attr("action"), $form.serialize()).then(function() {

    alert("Thank you!");

  });

});

Notez que le contenu de la demande AJAX doit être codé en URL. Dans l'exemple ci-dessus, la serialize()fonction jQuery gère le codage de l'URL. Les formulaires Netlify ne prennent pas en charge les données de formulaire JSON pour le moment.

Formulaires rendus par JavaScript

Nos robots trouvent vos formulaires en analysant le code HTML de votre site une fois la construction terminée. Cela signifie que si vous utilisez JavaScript pour restituer un formulaire côté client, nos robots ne le trouveront pas dans les fichiers prédéfinis. Vous pouvez contourner ce problème en créant un formulaire HTML masqué avec l' data-netlify="true"attribut et des champs de saisie avec des nameattributs correspondant aux entrées de votre formulaire rendu par JavaScript. Si vous souhaitez utiliser notre intégration reCAPTCHA2, vous devez appliquer le même traitement et créer un divélément dans le code HTML masqué avec l' data-netlify-recaptcha="true"attribut.

Vous pouvez également trouver des tutoriels sur notre blog:

• Comment intégrer la gestion des formulaires de Netlify dans une application React
• Comment intégrer des formulaires Netlify dans une application Vue

Bien que les deux articles soient assez spécifiques à un framework, le code montre comment prérender des formulaires lorsque vous les utilisez dans une application Web.

Les notifications

Cette fonctionnalité peut ne pas être disponible sur tous les forfaits .

Vous pouvez envoyer des notifications pour l'envoi de formulaires vérifiés à partir du tableau de bord de votre site dans Paramètres> Formulaires> Notifications de formulaire .

Ces notifications peuvent être envoyées par courrier électronique, Webhook ou Slack. Dans les options de configuration, vous pouvez choisir d’être averti pour un seul formulaire spécifique ou pour toutes les soumissions vérifiées vers n’importe quel formulaire de votre site.

NOTIFICATIONS PAR EMAIL

Tous les courriels de notification sont envoyés à team@netlify.com et toute réponse à une notification sera envoyée à cette adresse. Si vous souhaitez répondre à un utilisateur du formulaire, vous devrez entrer son adresse manuellement.

L'objet par défaut pour toutes les notifications de formulaire est le suivant:

Soumission de formulaire à partir du formulaire {YOUR-FORM-NAME}

Pour remplacer cela, ajoutez un subjectchamp à votre formulaire et la valeur de ce champ sera utilisée pour le sujet de l'e-mail de notification. Ce champ n'a pas besoin d'être visible pour vos utilisateurs.

Pour un meilleur contrôle des courriels déclenchés par un formulaire ou pour vous connecter à d'autres services, vous pouvez utiliser l'application Netlify sur Zapier.

INTÉGRATION DE ZAPIER

Netlify est disponible sur Zapier, où vous pouvez connecter Netlify à plus de 1 000 autres applications. Vous pouvez configurer une action «Zap» pour qu'elle soit déclenchée lors de la soumission d'un formulaire vérifié sur votre site Web. Vous pouvez en savoir plus sur notre blog ou utiliser l'un des modèles ci-dessous pour commencer:

Démarrez le déploiement de votre site Netlify après de nouvelles soumissions de formulaires Netlify.

Utilisez ce zap

Envoyer des e-mails Gmail pour les nouvelles soumissions de formulaires Netlify

Utilisez ce zap

Enregistrer les nouvelles soumissions de formulaire Netlify sous forme de lignes dans Google Sheets

Utilisez ce zap

Créez des pistes Salesforce à partir des nouvelles soumissions de formulaire Netlify

Utilisez ce zap

Créez des abonnés MailChimp à partir des nouvelles soumissions de formulaires Netlify

Utilisez ce zap

Créer des tickets Zendesk pour les nouvelles soumissions de formulaires Netlify

Utilisez ce zap

Voir plus d' intégrations Netlify propulsé par

Des conseils de dépannage

Si vous ne parvenez pas à utiliser le formulaire actionpour personnaliser la page de réussite, essayez de vous connecter à votre page de réussite personnalisée à partir de quelque part sur la même page que le formulaire. Utilisez le même chemin exact dans votre lien de test que vous essayez d'utiliser pour l' actionattribut et assurez-vous que le lien y fonctionne avant de creuser davantage dans votre formulaire.

Si vous envoyez des soumissions tests de votre formulaire et que vous ne les trouvez pas dans votre liste de soumissions vérifiées , il est possible qu'elles soient signalées comme spam par Akismet. Utilisez le menu déroulant situé au-dessus de la liste pour passer aux envois de spam, puis vérifiez à nouveau pour vos tests.

Pour éviter que vos tests ne soient signalés comme spam en premier lieu, nous vous recommandons

• entrez une adresse email réelle au lieu d'une adresse fictive telle que test@test.com.
• écrivez des phrases complètes dans n'importe quelle zone de texte plutôt que quelques caractères insensés.
• étalez le taux de soumissions d'une seule adresse IP.
• 
  

Visitez notre forum communautaire pour obtenir plus de conseils sur la façon de déboguer votre formulaire .

Utilisation et facturation

Vous pouvez vérifier l’utilisation de votre service Formulaires sous Paramètres> Formulaires> Gestion des formulaires> Utilisation . Cela montre votre niveau d'utilisation actuel et suit votre utilisation des services suivants:

• Soumissions : Ceci compte le nombre total de soumissions vérifiées sur tous les formulaires de votre site au cours de cette période de facturation.
• Téléchargement de fichiers : permet de suivre la taille de stockage totale de tous les fichiers téléchargés via les soumissions de formulaires vérifiées au cours de la période de facturation en cours.
• 
  

La tarification des formulaires varie en fonction de l'utilisation. Lorsque l'utilisation atteint une limite de niveau, le site passe automatiquement au niveau ou au package suivant.

CHANGEMENT DE NIVEAU

Tout membre de l'équipe ayant la possibilité de modifier les paramètres de votre site peut également modifier les niveaux des services sur ce site.

Pour ce faire, accédez à Paramètres> Formulaires> Gestion des formulaires> Utilisation , puis sélectionnez Modifier le niveau . Les frais supplémentaires seront calculés au prorata et facturés à la fin du cycle de facturation, selon le mode de paiement de l'équ

Visitez la communauté Netlify pour discuter des idées et des questions avec les autres utilisateurs de Netlify.

Voulez-vous commencer rapidement?

Voir nos modèles

Lire nos tutoriels