Comment ajouter des champs de répétition dans vos formulaires WordPress ?

Si vous avez besoin d'un formulaire personnalisé pour vos utilisateurs, il est indispensable d'apprendre à ajouter un champ de répéteur WordPress au formulaire.

Avoir un champ de répétition signifie que les utilisateurs peuvent créer autant de sous-champs qu'ils le souhaitent et saisir toutes les données nécessaires. Et en retour, vous obtenez des données personnalisées de chacun de vos utilisateurs, ce qui vous permet de mieux les analyser.

Un plugin comme Everest Forms vous aidera à ajouter un champ de répétition dans les formulaires WordPress sans aucun problème. Et, nous vous montrerons comment dans le didacticiel étape par étape ci-dessous.

Mais avant cela, comprenons les principales raisons pour lesquelles vous devriez envisager d'utiliser des champs répétables dans vos formulaires.

Pourquoi avez-vous besoin d'un champ répétable dans vos formulaires ?

Les formulaires peuvent devenir longs et complexes très rapidement lorsque vous essayez d'extraire des informations détaillées de vos utilisateurs.

Supposons que vous ayez besoin de connaître le parcours scolaire complet de vos utilisateurs. Dans un tel cas, l'affichage des champs pour chaque qualification et diplôme possibles qu'ils pourraient avoir encombrera votre formulaire.

Ne serait-il pas préférable d'utiliser un champ répéteur WordPress, où l'utilisateur peut créer autant de champs qu'il en a besoin et saisir ses informations pédagogiques ? Cela offre une expérience de formulaire personnalisée aux utilisateurs pendant que vous recevez toutes les informations requises.

Ainsi, en utilisant de tels champs répétables de formulaire WordPress, vous pouvez :

• Réduisez le taux d'abandon de formulaire causé par des formulaires longs et complexes.
• Recevez des informations précises de vos utilisateurs.

C'est pourquoi vous devez ajouter un champ de répéteur WordPress partout où cela est nécessaire dans vos formulaires.

Cela étant dit, passons en revue notre guide sur la façon dont vous pouvez créer un champ de répéteur dans WordPress.

Comment ajouter des champs de répétition dans vos formulaires WordPress ?

Nous vous recommandons d'utiliser Everest Forms pour ajouter un champ de répétition dans les formulaires WordPress, comme nous l'avons fait dans ce didacticiel.

C'est l'un des plugins de création de formulaires les plus populaires de WordPress, avec plus de 100 000 installations actives. Et tout cela grâce à son générateur de formulaires convivial par glisser-déposer et à ses options de personnalisation.

Sans parler des fonctionnalités avancées regroupées dans des modules complémentaires premium qui peuvent être utilisés pour étendre les fonctionnalités du plugin. Par conséquent, les champs répétables du formulaire WordPress ne sont qu'une de ses nombreuses excellentes fonctionnalités.

L'ajout de champs de répétition dans vos formulaires WordPress est assez facile lorsque vous avez un plugin comme Everest Forms à portée de main. Il vous suffit de suivre avec précision les étapes expliquées ci-dessous.

Commençons!

1. Installez et activez le plugin gratuit Everest Forms

La première chose que vous devez faire est d'installer et d'activer la version gratuite d'Everest Forms.

Pour ce faire, connectez-vous au tableau de bord de votre site Web WordPress et ouvrez Plugins >> Ajouter un nouveau .

Tapez "Everest Forms" dans la barre de recherche et le plugin apparaîtra dans les résultats de la recherche. Appuyez sur le bouton Installer maintenant pour lancer le processus d'installation.

Ensuite, cliquez sur le bouton Activer pour terminer l'installation. Maintenant, vous avez la version gratuite du plugin Everest Forms sur votre site.

2. Téléchargez et installez le module complémentaire Premium Repeater Field

Le plugin gratuit Everest Forms est plus que suffisant pour créer un contact simple et d'autres types de formulaires. Cependant, pour créer spécifiquement un formulaire avec un champ répéteur WordPress, vous aurez besoin de la version premium d'Everest Forms. Il est livré avec le module complémentaire Repeater Field, qui vous permet d'ajouter autant de champs de répétition que vous le souhaitez dans votre formulaire.

C'est pourquoi vous devez d'abord acheter un plan professionnel ou d' agence pour Everest Forms afin d'utiliser ce module complémentaire. Rendez-vous simplement sur la page de tarification officielle et achetez l'un des deux plans qui vous convient.

Ensuite, créez votre compte et connectez-vous. Vous serez redirigé vers le tableau de bord de votre compte, où tous les modules complémentaires disponibles dans le cadre de votre plan sont répertoriés dans la section Téléchargements .

Ceux dont vous avez besoin ne sont que les modules complémentaires Everest Forms Pro et Repeater Field . Téléchargez simplement les deux et ils seront enregistrés sous forme de fichiers ZIP sur votre appareil.

Maintenant, revenez au tableau de bord WordPress et ouvrez Plugins >> Add New .

Vous pouvez maintenant télécharger les fichiers pour les installer un par un. Assurez-vous d'avoir installé le module complémentaire Pro avant d'installer le module complémentaire Repeater Field . Sinon, vous risquez de rencontrer des erreurs majeures.

Alors, cliquez sur le bouton Upload Plugin et choisissez d'abord le fichier Everest Forms Pro .

Ensuite, appuyez sur Installer maintenant et Activer le plugin pour terminer l'installation.

Répétez le même processus avec le module complémentaire Repeater Field .

Désormais, la page des plugins installés contiendra ces 3 plugins : Everest Forms , Everest Forms (Pro) et Everest Forms Repeater Field .

Vous pouvez voir un avis en haut de cette page vous demandant de saisir la clé de licence pour le module complémentaire Everest Forms (Pro) . Vous trouverez cette clé sous l'onglet Clés de licence du tableau de bord de votre compte.

Copiez simplement la clé, collez-la dans le champ sous Everest Forms (Pro) et appuyez sur Entrée.

Avec cela, vous êtes prêt à commencer à créer un formulaire avec des champs répétables.

3. Créer un nouveau formulaire avec un champ de répétition

Commencez par naviguer vers Everest Forms >> Add New . Cette page vous donne la possibilité de créer un formulaire entièrement nouveau ou de personnaliser des modèles prédéfinis.

Everest Forms est livré avec plusieurs modèles de démarrage pour différents types de formulaires. Si vous manquez de temps, vous pouvez créer des formulaires de contact simples, des formulaires de demande de congé, des formulaires de rendez-vous médicaux, des formulaires de demande d'emploi, etc., avec ces modèles.

Mais dans ce didacticiel, nous allons vous montrer comment créer un nouveau formulaire à partir de zéro et y ajouter un champ de répéteur WordPress. Alors, cliquez sur l'option Commencer à partir de zéro .

Ensuite, donnez à votre formulaire un nom simple et logique. Par exemple, vous pouvez l'intituler "Formulaire de contact pour les visiteurs".

Après avoir appuyé sur le bouton, vous serez redirigé vers le générateur de formulaire qui ressemble à ceci.

Sur la gauche se trouvent tous les champs de formulaire disponibles et leurs options de champ. Sur la droite se trouve l'endroit où vous construisez le formulaire en ajoutant des lignes et en y plaçant des champs. Tout ce que vous avez à faire est de faire glisser les champs de la gauche vers la ligne de droite.

Lorsque vous devez ajouter une autre ligne, cliquez sur Ajouter une ligne . Cela crée une nouvelle ligne pour les champs réguliers, pas les champs répétables.

Pour ce dernier, vous devez appuyer sur le bouton Ajouter une rangée de répéteurs .

Cela crée une ligne de répétition où vous pouvez ajouter des champs comme vous le faites habituellement. La seule différence est que cette ligne de champ apparaîtra désormais répétable sur votre formulaire.

Continuez à ajouter les champs nécessaires jusqu'à ce que le formulaire soit complet, puis cliquez sur Enregistrer lorsque vous avez terminé. Vous pouvez voir à quoi ressemble le formulaire dans l'interface avec la fonction Aperçu .

4. Personnaliser et configurer les paramètres du formulaire

Ensuite, vous devez personnaliser tous les champs que vous avez ajoutés à votre formulaire. Pour ce faire, cliquez sur le champ que vous souhaitez modifier et ses options de champ apparaîtront à gauche.

Vous pouvez modifier le Label , la Meta Key et la Description à partir d'ici. Vous pouvez également rendre un champ Obligatoire pour que les utilisateurs soumettent le formulaire. Outre ces options clés, le plugin est également livré avec des options de personnalisation spécifiques pour différents champs.

De plus, Everest Forms fournit des options avancées telles que le texte d'espace réservé, la valeur par défaut , les classes CSS , l'activation du remplissage automatique , etc.

De même, vous pouvez activer la logique conditionnelle sur les champs pour une expérience de remplissage de formulaire personnalisée.

Vous devez également modifier la ligne du répéteur en cliquant sur Champs du répéteur avant de personnaliser les champs à l'intérieur.

Outre les options générales, vous obtenez les options avancées suivantes pour la rangée de répéteurs :

• Masquer le champ du répéteur : masquez ou affichez le champ du répéteur dans la vue frontale.
• Limite de répétition : définissez une limite de répétition pour le champ de répéteur. Laisser la limite de répétition vide signifie permettre aux utilisateurs d'ajouter des champs de répétition un nombre infini de fois.
• Ajouter une nouvelle étiquette : modifiez l'étiquette du bouton Ajouter .
• Supprimer l'étiquette : modifiez l'étiquette du bouton Supprimer .
• Masquer l'étiquette : permet de masquer l'étiquette du champ de formulaire.
• Classes CSS : utilisez des classes CSS personnalisées pour les champs de répéteur.

Ce n'est pas tout. Il y a plus d'options de configuration dans l'onglet Paramètres du générateur de formulaires.

Dans la section Général , vous pouvez modifier le nom du formulaire , la description du formulaire , la conception de la mise en page , le texte du bouton Soumettre , le message de formulaire désactivé et bien plus encore. Mieux encore, vous pouvez activer l'anti-spam, désactiver le stockage des entrées, autoriser la soumission de formulaires ajax, etc., pour le formulaire.

Vous pouvez également créer et modifier des modèles d'e- mail à partir de la section E-mail pour les administrateurs et les utilisateurs. Vous pouvez même appliquer une logique conditionnelle pour savoir quand envoyer ou non l'e-mail en question.

Après avoir effectué les modifications requises, n'oubliez pas de cliquer sur le bouton Enregistrer .

Désormais dans le frontend, un utilisateur remplissant le formulaire pourra fournir ses informations complètes via le champ répéteur WordPress. Il leur suffit de cliquer sur le bouton Ajouter et un nouvel ensemble des mêmes champs apparaît dans le formulaire. Ils peuvent également supprimer la ligne dont ils n'ont pas besoin.

5. Placez le formulaire sur votre site Web WordPress

Le formulaire de contact personnalisé avec des champs répétables est maintenant prêt à être placé sur votre site WordPress.

Vous pouvez le faire de deux manières simples. Copiez simplement le shortcode du formulaire en haut du générateur de formulaire et ouvrez la page ou la publication dans laquelle vous souhaitez afficher le formulaire.

Ensuite, cliquez sur l'icône + et ajoutez le bloc Shortcode .

Collez le shortcode que vous avez copié ici et cliquez sur Mettre à jour .

Alternativement, vous pouvez rechercher le bloc Everest Forms et choisir le formulaire dans la liste déroulante.

Enfin, cliquez sur Mettre à jour et vous avez terminé ! Votre formulaire avec le champ répéteur WordPress est maintenant en ligne sur votre site Web.

Emballer

Les champs répétables sont une fonctionnalité très pratique lorsque vous avez besoin de données personnalisées sur vos utilisateurs. Et le plug-in Everest Forms facilite plus que jamais la création de formulaires personnalisés avec des champs de répétition à placer sur votre site.

Tout ce dont vous avez besoin est son module complémentaire Repeater Field et ce didacticiel complet.

Cependant, ce n'était qu'un aperçu des vastes possibilités offertes par Everest Forms. Par exemple, vous pouvez envoyer des données de formulaire de contact à Google Sheets, créer des formulaires d'enquête et même modifier la couleur du bouton d'envoi.

Apprenez-en plus sur Everest Forms sur notre blog plein de contenu WordPress. Aussi, suivez-nous sur Facebook et Twitter pour rester à jour.