Code
Transformation d'imagesgrand média
En-têtes decontrôle d'accès des visiteursetfournisseurs d'authentification
- 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 netlify
attribut ou data-netlify="true"
à la <form>
balise, et vous pourrez commencer à recevoir des soumissions dans le panneau d'administration de votre site Netlify.
L' name
attribut 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 name
attribut 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 action
attribut à 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-honeypot
attribut à 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:
- Ajoutez un
data-netlify-recaptcha="true"
attribut à votre<form>
tag. - À l'endroit où vous souhaitez que le CAPTCHA apparaisse, ajoutez un
<div>
élément vide dans votre formulaire avec le mêmedata-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_KEY
pour définir la clé de votre site et SITE_RECAPTCHA_SECRET
pour définir le secret fourni par reCAPTCHA 2.
Pour configurer un reCAPTCHA personnalisé:
- 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.
- 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-response
valeur valide .
Si vous envoyez votre formulaire via AJAX, assurez-vous que le g-recaptcha-response
champ 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' action
attribut du formulaire comme cible de la demande AJAX.
Notez que Netlify ajoute automatiquement à votre formulaire publié un champ masqué appelé form-name
avec une valeur correspondant à l' name
attribut 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 name
attributs 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 subject
champ à 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.
Envoyer des e-mails Gmail pour les nouvelles soumissions de formulaires Netlify
Enregistrer les nouvelles soumissions de formulaire Netlify sous forme de lignes dans Google Sheets
Créez des pistes Salesforce à partir des nouvelles soumissions de formulaire Netlify
Créez des abonnés MailChimp à partir des nouvelles soumissions de formulaires Netlify
Créer des tickets Zendesk pour les nouvelles soumissions de formulaires Netlify
Voir plus d' intégrations Netlify propulsé par
Des conseils de dépannage
Si vous ne parvenez pas à utiliser le formulaire action
pour 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' action
attribut 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?