Il arrive souvent que les utilisateurs de vos formulaires souhaitent simplement pouvoir dupliquer les champs de vos formulaires. Les champs pour les noms supplémentaires, les coordonnées, les heures travaillées, etc. sont faciles à ajouter lorsque les utilisateurs peuvent simplement les répéter.
Maintenant, avec le champ WPForms Repeater, les utilisateurs de votre site web peuvent faire exactement cela ! Dans ce tutoriel, je vais vous montrer comment modifier vos formulaires pour autoriser les champs dupliqués en seulement 5 étapes.
Comment autoriser les visiteurs à dupliquer les champs d'un formulaire ?
Dans cet article
Tout d'abord, téléchargez WPForms
Ok, je sais que j'ai dit que ce tutoriel ne prenait que 5 étapes, donc cela semble supplémentaire 😉 Mais, c'est un peu une évidence que vous aurez besoin de WPForms installé et activé sur votre site WordPress pour dupliquer les champs de vos formulaires.
Il faut donc commencer par se procurer le plugin WPForms!
1. Sélectionnez ou créez votre formulaire
Le champ Repeater est une fonctionnalité intéressante incluse dans les formulaires que vous construisez avec WPForms. Grâce à lui, les utilisateurs de vos formulaires peuvent ajouter des entrées supplémentaires ou dupliquer des blocs entiers du formulaire.
Mais il n'est pas nécessaire de créer un tout nouveau formulaire pour permettre aux utilisateurs de dupliquer des champs.
Il se peut que vous utilisiez déjà des formulaires sur votre site que vous aimeriez modifier avec le champ Repeater. Il vous suffit de cliquer sur Modifier en dessous du formulaire pour lequel vous souhaitez ouvrir le générateur de formulaires.
Mais si vous avez besoin de créer un nouveau formulaire, vous pouvez prendre de l'avance en choisissant parmi des milliers de modèles de formulaires fournis dans la galerie WPForms.
Nous proposons une vaste sélection de modèles de formulaires qui intègrent la fonctionnalité des champs Repeater.
Vous pouvez également choisir un autre modèle de formulaire et ajouter rapidement le champ Repeater à l'aide du générateur de formulaires.
Et, comme toujours, vous pouvez créer votre formulaire vous-même en partant d'un formulaire vierge.
Créez votre formulaire WordPress maintenant
2. Ajouter le champ du répéteur
Une fois votre formulaire sélectionné et chargé dans le générateur de formulaires, vous pouvez ajouter le champ Repeater.
Vous le trouverez parmi les champs situés à gauche de l'écran.
Il suffit de cliquer sur le champ Repeater, de le faire glisser sur votre formulaire et de le déposer à l'endroit voulu.
Ensuite, comme le champ Layout, le champ Repeater permet d'ajouter d'autres champs de votre formulaire.
Quels sont donc les champs qui ont leur place dans la section "Repeater field" ? Les champs que vous souhaitez permettre aux utilisateurs de votre formulaire de dupliquer.
Sur un formulaire d'inscription de groupe, par exemple, les utilisateurs souhaiteraient probablement inclure plusieurs noms de participants qui s'inscrivent en même temps.
Avant que WPForms ne propose le champ Repeater, vous auriez pu encombrer votre formulaire avec une poignée de champs Nom dont votre utilisateur pourrait avoir besoin.
Vous pouvez également utiliser des paramètres de logique conditionnelle pour inclure des champs de nom supplémentaires si l'utilisateur le souhaite.
Quoi qu'il en soit, le champ Repeater facilite grandement la duplication des champs pour vous et les utilisateurs de vos formulaires !
Lire aussi: Comment utiliser WPForms pour les sites éducatifs
3. Afficher des lignes ou des blocs
Avant d'aller plus loin, examinons les options d'affichage qui s'appliquent au champ Répétiteur.
Vous pouvez non seulement personnaliser les champs de la zone de champs Repeater pour qu'ils soient ajoutés en tant que lignes individuelles, mais vous pouvez également autoriser la duplication de blocs entiers de champs.
Astuce de pro : Passez à l'onglet Avancé pour masquer l'étiquette du champ Répétiteur comme je l'ai fait.
Lorsque vous sélectionnez les champs de la zone de répétition pour qu'ils soient affichés en tant que lignes, les utilisateurs de votre formulaire dupliqueront chaque ligne horizontale.
Comme vous pouvez le voir ci-dessus, les boutons + ajouter ou - supprimer se trouvent à la fin de chaque rangée.
Les blocs, quant à eux, permettent de combiner des champs à répéter ensemble, qui ne peuvent pas tenir sur une seule ligne.
Dans le cas des blocs, les boutons + ajouter ou - supprimer se trouvent sous la section entière des champs. Nous reviendrons plus tard sur ces boutons.
Dans l'exemple ci-dessous, j'ai sélectionné les blocs comme moyen d'afficher mes champs répétables. J'ai ensuite inclus dans la zone des champs répétitifs les champs que je souhaite que les utilisateurs puissent dupliquer en tant que section.
Désormais, lorsque les utilisateurs du formulaire ajoutent un autre participant, ils peuvent fournir toutes les informations que j'ai demandées sur le formulaire pour chaque bloc.
Ainsi, les utilisateurs du formulaire peuvent dupliquer des sections entières du formulaire en une seule fois.
4. Choisir une mise en page
Ensuite, découvrez les différentes façons d'organiser la mise en page de vos champs répétables.
Vous pouvez configurer vos champs en lignes simples, en colonnes régulièrement espacées et en colonnes irrégulières.
Si vous avez des rangées répétitives de noms et d'âges de participants, par exemple, vous pouvez choisir une mise en page qui positionne un espace plus grand pour le nom et un espace plus petit pour l'âge.
Ainsi, mon exemple de colonnes Rows et Layout dans le générateur de formulaires ci-dessus ressemblerait à ceci pour un utilisateur de formulaire :
Ou bien, vous souvenez-vous du bloc que je vous ai montré à la fin de l'étape 3 avec le nom du participant, les informations de contact en cas d'urgence et d'autres champs ?
Je pourrais utiliser une disposition en deux colonnes pour personnaliser cette partie du formulaire.
Pour l'utilisateur, cela ressemblerait alors à quelque chose comme ceci :
Conseil de pro: Utilisez un simple champ Nom d'une ligne pour maintenir un espacement régulier entre les colonnes, comme je l'ai fait ci-dessus.
La modification de ces aspects du champ Répétiteur permet simplement de garder le tout ordonné et organisé dans l'ensemble du formulaire.
5. Personnaliser l'affichage des boutons
Le dernier élément à personnaliser dans la section des champs répétitifs est constitué par les boutons + et - qui permettent d'ajouter et de supprimer des champs répétitifs.
Il s'agit des boutons sur lesquels l'utilisateur du formulaire cliquera pour ajouter des noms, des sections d'enregistrement ou tout autre champ que vous avez mis à disposition pour la duplication.
Par défaut, ces boutons affichent + ou - à la fin de chaque ligne, mais vous pouvez personnaliser ces icônes lors de l'utilisation d'un bloc.
Les boutons étant placés sous le bloc et non à l'extrémité de la rangée, la possibilité de l'allonger par le biais de la personnalisation permet de conserver un aspect visuel ordonné.
Sélectionnez d'abord le type de bouton.
Les options disponibles sont les suivantes :
- Boutons avec icônes
- Boutons
- Icônes avec texte
- Icônes
- Texte en clair
Si votre bouton affiche un texte quelconque, vous pouvez le personnaliser dans la case suivante. C'est ici que vous pouvez modifier le libellé de l'étiquette du bouton.
Sur un formulaire d'inscription de groupe, par exemple, vous pouvez personnaliser votre bouton de manière à ce qu'il indique "Ajouter un participant".
Enfin, vous pouvez choisir les limites minimales et maximales de vos champs répétables.
Par défaut, cette limite est fixée à un minimum de 1 et à un maximum de 10. Cela signifie que les utilisateurs du formulaire peuvent enregistrer jusqu'à 10 participants sur ce formulaire.
Ainsi, en appliquant les paramètres présentés ci-dessus, le bouton de notre formulaire d'inscription de groupe ressemblerait à ceci pour les utilisateurs :
Comme toujours, lorsque vous êtes satisfait de vos champs personnalisés et répétables, veillez à enregistrer votre formulaire pour le publier lorsque vous êtes prêt.
Et c'est tout ! Vous savez maintenant comment permettre aux visiteurs de votre site web de dupliquer les champs de vos formulaires.
Bonus : Le champ répétitif en action
Je vous ai montré comment utiliser la zone de champ Répétiteur sur un formulaire d'inscription de groupe, mais j'aimerais partager avec vous quelques autres bons exemples de cette fonctionnalité en action.
Formulaire de feuille de temps de l'employé
Tout d'abord, jetez un coup d'œil à cette feuille de temps des employés que nous proposons comme modèle :
Les données relatives à l'employé sont d'abord recueillies, notamment son nom, son adresse électronique, son numéro d'identification, ainsi que le nombre total d'heures qu'il a effectuées au cours de la semaine.
Les employés peuvent ensuite saisir leurs jours et heures de travail spécifiques pour la semaine, en utilisant ce formulaire comme une feuille de temps hebdomadaire.
Il utilise des blocs et des colonnes répétables qui permettent aux utilisateurs de dupliquer les champs relatifs au jour de la semaine où ils ont travaillé, ainsi qu'à l'heure d'arrivée et à l'heure de départ de ce jour. Ces champs peuvent être répétés jusqu'à 14 fois, soit une semaine de doubles vacations.
Vous souhaitez utiliser ce formulaire sur votre site web ? Obtenez le modèle !
Formulaire de liste de classe
Maintenant, jetez un coup d'œil à cette liste de classe que nous proposons également comme modèle :
Il commence par recueillir les informations relatives à l'enseignant afin de faciliter le suivi de chaque envoi.
Ensuite, grâce au champ Répétiteur, les enseignants peuvent facilement ajouter des informations pour chaque élève de leur liste - comme le niveau scolaire, la date d'anniversaire ou toute autre donnée qu'ils souhaitent inclure pour la tenue des dossiers.
Les enseignants peuvent utiliser ce tableau de service pour un maximum de 20 élèves. Ou, comme toujours, ce modèle de formulaire est totalement personnalisable, de sorte que le nombre maximum d'entrées autorisées peut être modifié.
Ce formulaire vous plaît ? Obtenez le modèle !
Consultez également ce guide pour savoir si vous devez ou non utiliser le champ WPForms Repeater ou le champ Layout avec la logique conditionnelle pour optimiser votre formulaire.
Pourquoi devrais-je autoriser les visiteurs à dupliquer des champs de formulaire ?
C'est bon pour les utilisateurs de vos formulaires ! Permettre aux visiteurs de dupliquer les champs d'un formulaire facilite grandement le processus de remplissage des formulaires, en particulier lorsque les utilisateurs doivent saisir des informations similaires ou répétitives. Les visiteurs de votre site peuvent ainsi gagner du temps et remplir les formulaires de manière plus pratique et plus efficace.
Et c'est bon pour vous aussi ! Lorsque les utilisateurs peuvent dupliquer des champs de formulaire, il vous est plus facile de collecter et d'organiser des données à des fins d'analyse, car les points de données similaires sont regroupés et plus faciles à gérer.
De plus, votre formulaire reste organisé et visuellement attrayant. Les visiteurs de votre site ne seront pas submergés par de longues sections de champs vides, et vous n'aurez pas à créer une suite alambiquée de règles de logique conditionnelle pour garder les champs supplémentaires cachés.
Le champ des répétiteurs est une solution gagnante pour tout le monde !
FAQ
Chez WPForms, nous sommes toujours ravis d'offrir des conseils sur les fonctionnalités et les outils que nous fournissons. Voici donc les réponses aux questions les plus fréquemment posées sur la duplication des champs de formulaire :
Que signifie permettre aux visiteurs de dupliquer les champs d'un formulaire ?
Permettre aux visiteurs de dupliquer les champs d'un formulaire signifie leur donner la possibilité de créer plusieurs instances d'un champ spécifique dans un formulaire. Ils peuvent ainsi saisir des informations similaires ou répétitives de manière plus efficace.
Chez WPForms, nous appelons ces doublons des champs répétitifs, car les utilisateurs du formulaire peuvent répéter ces champs pour entrer plus d'informations.
Comment puis-je mettre en place la duplication des champs dans les formulaires de mon site web ?
Les méthodes de mise en œuvre peuvent varier en fonction de la plateforme ou des outils que vous utilisez.
Comme pour WPForms, nous permettons la duplication des champs par un simple clic ou une action de glisser-déposer. Dans d'autres cas, vous devrez peut-être utiliser un code personnalisé ou des plugins pour ajouter cette fonctionnalité.
Dois-je fixer une limite au nombre de fois qu'un champ de formulaire peut être dupliqué ?
La fixation de limites peut contribuer à maintenir la convivialité du formulaire et empêcher les utilisateurs de créer un nombre excessif de champs, ce qui pourrait avoir une incidence sur les performances du formulaire ou la gestion des données.
Avec le champ WPForms Repeater, vous pouvez fixer une limite maximale pour les entrées dupliquées, afin de contrôler cet aspect de votre formulaire.
Créez votre formulaire WordPress maintenant
Ensuite, consultez ce guide simple et rapide
J'ai donné pas mal d'informations sur la façon de permettre aux visiteurs de dupliquer des champs, mais il y a encore plus à apprendre sur l'utilisation du champ Repeater. Cette fonctionnalité offre tellement de possibilités qu'il y a beaucoup à dire.
Pour apprendre d'autres astuces rapides et faciles - y compris des idées de personnalisation qui ne sont pas abordées ici - ne manquez pas de jeter un coup d'œil à notre tutoriel sur le terrain des répéteurs.
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.
