Comment autoriser les visiteurs à dupliquer les champs du formulaire

Il arrive souvent que 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.

Désormais, 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 en double en seulement 5 étapes.

Comment autoriser les visiteurs à dupliquer les champs du 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 va de soi que vous aurez besoin d’installer et d’activer WPForms sur votre site WordPress pour dupliquer les champs de vos formulaires.

Alors, procurez-vous d’abord le plugin WPForms !

1. Sélectionnez ou créez votre formulaire

Le champ Répéteur est une fonctionnalité intéressante incluse dans les formulaires que vous créez via WPForms. Grâce à lui, les utilisateurs de votre formulaire peuvent ajouter plus d'entrées ou dupliquer des blocs entiers du formulaire.

Mais vous n'avez pas besoin de 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 souhaiteriez modifier avec le champ Répéteur. Cliquez simplement sur Modifier sous le formulaire pour lequel vous souhaitez ouvrir le générateur de formulaire.

Mais si vous devez créer un nouveau formulaire, vous pouvez prendre une longueur d'avance en choisissant parmi des milliers de modèles de formulaire fournis dans la galerie WPForms.

Nous proposons une vaste sélection de modèles de formulaires dotés de la fonctionnalité de champ Répéteur intégrée.

Vous pouvez également choisir un autre modèle de formulaire et ajouter rapidement le champ Répéteur avec le générateur de formulaire.

Et, comme toujours, vous pouvez créer vous-même votre formulaire à 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 votre formulaire sélectionné et chargé dans le générateur de formulaire, 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 Disposition, le champ Répéteur permet d'y ajouter d'autres champs de votre formulaire.

Alors, quels champs appartiennent à la section des champs Répéteur ? Les champs que vous souhaitez autoriser les utilisateurs de votre formulaire à dupliquer.

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

Avant que WPForms ne propose le champ Répéteur, vous aviez peut-être encombré votre formulaire avec une poignée de champs Nom dont votre utilisateur * pourrait* avoir besoin.

Ou vous avez peut-être utilisé des paramètres de logique conditionnelle pour inclure des champs de nom supplémentaires si l'utilisateur souhaitait en inclure davantage.

Quoi qu'il en soit, le champ Répéteur facilite désormais la duplication des champs pour vous et les utilisateurs de votre formulaire !

3. Afficher les lignes ou les blocs

Maintenant, avant d'aller plus loin, jetez un œil aux options d'affichage appliquées au champ Répéteur.

Non seulement vous pouvez personnaliser les champs de la zone de champ Répéteur pour les ajouter sous forme de lignes uniques, mais vous pouvez également autoriser la duplication de blocs entiers de champs.

Conseil de 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 sous forme de 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 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 des champs. Nous en saurons plus 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 sous forme de section.

Désormais, lorsque les utilisateurs du formulaire ajoutent un autre participant, ils peuvent fournir toutes les informations dont j'ai besoin sur le formulaire pour chaque bloc.

De cette façon, les utilisateurs du formulaire peuvent dupliquer des sections entières du formulaire à la fois.

4. Choisissez une mise en page

Ensuite, découvrez les différentes manières dont vous pouvez 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 inégales.

Si vous disposez de rangées 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 colonnes Lignes et Disposition dans le générateur de formulaire ci-dessus ressemblerait à ceci pour un utilisateur de formulaire :

Ou vous souvenez-vous du bloc que je vous ai montré à la fin de l'étape 3 avec le nom du participant, les coordonnées d'urgence et d'autres champs ?

Je pourrais utiliser une disposition de 2 colonnes pour personnaliser cette partie du formulaire.

Ensuite, cela ressemblerait à ceci pour l'utilisateur :

Conseil de pro : utilisez un champ Nom simple sur une seule ligne pour garder 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 propre et organisé dans l'ensemble de votre formulaire.

5. Personnalisez la vue des boutons

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

Ce sont les boutons sur lesquels l'utilisateur de votre 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 logés sous le bloc au lieu de l'extrémité de la ligne, ce qui permet de l'allonger grâce à la personnalisation permet de garder les choses visuellement bien rangé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 brut

Si votre bouton affiche du texte de quelque nature que ce soit, vous pouvez le personnaliser dans la case suivante. C'est ici que vous pouvez modifier ce que lit l' étiquette du bouton .

Sur un formulaire d'inscription de groupe, par exemple, vous pouvez personnaliser votre bouton pour lire « 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 inscrire jusqu'à 10 participants sur ce formulaire.

Ainsi, en appliquant les paramètres indiqué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 reproductibles, assurez-vous de les enregistrer votre formulaire à publier lorsque vous êtes prêt.

Et c'est tout ce qu'il y a à faire ! Vous savez maintenant comment permettre aux visiteurs du site Web de dupliquer les champs de vos formulaires.

Bonus : le champ de 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 comme modèle :

Les détails de l'employé sont collectés en premier, y compris son nom, son adresse e-mail, son identifiant, 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, essentiellement en utilisant ce formulaire comme feuille de temps hebdomadaire.

Il utilise des blocs et des colonnes répétables qui permettent aux utilisateurs de dupliquer les champs du jour de la semaine où ils ont travaillé, ainsi que l'heure d'entrée et de sortie de ce jour. Ces champs peuvent être répétés jusqu'à 14 fois, soit l'équivalent d'une semaine de doubles équipes.

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

Formulaire de liste de classe

Maintenant, consultez cette liste de classes que nous proposons également comme modèle :

Cela commence par rassembler 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 sur chaque élève de leur liste, comme le niveau scolaire, l'anniversaire ou toute autre donnée qu'ils souhaitent inclure pour la tenue des dossiers.

Les enseignants peuvent utiliser cette liste pour un maximum de 20 élèves. Ou, comme toujours, ce modèle de formulaire est totalement personnalisable, le nombre maximum d'entrées autorisées peut donc être modifié.

Vous aimez ce formulaire ? Obtenez le modèle !

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

C'est bon pour les utilisateurs de votre formulaire ! Permettre aux visiteurs de dupliquer les champs du formulaire facilite grandement le processus de remplissage des formulaires, en particulier lorsque les utilisateurs doivent saisir des informations similaires ou répétitives. Cela peut faire gagner du temps aux visiteurs de votre site et rendre leur expérience de remplissage de formulaires 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 à analyser, car les points de données similaires sont regroupés et plus faciles à gérer.

De plus, cela permet simplement de garder votre formulaire 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 besoin de créer une suite alambiquée de règles de logique conditionnelle pour masquer les champs supplémentaires.

Le Repeater Field est gagnant-gagnant pour tout le monde !

FAQ

Chez WPForms, nous sommes toujours ravis de vous offrir 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 autoriser les visiteurs à dupliquer les champs du formulaire ?

Permettre aux visiteurs de dupliquer les champs d'un 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 plus efficacement des informations similaires ou répétitives.

Chez WPForms, nous appelons ces doublons champs de répétition, car les utilisateurs du formulaire peuvent répéter ces champs pour saisir plus d'informations.

Comment puis-je mettre en œuvre la duplication de champs sur 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.

Quant à WPForms, nous permettons la duplication de champs avec un simple clic ou glisser-déposer. Dans d'autres cas, vous devrez peut-être utiliser du 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 définition de limites peut aider à maintenir la convivialité 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 la gestion des données.

Avec le champ WPForms Repeater, vous pouvez définir une limite maximale pour les entrées en double, 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 choses qu'il y a beaucoup à couvrir.

Pour découvrir quelques conseils supplémentaires rapides et faciles, y compris des idées de personnalisation non couvertes ici, assurez-vous de jeter un œil à notre didacticiel sur le terrain du 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 comprend de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de didacticiels et de guides WordPress gratuits.