Comment créer un formulaire avec un champ répéteur dans WPForms

Vous vous demandez comment intégrer un champ répéteur WPForms dans vos formulaires en ligne pour capturer plus de données pour chaque soumission de formulaire ?

Les champs de répétition 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, nous allons 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.

Pourquoi utiliser un champ répéteur WPForms ?

La beauté du champ répéteur WPForms réside dans sa capacité à rationaliser la collecte de données tout en offrant plusieurs autres avantages, tels que :

• Conception centrée sur l'utilisateur : en introduisant des champs de répéteur, vous permettez aux utilisateurs de dicter l'étendue de leur saisie. C'est un clin d'œil subtil à l'autonomie de l'utilisateur et améliore l'expérience utilisateur globale.
• Flexibilité dans la conception des formulaires : chaque formulaire n'est pas unique. Avec les champs répéteurs, vous pouvez répondre à différents scénarios, qu'il s'agisse d'une entrée unique ou de plusieurs entrées, garantissant que votre formulaire s'adapte à diverses exigences.
• Structuration cohérente des données : l'un des défis liés à plusieurs champs est l'incohérence des données. Les données restent structurées et uniformes avec des champs de répéteur, simplifiant ainsi le traitement et l'analyse back-end.
• Longueur de formulaire réduite : au lieu d'avoir un formulaire long et intimidant avec de nombreux champs, les champs de répétition offrent une apparence plus claire, garantissant que les utilisateurs ne sont pas submergés au premier coup d'œil.

Que vous soyez un entrepreneur cherchant à rationaliser l'intégration des clients ou un blogueur passionné par la collecte de données efficace, le champ de répéteur WPForms est inestimable. Passons aux étapes de configuration !

Comment créer un formulaire avec un champ répéteur dans WPForms

Créer un formulaire avec un champ répéteur dans WPForms est assez simple et nécessite simplement une compréhension de base de la logique conditionnelle. Suivez les étapes ci-dessous pour commencer :

1. Abonnez-vous et installez WPForms Pro

Lorsqu'il s'agit de créer des formulaires uniques, WPForms est la meilleure option. Vous pouvez l’utiliser pour créer et publier tout type de formulaire dans WordPress. Le plugin de formulaire est livré avec plus de 1 000 modèles de formulaire, qui peuvent être utilisés pour créer des formulaires de champs répéteurs.

Puisque nous utiliserons la logique conditionnelle pour configurer les champs de répéteur dans votre formulaire pour ce guide, vous devez vous abonner à WPForms Pro, qui vous donne également accès à des intégrations premium, des modules complémentaires et une tonne de fonctionnalités utiles.

Après avoir acheté un abonnement à WPForms Pro, vous devez installer et activer le plugin sur votre site WordPress.

Maintenant, créons votre formulaire !

2. Créez un nouveau formulaire vierge

Accédez à WPForms depuis votre tableau de bord d'administration WordPress et choisissez Ajouter nouveau dans la liste des options.

Ensuite, donnez un nom à votre formulaire et choisissez un modèle WPForms existant ou configurez simplement un nouveau formulaire en fonction de vos besoins.

Dans ce tutoriel, nous allons créer un nouveau formulaire pour vous montrer toutes les étapes essentielles à la configuration du champ de répétition. Nous choisirons donc l’option Créer un formulaire vierge .

Vous serez maintenant dirigé vers l'écran Champs , où les champs disponibles apparaissent sur le panneau de gauche. Ceux auxquels vous aurez accès dépendront de votre niveau de licence.

Vous verrez un aperçu modifiable de votre formulaire dans le panneau de droite. Puisque nous avons sélectionné un formulaire vierge, cette section apparaîtra vide.

Utilisez le générateur de formulaire intuitif de WPForms pour ajouter, modifier et organiser facilement des champs personnalisés afin d'adapter le formulaire à votre guise.

Pour ce didacticiel, nous ajouterons des types de champs principaux tels que Name , Email et Phone pour obtenir les informations d'un seul utilisateur, c'est-à-dire le titulaire 1.

Ensuite, nous vous guiderons à travers les étapes simples pour créer un composant répéteur via un champ déroulant et une logique conditionnelle.

3. Ajoutez un champ déroulant avec des choix Oui/Non

Pour ajouter le champ déroulant à votre formulaire, vous pouvez soit cliquer dessus dans le panneau de gauche, soit le glisser-déposer directement dans l'aperçu du formulaire.

Après cela, donnez au champ déroulant Étiquette un nom comme « Ajouter un autre ? » puis vous pouvez ajouter des options simples Yes/No pour Choices .

Ensuite, nous répéterons les mêmes étapes pour ajouter les champs Nom , Email et Numéro de téléphone sous le champ déroulant pour le titulaire 2.

Après cela, nous allons ajouter un autre champ déroulant avec les mêmes options Étiquette et Oui/Non dans Choix pour créer l'effet répéteur.

Cela vous permet de créer un effet dans lequel chaque ensemble suivant de champs de titulaire utilise une logique conditionnelle uniquement pour afficher si l'utilisateur a répondu Oui à la question « Ajouter un autre ? »

Maintenant, nous devons appliquer une logique conditionnelle aux champs de votre formulaire afin que ce n'est que lorsque l'utilisateur sélectionne Oui dans votre liste déroulante que des champs de titulaire supplémentaires apparaissent.

4. Appliquez une logique conditionnelle à vos champs de formulaire

Vous pouvez le faire facilement en cliquant sur n'importe quel champ dans l'aperçu du formulaire de droite et en accédant à l'onglet Smart Logic sous ses options de champ .

Dans le menu Smart Logic , cochez l'option Activer la logique conditionnelle pour tous les champs du formulaire sous « Ajouter un autre ? » Champ déroulant que nous avons créé précédemment.

Ensuite, utilisez la logique conditionnelle pour afficher le champ uniquement si le champ déroulant , c'est-à-dire « Ajouter un autre ? » je dis " Oui". Répétez cette opération pour tous les autres champs situés en dessous.

5. Activez la logique conditionnelle pour les champs déroulants

Pour empêcher la personne qui remplit le formulaire d'ajouter un troisième inscrit à moins qu'elle n'ait saisi les informations du titulaire 2, vous devrez configurer une logique conditionnelle pour le champ déroulant en dessous.

Pour ce faire, cochez l'option Activer la logique conditionnelle pour le champ déroulant sous les champs Titulaire 2 – Nom, E-mail et Téléphone.

Ensuite, utilisez la logique conditionnelle pour afficher le champ uniquement si le champTitulaire 2 – E-mail n'est pas vide .Cela créera l’effet de champ répéteur.

Vous pouvez répéter les étapes ci-dessus autant de fois que vous le souhaitez pour obtenir de nombreuses informations sur les inscrits, qui ne s'afficheront que si l'utilisateur répond Oui à « Ajouter un autre ? ».

Ensuite, cliquez sur le bouton Enregistrer dans le coin supérieur droit du générateur de formulaire avant de continuer pour vous assurer qu'aucune de vos modifications n'est perdue.

Nous y sommes presque! Nous devons maintenant activer les notifications et les confirmations de formulaire qui apparaissent après la soumission d'un formulaire.

6. Activer les notifications et les confirmations de formulaire

La configuration des messages et des notifications qui apparaîtront une fois qu'un utilisateur aura rempli et soumis son formulaire d'inscription est cruciale.

Ce processus est simple. Sélectionnez Notifications sous l’onglet Paramètres de l’écran Form Builder.

Les alertes seront envoyées automatiquement aux administrateurs. Cependant, vous pouvez configurer la liste des objets, du corps et des destinataires, si nécessaire.

Le message que vos consommateurs verront après avoir soumis le formulaire pourra ensuite être modifié en choisissant Confirmations sous la page Paramètres .

Vous pouvez également utiliser le paramètre Type de confirmation dans WPForms pour afficher un message, créer un lien vers une autre page ou rediriger l'utilisateur.

Bon travail! Il ne vous reste plus qu'à publier votre formulaire sur une page existante ou nouvelle pour le rendre public et prêt à collecter les soumissions.

8. Publiez votre formulaire avec des champs de répéteur

Créez une nouvelle page Web ou une nouvelle publication, ou modifiez une page existante. Après cela, sélectionnez l'icône WPForms en cliquant sur le bouton Ajouter un bloc .

Ensuite, choisissez la conception de votre formulaire de champ répéteur dans le menu déroulant du bloc WPForms pour l'ajouter à votre page ou publication.

Si vous souhaitez personnaliser l’apparence de votre formulaire, c’est peut-être le bon moment pour le styliser à l’aide de l’éditeur de blocs.

Si tout semble aller dans la bonne direction, vous pouvez rendre votre formulaire public en cliquant sur le bouton Mettre à jour ou Publier .

Lorsque vous avez fini de publier le formulaire, il ne vous reste plus qu'à tester le formulaire intégré pour vous assurer qu'il fonctionne comme prévu sur le frontend.

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

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

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

Un champ répéteur est un outil polyvalent, permettant aux utilisateurs d'ajouter dynamiquement plusieurs ensembles de champs identiques dans un formulaire. Imaginez-le comme un bouton « copier » pour un groupe de champs. Il améliore la flexibilité lors de la saisie de données répétables, comme plusieurs enregistrements.

Comment ajouter un champ répéteur dans WordPress ?

Vous aurez généralement besoin d'un plugin WordPress fiable pour intégrer un champ de répéteur. WPForms, un constructeur de formulaires WordPress de premier plan, peut être un choix idéal si vous souhaitez ajouter un champ répéteur à vos formulaires, sans aucune connaissance en CSS ou en codage.

Qu'est-ce qu'un champ répéteur dans WordPress ?

Au sein de l'écosystème WordPress, un champ répéteur permet de créer un ensemble de sous-champs pouvant être dupliqués par l'utilisateur lors du remplissage du formulaire. Ceci est particulièrement utile lorsque le nombre d'ensembles de données répétables n'est pas prédéfini.

Ensuite, découvrez comment créer un formulaire accordéon dans WordPress

Cherchez-vous un moyen simple d’ajouter une conception de formulaire en accordéon à votre site Web WordPress ? Consultez notre article sur la méthode la plus simple pour créer un formulaire en accordéon à l'aide de WPForms afin d'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 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 tutoriels et de guides WordPress gratuits.