Comment permettre aux visiteurs de dupliquer les champs de formulaire

Il y a de nombreuses fois où les utilisateurs de votre formulaire souhaitent probablement pouvoir simplement 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 Répéteur de WPForms, les utilisateurs de votre site Web peuvent faire exactement cela ! Dans ce tutoriel, je vais vous montrer comment modifier vos formulaires pour autoriser la duplication de champs en seulement 5 étapes.

Comment permettre aux visiteurs de dupliquer les champs de formulaire

Tout d'abord, obtenez WPForms

Ok, je sais que j'ai dit que ce tutoriel ne prend que 5 étapes, donc cela semble supplémentaire. 😉 Mais, il est entendu que vous aurez besoin de WPForms installé et activé sur votre site WordPress pour dupliquer les champs de vos formulaires.

Alors, obtenez le plugin WPForms, d'abord !

1. Sélectionnez ou créez votre formulaire

Le champ Répéteur est une fonctionnalité géniale incluse avec les formulaires que vous créez via WPForms. Avec lui, les utilisateurs de votre formulaire peuvent ajouter plus d'entrées ou dupliquer des blocs entiers du formulaire.

Mais vous n'avez pas à créer un tout nouveau formulaire pour commencer à permettre aux utilisateurs de dupliquer des champs.

Vous utilisez peut-être déjà des formulaires sur votre site que vous aimeriez modifier avec le champ Répéteur. Cliquez simplement sur Modifier sous le formulaire que vous souhaitez ouvrir dans le constructeur 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é du champ Répéteur.

Ou, vous pouvez choisir un autre modèle de formulaire et ajouter rapidement le champ Répéteur avec le constructeur de formulaires.

Et, comme toujours, vous pouvez construire votre formulaire vous-même à partir de zéro en commençant par un formulaire vierge.

Créez votre formulaire WordPress maintenant

2. Ajoutez le champ Répéteur

Une fois que vous avez sélectionné et chargé votre formulaire dans le constructeur de formulaires, vous pouvez ajouter le champ Répéteur.

Vous le verrez parmi les champs sur le côté gauche de l'écran.

Cliquez simplement sur le champ Répéteur, faites-le glisser vers votre formulaire et déposez-le là où vous le souhaitez.

Ensuite, comme le champ Mise en page, le champ Répéteur permet d'ajouter d'autres champs de votre formulaire à l'intérieur.

Alors, quels champs appartiennent à la section du champ Répéteur ? Les champs que vous souhaitez permettre à vos utilisateurs de formulaire de dupliquer.

Sur un formulaire d'inscription de groupe, par exemple, les utilisateurs aimeraient probablement inclure plusieurs noms de participants à enregistrer en même temps.

Avant que WPForms ne propose le champ Répéteur, vous auriez pu surcharger votre formulaire avec une poignée de champs Nom dont votre utilisateur * *pourrait* * avoir besoin.

Ou vous auriez pu utiliser les paramètres de logique conditionnelle pour inclure des champs Nom supplémentaires si l'utilisateur en voulait plus.

Quel que soit le cas, le champ Répéteur rend désormais la duplication des champs beaucoup plus facile pour vous et vos utilisateurs de formulaire !

À lire également : Façons d'utiliser WPForms pour les sites Web éducatifs

3. Affichez les lignes ou les blocs

Maintenant, avant d'aller plus loin, regardez les options Affichage qui sont appliquées au champ Répéteur.

Non seulement vous pouvez personnaliser les champs dans la zone du champ Répéteur pour qu'ils soient ajoutés en tant que Lignes uniques, mais vous pouvez également permettre la duplication de Blocs entiers de champs.

Astuce Pro : Accédez à l'onglet Avancé pour masquer l'étiquette du champ Répéteur comme je l'ai fait.

Lorsque vous sélectionnez les champs de la zone Répéteur à afficher en tant que Lignes, vos utilisateurs de formulaire dupliqueront chaque ligne horizontale.

Comme vous pouvez le voir ci-dessus, les boutons d'ajout + ou de suppression – se trouvent à la fin de chaque Ligne.

Les Blocs, en revanche, sont utiles pour combiner des champs à répéter ensemble, qui ne peuvent pas tenir sur une seule Ligne.

Et avec les Blocs, les boutons + ajouter ou – supprimer se trouvent sous toute la section de champs. Plus d'informations sur ces boutons, plus tard.

Dans mon exemple ci-dessous, j'ai sélectionné Blocs comme moyen d'afficher mes champs répétables. J'ai ensuite inclus les champs dans la zone de champ Répéteur que je souhaite que les utilisateurs puissent dupliquer en tant que section.

Maintenant, lorsque les utilisateurs du formulaire ajoutent un autre participant, ils peuvent fournir toutes les informations que j'ai requises sur le formulaire pour chaque Bloc.

De cette façon, les utilisateurs du formulaire peuvent dupliquer des sections entières du formulaire en une seule fois.

4. Choisissez une mise en page

Ensuite, découvrez les différentes façons dont vous pouvez organiser la Mise en page de vos champs répétables.

Vous pouvez configurer vos champs en lignes simples, en colonnes espacées uniformément et en colonnes inégales.

Si vous avez des Lignes répétables 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 Lignes et de colonnes de Mise en page dans le générateur de formulaires ci-dessus ressemblerait à ceci pour un utilisateur du formulaire :

Ou, souvenez-vous de ce Bloc que je vous ai montré à la fin de l'étape 3 avec le Nom du participant, les Informations de contact d'urgence et d'autres champs ?

Je pourrais utiliser une Mise en page de 2 colonnes pour personnaliser cette partie du formulaire.

Ensuite, cela ressemblerait à peu près à ceci pour l'utilisateur :

Astuce de pro : Utilisez un champ Nom simple, sur une seule ligne, pour maintenir les colonnes uniformément espacées comme je l'ai fait ci-dessus.

La modification de ces aspects du champ Répéteur permet simplement de garder tout soigné et organisé tout au long de votre formulaire.

5. Personnalisez la vue du bouton

La dernière chose à personnaliser dans votre section de champ répéteur sont les boutons + et – pour ajouter et supprimer des champs répétables.

Ce sont les boutons sur lesquels votre utilisateur de formulaire cliquera pour ajouter des noms, des sections d'inscription ou tout autre champ que vous avez rendu disponible pour la duplication.

Par défaut, ces boutons affichent + ou – à la fin de chaque Ligne, mais vous pouvez personnaliser ces icônes lorsque vous utilisez un Bloc.

Étant donné que les boutons sont placés sous le Bloc au lieu de la fin de la Ligne, leur permettre de s'allonger grâce à la personnalisation permet de garder les choses visuellement ordonnées.

Tout d'abord, sélectionnez le Type de bouton.

Les options ici incluent :

• Boutons avec icônes
• Boutons
• Icônes avec texte
• Icônes
• Texte simple

Si votre bouton affiche du texte, vous pouvez le personnaliser dans la case suivante. C'est là que vous pouvez modifier le texte de l'Étiquette du bouton.

Sur un formulaire d'inscription de groupe, par exemple, vous pourriez personnaliser votre bouton pour qu'il affiche « Ajouter un participant ».

Enfin, vous pouvez choisir la Limite minimale et maximale pour 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, lors de l’application des 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, assurez-vous d’enregistrer votre formulaire pour le publier lorsque vous serez prêt.

Et c’est tout ! Vous savez maintenant comment permettre aux visiteurs de votre site Web de dupliquer des champs sur vos formulaires.

Bonus : Le champ Répéteur en action

Je vous ai montré comment utiliser la zone de champ Répéteur sur un formulaire d’inscription de groupe, mais j’aimerais partager quelques autres bons exemples de cette fonctionnalité en action.

Formulaire de feuille de temps des employés

Tout d’abord, jetez un œil à cette feuille de temps des employés que nous proposons en tant que modèle :

Les détails de l’employé sont d’abord recueillis, y compris son nom, son adresse e-mail, son identifiant d’employé, ainsi que le nombre total d’heures pour la semaine.

Les employés peuvent ensuite saisir leurs jours et heures spécifiques travaillés pour la semaine, utilisant essentiellement ce formulaire comme une feuille de temps hebdomadaire.

Il utilise des blocs et des colonnes répétables qui permettent aux utilisateurs de dupliquer des champs pour le jour de la semaine où ils ont travaillé, ainsi que l’heure d’arrivée et de départ de ce jour. Ces champs peuvent être répétés jusqu’à 14 fois, soit l’équivalent d’une semaine de doubles quarts de travail.

Vous voulez utiliser ce formulaire sur votre site Web ? Obtenez le modèle !

Formulaire de liste de classe

Maintenant, consultez cette liste de classe que nous proposons également en tant que modèle :

Il commence par recueillir les informations de l’enseignant pour un suivi facile de chaque soumission.

Ensuite, avec le champ Répéteur, les enseignants peuvent facilement ajouter des informations pour chaque élève de leur liste — comme le niveau scolaire, la date de naissance, ou toute autre donnée qu’ils souhaitent inclure pour la tenue des registres.

Les enseignants peuvent utiliser cette liste 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é.

Vous aimez ce formulaire ? Obtenez le modèle !

Consultez également ce guide pour savoir si vous devriez utiliser le champ WPForms Repeater ou le champ Layout avec la logique conditionnelle pour optimiser davantage votre formulaire.

Pourquoi devrais-je autoriser les visiteurs à dupliquer des champs de formulaire ?

C’est bon pour les utilisateurs de votre formulaire ! Permettre aux visiteurs de dupliquer des champs de formulaire rend le processus de remplissage des formulaires beaucoup plus facile, en particulier lorsque les utilisateurs doivent saisir des informations similaires ou répétitives. Cela peut faire gagner du temps à vos visiteurs et rendre leur expérience de remplissage de formulaire plus pratique et efficace.

Et c’est bon pour vous aussi ! Lorsque les utilisateurs peuvent dupliquer des champs de formulaire, il est plus facile pour vous de collecter et d’organiser les données pour analyse, car les points de données similaires sont regroupés et plus gérables.

De plus, cela maintient simplement votre formulaire organisé et visuellement attrayant. Vos visiteurs ne seront pas submergés par de longues sections de champs vides, et vous n’aurez pas à créer une piste complexe de règles de logique conditionnelle pour masquer les champs supplémentaires.

Le champ Répéteur est gagnant-gagnant pour tout le monde !

FAQ

Chez WPForms, nous sommes toujours ravis de fournir des conseils sur les fonctionnalités et les outils que nous proposons. Voici donc les réponses à certaines de nos questions les plus fréquemment posées sur la duplication des champs de formulaire :

Que signifie permettre aux visiteurs de dupliquer les champs de formulaire ?

Permettre aux visiteurs de dupliquer les champs de formulaire signifie leur offrir la possibilité de créer plusieurs instances d'un champ spécifique dans un formulaire. De cette façon, ils peuvent saisir des informations similaires ou répétitives plus efficacement.

Chez WPForms, nous appelons ces duplications des champs Répéteur, car les utilisateurs du formulaire peuvent répéter ces champs pour saisir plus d'informations.

Comment puis-je implémenter la duplication de champs sur les formulaires de mon site web ?

Les méthodes d'implémentation peuvent varier en fonction de la plateforme ou des outils que vous utilisez.

En ce qui concerne WPForms, nous permettons la duplication de champs en un simple clic ou par glisser-déposer. Dans d'autres cas, vous devrez peut-être utiliser du code personnalisé ou des plugins pour ajouter cette fonctionnalité.

Dois-je définir une limite au nombre de fois qu'un champ de formulaire peut être dupliqué ?

Définir des limites peut aider à maintenir l'utilisabilité du formulaire et à empêcher les utilisateurs de créer un nombre excessif de champs, ce qui pourrait avoir un impact sur les performances du formulaire ou sur la gestion des données.

Avec le champ Répéteur de WPForms, vous pouvez définir 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 rapide et facile

J'ai partagé 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 Répéteur. Cette fonctionnalité offre tellement de possibilités qu'il y a beaucoup à couvrir.

Pour découvrir d'autres astuces rapides et faciles, y compris des idées de personnalisation non abordées ici, assurez-vous de consulter notre tutoriel sur le champ Répéteur .

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.