Aperçu des formulaires - Aide Webflow
Les formulaires sont l'un des outils les plus puissants sur le web, vous permettant de capturer des informations efficacement, que vous recueilliez des inscriptions à une newsletter par email ou des demandes de travail de clients potentiels. Avec Webflow, vous pouvez entièrement personnaliser et optimiser vos formulaires pour répondre à vos besoins. Vous pouvez ajouter un bloc de formulaire à votre site depuis Panneau d'ajout → Éléments → Formulaires.
Anatomie du formulaire
Le Bloc de formulaire hérite de la pleine largeur de son élément parent et contient trois éléments enfants :
- Formulaire — contient tous vos champs et éléments de formulaire
- Message de succès — le message retourné lorsque le formulaire a été soumis avec succès
- Message d'erreur — le message retourné lorsqu'il y a un problème avec la soumission du formulaire
Structure du formulaire
Vous pouvez ajouter ou supprimer n'importe lequel des éléments de formulaire suivants pour personnaliser votre formulaire selon vos besoins :
| Élément de formulaire | But |
|---|---|
| Étiquette de champ | Utilisée pour décrire la fonction ou le but d'un champ de formulaire. Cruciale pour l'accessibilité. |
| Champ de saisie | Utilisé pour collecter des données sur une seule ligne, comme une réponse courte à une question (ex. : nom ou adresse email) |
| Téléchargement de fichier | Permet aux visiteurs du site de joindre un fichier à leur soumission de formulaire |
| Zone de texte | Permet aux visiteurs du site d'entrer des données sur plusieurs lignes, comme un message long |
| Case à cocher | Utilisée pour les données d'entrée où les visiteurs du site peuvent choisir une ou plusieurs options |
| Bouton radio | Utilisé pour les données d'entrée où les visiteurs du site peuvent choisir une seule option parmi plusieurs |
| Sélection | Permet aux visiteurs du site de sélectionner des options dans une liste déroulante. Sélections multiples autorisées |
| reCAPTCHA | Service de Google qui empêche le spam de formulaire |
| Bouton de soumission | Soumet toutes les données collectées dans un formulaire. Aucun formulaire n'est complet sans le Bouton de soumission |
Comment configurer les éléments de formulaire
Vous pouvez double-cliquer sur un élément de formulaire (par exemple, Champ de saisie, Bouton de soumission) pour ouvrir ses paramètres. Chaque élément de formulaire a des paramètres de saisie différents selon son type :
| Paramètre de saisie | Objectif | Remarques supplémentaires |
|---|---|---|
| Nom | Identifie le champ lors des soumissions de formulaire | n/a |
| Obligatoire | Permet d'exiger qu'un champ de formulaire soit rempli pour soumettre le formulaire | Bloque les soumissions vides |
| Texte indicatif | Affiche du texte dans le champ de saisie qui disparaît lors de la saisie; ne doit PAS remplacer les étiquettes ou instructions cruciales | Non disponible pour les technologies d'assistance ou outils de traduction; stylisable depuis le menu des états |
| Type de texte | Spécifie le type de saisie (par exemple, email, téléphone, mot de passe) | Téléphone accepte les caractères & affiche le clavier; mot de passe masque les caractères saisis |
| Autofocus | Décide si le champ est automatiquement focalisé au chargement de la page | Attention aux problèmes de défilement/saut ou aux champs cachés bloquant les soumissions |
Bouton de soumission
Les paramètres du bouton de soumission vous permettent de définir :
- Texte du bouton : Ce qui apparaît sur le bouton (par défaut : « Soumettre »)
- Texte d'attente : Ce qui remplace le bouton après qu'il a été cliqué et avant que la soumission ne soit terminée (par défaut : « Veuillez patienter… »)
Comment gérer les paramètres de formulaire
Personnaliser les états de succès et d'erreur
Sélectionnez le bloc de formulaire et allez dans Paramètres du bloc de formulaire pour :
- Normal : État par défaut
- Succès : Message après une soumission réussie
- Erreur : Message après une soumission échouée
Définir le nom du formulaire
Le nom que vous définissez associe le formulaire à ses données de soumission. Si vous ne définissez pas de noms uniques, toutes les données de soumission apparaissent sous "Formulaire Email". Donnez des noms descriptifs pour distinguer les formulaires.
Gérer les soumissions de formulaires et les notifications
- Spécifiez les destinataires dans les Paramètres du bloc de formulaire.
- Accédez aux notifications avancées dans Paramètres du site → Formulaires → Notifications de formulaire.
- Pour les propriétaires de sites complets : accédez/gérez les données de formulaire dans Paramètres du site → Formulaires → Soumissions de formulaire.
Rediriger les visiteurs du site lors de la soumission du formulaire
Ajoutez une URL dans le champ Redirection pour envoyer les utilisateurs ailleurs après la soumission.
Définir une action personnalisée
Ajoutez une action personnalisée pour envoyer les soumissions ailleurs (par exemple, HubSpot). Lorsque vous ajoutez cela, Webflow ne traite ni n'envoie la notification. Vous pouvez également connecter des applications pour plus d'intégrations.
Voir les connexions d'applications
Les applications connectées apparaîtront dans Connexions. Remarque : Envoyer les données du formulaire à Webflow apparaît toujours à moins que vous ne contourniez complètement le traitement Webflow.
Données de formulaire et RGPD
- Si vous collectez des données personnelles de résidents de l'UE (y compris via des formulaires), vous êtes un responsable du traitement des données selon le RGPD.
- Obtenez le consentement approprié pour la collecte de données.
- Si vous construisez pour des clients, informez-les de leurs responsabilités.
- Révisez les responsabilités si vous connectez des données à des tiers (par exemple, Zapier).
En savoir plus :
Dépannage
Si votre formulaire ne peut pas être soumis :
- Si vous avez activé reCAPTCHA, assurez-vous que tous les formulaires l'incluent. Sinon, les soumissions échoueront.
- Si vous avez des champs cachés, assurez-vous que Autofocus est désactivé pour ceux-ci.
- Les sites gratuits/non hébergés sont limités à 50 soumissions de formulaire au total. Mettez à niveau votre plan de site pour supprimer la limite.
Si les problèmes persistent, contactez le support client.