Comment utiliser le champ Repeater dans WPForms [Simple et rapide]

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

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

Dans cet article, je vais vous montrer la manière la plus simple de concevoir un champ répétitif pour WPForms afin d'améliorer la fonctionnalité et l'expérience utilisateur de votre site web.

Créer des formulaires avec des champs répétitifs 🔁

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

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

Etape 1 : Installer WPForms Pro

WPForms offre une solution très intuitive et sans effort pour créer des champs répétitifs. 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 serez en mesure de créer des formulaires avec des champs répétitifs et d'accéder à des tonnes de fonctionnalités et d'addons comme la géolocalisation, Google Sheets, et plus encore.

Vous êtes prêt ? Passez à l'étape suivante pour commencer à créer un formulaire avec des champs répétitifs.

Passez à WPForms Pro maintenant 🐻

Étape 2 : Créer un nouveau formulaire

Dans votre tableau de bord WordPress, passez votre curseur sur le menu latéral WPForms et cliquez sur Ajouter un nouveau.

Vous devez 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 000 modèles de formulaires, vous permettant de créer n'importe quel type de formulaire sur WordPress.

Mais, afin d'illustrer le travail avec les champs Repeater dans WPForms, je vais commencer avec le formulaire vierge et le construire à partir de zéro.

En quelques secondes, l'écran de création de formulaire s'affiche et vous permet de créer votre formulaire personnalisé à l'aide de contrôles par "glisser-déposer". Par souci de simplicité, créons un formulaire ne comportant que trois champs : Nom, Courriel 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 Repeater en le faisant glisser du panneau de gauche vers celui de droite.

Après avoir inséré le champ Répétiteur, cliquez dessus pour ouvrir les options de champ qui s'y rapportent sur la gauche.

Je vais laisser le paramètre d'affichage par défaut, car il convient parfaitement à mon scénario.

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

Lorsque vous sélectionnez la mise en page, l'aperçu de droite se modifie instantanément et des zones de dépôt apparaissent dans les colonnes. C'est dans ces zones que vous pouvez insérer tout autre champ que vous souhaitez rendre répétable.

Mais tout d'abord, renommons le champ Repeater. Vous pouvez le faire en modifiant l'étiquette dans les options de champ.

Ensuite, il est temps d'insérer les champs dans les zones de dépôt des champs Repeater. Après avoir fait glisser les champs Nom, Email et Téléphone un par un dans les zones de dépôt des champs Repeater, voici à quoi ressemble le formulaire :

Vous avez peut-être remarqué que quelque chose ne tourne pas rond. Et vous avez raison. Le champ Nom est divisé en deux lignes, ce qui n'est pas très agréable dans le contexte visuel actuel.

Mais c'est une solution facile à mettre en œuvre. Dans l'étape suivante, je vais personnaliser certains paramètres et l'apparence du site.

Étape 3 : Personnaliser le champ du répéteur

Comme je souhaite que tous les champs de ma section répétitive apparaissent sur une seule ligne, je vais modifier le format du champ Nom pour 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 de l'harmoniser avec les autres champs.

À ce stade, le champ répétiteur est prêt. Mais avant de publier le formulaire, passons en revue quelques paramètres supplémentaires du champ Repeater que vous pourriez vouloir vérifier.

(Facultatif) Paramètres supplémentaires du champ du répéteur

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

Si vous faites défiler le panneau de gauche, vous verrez des options permettant de définir les durées minimale et maximale pendant lesquelles le champ du répéteur peut être dupliqué par le visiteur. Il vous suffit de saisir les chiffres pour définir vos limites.

Ensuite, remontons en haut du panneau des options de champ. Cette fois, cliquez sur Blocs sous les options d'affichage.

Lorsque vous utilisez le champ Repeater en mode Blocs, vous bénéficiez de 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 libellés des boutons.

En outre, vous avez la possibilité d'ajouter un groupe de champs sur plusieurs lignes lorsque vous utilisez le mode Blocs. Avec le mode Lignes, vous êtes limité à l'ajout de champs dans une seule ligne.

Les rangées conviennent parfaitement aux besoins simples, tels que le formulaire que je construis dans ce tutoriel. Cependant, l'option Blocs vous donne plus de contrôle pour les cas d'utilisation plus avancés où vous devez rendre un plus grand groupe de champs répétables.

Lorsque vous avez terminé vos modifications, n'oubliez pas d'appuyer sur le bouton Enregistrer.

Bon travail ! Vous êtes presque prêt à publier le formulaire.

Étape 4 : Publier votre formulaire avec les champs Repeater

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

Ensuite, une fenêtre modale s'affiche et vous permet de sélectionner votre méthode d'intégration. Choisissons Créer une nouvelle page.

Saisissez ensuite un nom pour votre formulaire et cliquez sur " Let's Go".

L'éditeur de blocs de WordPress s'ouvre alors. Le formulaire que vous venez de créer avec le champ répétiteur devrait déjà être intégré ici.

C'est le moment idéal pour styliser votre formulaire à l'aide de l'éditeur de blocs. En particulier, vous pouvez 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 du bloc dans le panneau de droite. Faites défiler la page jusqu'à la section Thèmes et choisissez-en un.

Maintenant que votre formulaire est tout beau et tout impressionnant, allez-y et publiez-le quand vous serez prêt. Cliquez simplement sur le bouton Publier en haut de la page.

Une fois la publication du formulaire terminée, il ne reste plus qu'à tester le formulaire intégré pour s'assurer qu'il fonctionne comme prévu sur le frontend.

Voici une démonstration rapide dans laquelle je teste le formulaire et vérifie que tout va bien avec la fonctionnalité du champ Repeater en soumettant une entrée test :

Et tout fonctionne exactement comme prévu 🙂 .

Et voilà. Grâce au champ répétiteur, vous pouvez désormais créer facilement des formulaires dynamiques contrôlés par l'utilisateur. C'est la clé pour stimuler l'engagement et la satisfaction des utilisateurs, ce qui est nécessaire pour collecter les soumissions de formulaires à grande échelle.

Créer un formulaire avec un champ répétitif

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.

Plus de questions sur le champ Repeater de WPForms

La création de formulaires pour les champs de répéteurs est un sujet d'intérêt populaire parmi nos lecteurs. Voici quelques réponses rapides aux questions les plus fréquentes :

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

Un champ répétiteur est un outil polyvalent qui permet aux utilisateurs d'ajouter dynamiquement plusieurs séries de champs identiques dans un formulaire. Imaginez qu'il s'agit d'un bouton "copier" pour un groupe de champs. Il améliore la flexibilité lors de la saisie de données répétitives, telles que des enregistrements multiples.

Pourquoi choisir le champ répétiteur de WPForms ?

La beauté du champ répétiteur de 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 donnez aux utilisateurs la possibilité de déterminer l'étendue de leurs données. C'est un clin d'œil subtil à l'autonomie de l'utilisateur et cela améliore l'expérience globale de l'utilisateur.
• Flexibilité dans la conception des formulaires : Chaque formulaire n'est pas unique. Grâce aux champs répétitifs, vous pouvez répondre à différents scénarios, qu'il s'agisse d'une entrée unique ou de plusieurs entrées, ce qui garantit que votre formulaire s'adapte à diverses exigences.
• Structuration cohérente des données : L'un des problèmes posés par les champs multiples est l'incohérence des données. Les données restent structurées et uniformes grâce aux champs répétitifs, ce qui simplifie le traitement et l'analyse en amont.
• 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 propre, garantissant que les utilisateurs ne sont pas submergés au premier coup d'œil.

Que vous soyez un entrepreneur souhaitant améliorer l'accueil de ses clients ou un blogueur soucieux de collecter efficacement des données, le champ répétiteur de WPForms est inestimable.

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

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

Créez votre formulaire WordPress maintenant

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.