Comment utiliser le champ Répéteur dans WPForms [Rapide et facile]

Vous vous demandez comment insérer un champ répéteur dans votre formulaire pour capturer plus de données pour chaque soumission ?

Les champs répéteurs dans les formulaires permettent aux utilisateurs de saisir plusieurs ensembles de données similaires tout en rendant les formulaires plus intuitifs et conviviaux.

Dans cet article, je vais vous montrer le moyen le plus simple de concevoir un champ répéteur pour WPForms afin d'améliorer les fonctionnalités et l'expérience utilisateur de votre site Web.

Créez des formulaires WordPress avec des champs répétables ! :)

Comment créer un formulaire avec un champ répétable dans WordPress

Suivez ces étapes pour créer un formulaire avec des champs répétables pour votre site WordPress :

Étape 1 : Installer le plugin WPForms Pro

WPForms offre une solution très intuitive et sans effort pour créer des champs répétables. Pour commencer, vous aurez besoin d'une licence WPForms Pro.

Après avoir obtenu WPForms Pro, installez le plugin sur votre site. Si vous n'êtes pas familier avec l'installation de plugins, consultez ce guide sur l'installation de WPForms.

Une fois WPForms Pro installé et prêt, vous pourrez créer des formulaires avec des champs répétables et accéder à des tonnes de fonctionnalités et d'extensions percutantes comme la géolocalisation, Google Sheets, et plus encore.

Passez à WPForms Pro maintenant ! 🙂

Prêt ? Passez à l'étape suivante pour commencer à créer un formulaire avec des champs répétables.

Étape 2 : Créer un nouveau formulaire

Dans votre tableau de bord WordPress, survolez le menu latéral WPForms et cliquez sur Ajouter.

Vous devrez maintenant donner un nom à votre formulaire et choisir un modèle ou créer votre formulaire à partir de zéro. WPForms est livré avec plus de 2 100 modèles de formulaires, vous permettant de créer tout type de formulaire dans WordPress.

Mais, afin d'illustrer le fonctionnement des champs répétables dans WPForms, je vais commencer avec un formulaire vierge et le construire à partir de zéro.

En quelques secondes, l'écran de création de formulaire se chargera, où vous pourrez construire votre formulaire personnalisé à l'aide de contrôles glisser-déposer. Pour plus de simplicité, créons un formulaire avec seulement trois champs : Nom, Email et Téléphone.

Mais si nous voulons que ces champs soient répétables, la première chose à faire est d'insérer le champ Répétable en le faisant glisser du panneau de gauche vers la droite.

Après avoir inséré le champ Répétable, cliquez dessus pour ouvrir les Options du champ associées sur la gauche. Je vais laisser le paramètre d'affichage par défaut car cela convient parfaitement à mon scénario.

Mais pour ma configuration, j'aurai besoin d'une disposition à trois colonnes. Vous êtes libre de choisir la disposition qui vous convient en sélectionnant simplement l'un des 9 préréglages de disposition disponibles pour le Répéteur.

Lorsque vous sélectionnez la disposition, vous verrez l'aperçu à droite changer instantanément avec des zones de dépôt apparaissant dans les colonnes. Ce sont les zones où vous pouvez insérer tous les autres champs que vous souhaitez rendre répétables.

Mais d'abord, renommons le champ Répétable pendant que nous y sommes. Vous pouvez le faire en modifiant l'étiquette dans les Options du champ.

Ensuite, il est temps d’insérer les champs dans les zones de dépôt du champ Répéteur. Après avoir fait glisser les champs Nom, E-mail et Téléphone un par un dans les zones de dépôt du champ Répéteur, voici à quoi ressemble le formulaire :

Vous avez peut-être remarqué que quelque chose cloche un peu ici. Et vous auriez raison. Le champ Nom est divisé en deux lignes, ce qui n’est pas très esthétique dans le contexte visuel actuel. Mais c’est une correction facile. Dans l’étape suivante, je vais personnaliser certains des paramètres et de l’apparence.

Étape 3 : Personnaliser le champ répétable

Comme je veux que tous les champs de ma section répéteur apparaissent sur une seule ligne, je vais modifier le format du champ Nom afin qu’il s’aligne sur les autres champs.

Vous pouvez le faire en cliquant sur le champ Nom pour ouvrir ses Options de champ, où vous trouverez le menu déroulant Format dans le volet de gauche. Cliquez sur le menu déroulant Format et sélectionnez Simple.

Vous remarquerez que le champ Nom a été réduit à un seul champ afin qu’il soit aligné sur les autres champs.

À ce stade, le champ répéteur est prêt. Mais avant de passer à la publication du formulaire, examinons quelques paramètres supplémentaires du champ Répéteur que vous pourriez vouloir vérifier.

Paramètres supplémentaires du champ Répéteur (facultatif)

Cliquez sur le champ Répéteur pour ouvrir à nouveau les Options de champ.

Si vous faites défiler le panneau de gauche vers le bas, vous verrez des options pour définir le nombre minimum et maximum de fois où le champ répéteur peut être dupliqué par le visiteur. Entrez simplement les nombres pour définir facilement vos limites.

Ensuite, faisons défiler vers le haut du panneau Options de champ. Cette fois, cliquez sur Blocs sous les options d’affichage.

Lorsque vous utilisez le champ Répéteur en mode Blocs, vous obtenez des paramètres supplémentaires. Par exemple, vous pouvez également personnaliser les boutons « ajouter » et « supprimer » que les visiteurs utiliseront pour dupliquer le champ ou en supprimer une copie.

Vous pouvez choisir parmi différents types de boutons et modifier les étiquettes des boutons.

De plus, vous avez également la liberté d’ajouter un groupe de champs sur plusieurs lignes lorsque vous utilisez le mode Blocs. Avec les Lignes, vous êtes limité à l’ajout de champs sur une seule ligne.

Les Lignes fonctionnent très bien pour des besoins simples, tels que le formulaire que je construis dans ce tutoriel. Cependant, l’option Blocs vous donne plus de contrôle pour des cas d’utilisation plus avancés où vous devez rendre un groupe de champs plus grand répétable.

Lorsque vous avez terminé les modifications, assurez-vous d’appuyer sur le bouton Enregistrer.

Étape 4 : Publier votre formulaire avec des champs répétables

WPForms facilite l'intégration de vos formulaires et la collecte de soumissions. Vous pouvez commencer le processus d'intégration en cliquant sur le bouton Intégrer en haut du constructeur de formulaires.

Après cela, une fenêtre modale apparaîtra pour vous permettre de sélectionner votre méthode d'intégration. Sélectionnons Créer une nouvelle page.

Ensuite, entrez un nom pour votre formulaire et cliquez sur C'est parti.

Après cela, l'éditeur de blocs WordPress s'ouvrira. Le formulaire que vous venez de créer avec le champ répétiteur devrait déjà y être intégré.

Ce serait le moment idéal pour styliser votre formulaire à l'aide de l'éditeur de blocs. En particulier, vous voudrez peut-être essayer d'ajouter un thème à votre formulaire pour lui donner un aspect moderne.

Vous pouvez sélectionner un thème en cliquant n'importe où sur le formulaire pour ouvrir les options de bloc dans le panneau de droite. Faites défiler jusqu'à la section Thèmes et choisissez-en un.

Maintenant que votre formulaire est superbe et impressionnant, publiez-le quand vous êtes prêt. Appuyez simplement sur le bouton Publier en haut.

Une fois que vous avez terminé de publier le formulaire, la seule chose qu'il reste à faire est de tester le formulaire intégré pour vous assurer qu'il fonctionne comme prévu sur le frontend.

Voici une courte démonstration de moi testant le formulaire et vérifiant que tout va bien avec la fonctionnalité du champ Répéteur en soumettant une entrée de test :

Et tout fonctionne exactement comme prévu ! Voilà. Avec le champ répétiteur, vous pouvez désormais créer facilement des formulaires dynamiques que l'utilisateur peut contrôler. C'est la clé pour augmenter l'engagement et la satisfaction des utilisateurs, nécessaires pour collecter des soumissions de formulaires à grande échelle.

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.

Créez votre formulaire avec champ répétiteur maintenant ! 🙂

Plus de questions sur le champ répétiteur de WPForms

La création de formulaires avec champ répétiteur est un sujet d'intérêt populaire parmi nos lecteurs. Voici quelques réponses rapides à certaines des questions les plus fréquemment posées :

Qu'est-ce qu'un champ répétiteur ?

Un champ répétiteur permet aux utilisateurs d'ajouter dynamiquement plusieurs ensembles de champs identiques dans un seul formulaire. Il fonctionne comme un bouton « dupliquer » pour un groupe de champs.

Par exemple, dans un formulaire d'inscription à un événement, les utilisateurs peuvent ajouter plusieurs participants en répétant les champs Nom, E-mail et Téléphone sans avoir à remplir des formulaires distincts pour chaque personne.

Pourquoi choisir le champ répétiteur WPForms ?

La beauté du champ répétiteur WPForms est qu'il facilite la collecte de données pour vous et vos visiteurs.

• Conception centrée sur l'utilisateur : En introduisant des champs répétitifs, vous permettez aux utilisateurs de dicter l'étendue de leurs saisies. C'est un clin d'œil subtil à l'autonomie de l'utilisateur et cela améliore l'expérience utilisateur globale.
• Flexibilité dans la conception des formulaires : Tous les formulaires ne sont pas universels. Avec les champs répétitifs, vous pouvez répondre à divers scénarios, qu'il s'agisse d'une seule saisie ou de plusieurs saisies, garantissant que votre formulaire s'adapte à des exigences diverses.
• Structuration cohérente des données : L'un des défis avec plusieurs champs est l'incohérence des données. Les données restent structurées et uniformes avec les champs répétitifs, simplifiant le traitement et l'analyse backend.
• Réduction de la longueur du formulaire : Au lieu d'avoir un formulaire long et intimidant avec de nombreux champs, les champs répétitifs offrent un aspect plus épuré, garantissant que les utilisateurs ne sont pas submergés au premier coup d'œil.

Puis-je utiliser des champs répétitifs dans Contact Form 7 ?

Contact Form 7 n'a pas de fonctionnalité native de champs répétitifs. Vous devriez installer des plugins tiers ou écrire du code personnalisé pour ajouter des champs répétitifs, ce qui est complexe et peu fiable.

WPForms inclut les champs répétitifs comme fonctionnalité intégrée dans la version Pro, sans nécessiter de codage, ce qui en fait le meilleur choix pour les formulaires nécessitant cette fonctionnalité.

Quels sont les meilleurs cas d'utilisation pour les champs répétitifs ?

Les champs répétitifs fonctionnent parfaitement pour les inscriptions à des événements de groupe (collecte d'informations pour plusieurs participants), les formulaires d'adhésion familiale (ajout de plusieurs membres de la famille), les formulaires de commande en gros (commande de plusieurs produits avec quantités), les formulaires de contact d'urgence (liste de plusieurs contacts) et tout scénario où les utilisateurs doivent soumettre le même type d'informations pour plusieurs personnes ou articles.

Puis-je ajouter des champs répétitifs à WPForms Lite ?

Non, les champs répétitifs sont une fonctionnalité Pro disponible uniquement dans les licences WPForms Basic et supérieures. WPForms Lite inclut des champs de formulaire de base mais ne prend pas en charge les champs avancés comme les répétitifs, la logique conditionnelle ou l'intégration de paiement. Pour utiliser les champs répétitifs, vous devez passer à WPForms Pro.

Quelle est la différence entre le mode d'affichage Lignes et Blocs pour les champs répétitifs ?

Le mode Lignes affiche les champs répétitifs dans une seule ligne horizontale, parfait pour les répétitions simples comme Nom/Email/Téléphone.

Le mode Blocs permet des mises en page multi-lignes au sein de chaque répétition, idéal pour des informations complexes comme les profils complets des participants avec adresse, contact d'urgence et restrictions alimentaires.

Comment limiter le nombre de fois qu'un champ peut être répété ?

Dans les paramètres du Champ Répétitif, utilisez les options Lignes minimales et Lignes maximales pour définir les limites. Par exemple, définissez un minimum de 1 (au moins une saisie requise) et un maximum de 10 (pas plus de 10 répétitions).

Cela empêche les soumissions de spam avec des répétitions excessives et vous aide à planifier les ressources en fonction des quantités maximales réalistes de participants ou de commandes.

Ensuite, apprenez à créer un formulaire accordéon dans WordPress

Vous cherchez un moyen simple d'ajouter une conception de formulaire accordéon à votre site WordPress ? Consultez notre article sur la méthode la plus simple pour créer un formulaire accordéon à l'aide de WPForms pour améliorer la convivialité et l'expérience utilisateur de votre site.

Créez votre formulaire WordPress maintenant

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.