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éez des formulaires Wordpress 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 :

• Étape 1 : Installer le plugin WPForms Pro
• Étape 2 : Créer un nouveau formulaire
• Étape 3 : Personnaliser le champ du répéteur
• Étape 4 : Publier votre formulaire avec les champs Repeater

Étape 1 : Installez le plugin 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.

Passez à WPForms Pro dès maintenant ! 🙂 .

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

É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éteur, cliquez dessus pour ouvrir les options de champ associées à gauche. Je vais laisser le paramètre Affichage par défaut, car cela fonctionne très bien dans mon cas.

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 cloche ici. Et vous avez raison. Le champ Nom est divisé en deux lignes, ce qui n'est pas très esthétique dans le contexte visuel actuel. Mais cela peut être facilement corrigé. À l'étape suivante, je vais personnaliser certains paramètres et l'apparence.

É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.

É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 ! Voilà, vous savez tout. Grâce au 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 stimuler l'engagement et la satisfaction des utilisateurs, indispensables pour collecter des soumissions de formulaires à grande échelle.

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.

Créez votre formulaire de champ répéteur dès maintenant ! 🙂

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 permet aux utilisateurs d'ajouter dynamiquement plusieurs ensembles de champs identiques dans un même 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 un formulaire distinct pour chaque personne.

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.

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

Contact Form 7 ne dispose pas d'une fonctionnalité native de champs répétitifs. Vous devrez 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 en tant que 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 des champs répéteurs ?

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 groupée (commande de plusieurs produits en quantité), les formulaires de contact d'urgence (liste de plusieurs contacts) et tout autre scénario dans lequel les utilisateurs doivent soumettre le même type d'informations pour plusieurs personnes ou articles.

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

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

Quelle est la différence entre les modes d'affichage « Lignes » et « Blocs » pour les champs répétiteurs ?

Le mode Lignes affiche les champs répétitifs sur une seule ligne horizontale, ce qui est idéal pour les répétitions simples telles que Nom/E-mail/Téléphone.

Le mode Blocs permet des mises en page sur plusieurs lignes dans chaque répétition, ce qui est idéal pour les informations complexes telles que les profils complets des participants avec leur adresse, leurs contacts en cas d'urgence et leurs restrictions alimentaires.

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

Dans les paramètres du champ Répéteur, utilisez les options Lignes minimales et Lignes maximales pour définir des limites. Par exemple, définissez la valeur minimale sur 1 (au moins une entrée requise) et la valeur maximale sur 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 vos ressources en fonction d'une fréquentation maximale ou de quantités de commandes réalistes.

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.

Ajoutez NPS à votre formulaire Wordpress dès 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.