Comment concevoir un formulaire accordéon dans WordPress

Vous cherchez un moyen simple d'ajouter un design de formulaire accordéon à votre site Web WordPress ?

Les formulaires accordéon offrent un moyen intuitif et accessible de présenter des données complexes tout en conservant un aspect épuré et organisé.

Dans cet article, je vais vous montrer le moyen le plus simple de concevoir un formulaire accordéon pour améliorer la fonctionnalité et l'expérience utilisateur de votre site Web.

Créez votre formulaire accordéon WordPress dès maintenant ! 🙂

Comment concevoir un formulaire accordéon dans WordPress

Pour créer un formulaire de conception accordéon dans WordPress, vous pouvez vous fier à la simplicité et à la fonctionnalité de WPForms. Suivez les étapes ci-dessous pour commencer :

1. Installer et activer WPForms

La première chose que nous allons faire est d'installer et d'activer WPForms, qui est un plugin de création de formulaires avancé et convivial pour créer tous types de formulaires.

Il est livré avec plus de 2 100 modèles de formulaires WordPress et une tonne de fonctionnalités pour améliorer la fonctionnalité de votre site.

Pour commencer, rendez-vous sur WPForms et enregistrez-vous. Veuillez noter que pour ce tutoriel, nous utiliserons une licence Pro, mais vous pouvez utiliser n'importe quel niveau de licence de votre choix.

Besoin d'aide pour installer WPForms sur votre site Web ? Consultez ce tutoriel sur la façon d'installer des plugins WordPress. Une fois que vous avez installé le plugin, n'oubliez pas de l'activer !

Une fois que vous avez terminé cette étape, nous allons installer WPCode et ajouter l'extrait de code qui rend le style accordéon cohérent.

2. Ajoutez l'extrait de code accordéon

Pour que la magie du formulaire accordéon fonctionne, nous devons installer le plugin WPCode, qui fonctionne avec WPForms. Veuillez vous assurer de compléter les deux parties de cette étape : l'installation de WPCode et l'ajout de l'extrait de code accordéon.

Lorsque vous installez le plugin WPCode sur WordPress, vous aurez accès à une bibliothèque spéciale d'extraits de code réservée aux utilisateurs de WPForms. N'oubliez pas d'activer le plugin après l'avoir installé !

Après avoir installé WPCode depuis le référentiel de plugins WordPress, revenez à WPForms. Nous allons maintenant activer un extrait de code dans WPForms.

Depuis votre tableau de bord WordPress, accédez à WPForms » Outils dans la barre de navigation latérale gauche. Sur cette page, sélectionnez l'onglet Extraits de code.

Notez que si vous n'avez pas WPCode installé, vous ne verrez pas l'option Extraits de code. Faites défiler ou utilisez la fonction de recherche pour localiser l'extrait Assistant de modèle accordéon.

Cliquez sur le bouton Installer l'extrait .

Après avoir cliqué pour l'installer, une page affichant l'extrait de code s'ouvrira. La seule chose que vous devez faire sur cette page est d'activer l'extrait et de cliquer sur Mettre à jour.

Vous êtes maintenant prêt à créer votre formulaire !

3. Créez un nouveau formulaire WordPress

Depuis votre tableau de bord d'administration WordPress, accédez à WPForms et cliquez sur Ajouter un nouveau dans la liste des options.

Ensuite, donnez un nom à votre formulaire. Vous pouvez sélectionner un modèle existant en fonction de vos besoins spécifiques, mais pour les besoins de ce tutoriel, nous allons commencer avec un formulaire vierge. Cela vous donnera une meilleure idée de la façon de créer le format d'accordéon.

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

Dans le panneau de droite, vous verrez un aperçu modifiable de votre formulaire. Si vous avez sélectionné un formulaire vierge, ne vous inquiétez pas s'il n'y a rien pour commencer. Vous y glisserez et déposerez vos éléments de formulaire, et il ne sera pas vierge très longtemps !

Créez votre formulaire à l'aide de séparateurs de section

Lorsque vous commencez à créer votre formulaire, réfléchissez à la manière dont vous souhaitez regrouper les informations. C'est-à-dire, quelles informations souhaitez-vous inclure dans le menu déroulant lorsque l'accordéon du formulaire est ouvert ?

Pour chacune de ces sections, vous devez ajouter un champ de séparateur de section. Nommez le champ comme vous le souhaitez pour cette section d'informations. Notre exemple est un formulaire de candidature, nous allons donc commencer par les informations de contact en haut.

Une fois que vous avez le séparateur de section en place, vous pouvez faire glisser et déposer tous les éléments de formulaire souhaités en dessous, comme vous le souhaitez.

Ajouter des sauts de page

Une fois que tous vos champs sont en place, ajoutez un champ Saut de page en bas de chacune de vos sections de formulaire.

Remarque : lorsque vous ajoutez le saut de page initial, cliquez dessus pour ouvrir les options du champ. Sur le côté gauche, vous verrez un menu déroulant où vous pouvez apporter des modifications à l'indicateur de progression. Sélectionnez Aucun. Vous n'avez besoin de le faire qu'une seule fois par formulaire.

Si vous manquez cette étape, l'accordéon fonctionnera toujours, mais il y aura une barre de progression inactive en haut du formulaire lorsqu'il sera en ligne. Après avoir ajouté le saut de page, répétez le processus pour autant de sections que votre formulaire comportera.

Si vous l'apercevez maintenant, il ressemblera à un formulaire multipage et non à un accordéon. Ne vous inquiétez pas ; nous allons ajouter l'ingrédient magique : une classe CSS !

4. Ajoutez la classe CSS à votre formulaire

À ce stade, votre formulaire complet devrait être créé. Chaque section de votre formulaire doit commencer par un séparateur de section et se terminer par un saut de page. Ces sections deviendront les listes déroulantes de l'accordéon.

Vous avez déjà activé l'extrait de code avant de commencer le formulaire. Il ne reste qu'une chose très simple à faire. Vous devez ajouter la classe CSS qui unifiera le tout.

Tout d'abord, enregistrez votre formulaire. Pendant que le générateur de formulaire est toujours ouvert, accédez à l'option Paramètres dans le menu de gauche. Il sera par défaut sur la page Général. Faites défiler tout en bas et cliquez sur Avancé.

Ensuite, saisissez wpf-accordion-form dans le champ Classe CSS du formulaire. Une fois que vous avez saisi ce code, cliquez sur le bouton Enregistrer. Pendant que nous sommes dans les paramètres, mettons à jour nos notifications et confirmations de formulaire.

5. Configurez les notifications et les confirmations

Il est crucial de configurer les messages et notifications qui apparaîtront après qu'un utilisateur ait rempli et soumis le formulaire. C'est facile à faire. Accédez à l'onglet Paramètres et sélectionnez Notifications.

Les administrateurs recevront des alertes automatiquement. Cependant, le titre, le corps de l'e-mail et la liste des destinataires peuvent être modifiés si nécessaire.

Ensuite, sous l'onglet Paramètres, sélectionnez Confirmations pour modifier le message que vos clients recevront une fois le formulaire soumis.

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

Publiez votre formulaire d'accordéon

Une fois que vous avez terminé la mise à jour des confirmations et notifications de votre formulaire, vous êtes prêt à publier ! Il existe différentes manières d'intégrer un formulaire dans WordPress.

Nous allons utiliser le bouton d'intégration pour notre tutoriel, mais si vous souhaitez essayer une autre méthode, consultez notre article sur les 3 façons d'intégrer un formulaire sur votre site WordPress.

Avec votre formulaire ouvert dans le générateur de formulaire, cliquez simplement sur le bouton Intégrer en haut à droite. Une fenêtre modale vous demandera si vous souhaitez intégrer le formulaire sur une page existante ou en créer une nouvelle.

Si vous souhaitez sélectionner une page existante, vous pourrez choisir laquelle. Si vous créez une nouvelle page, vous serez invité à lui donner un nom.

Une fois votre choix effectué, votre formulaire s'ouvrira dans WordPress, dans un brouillon de la page que vous avez sélectionnée ou créée. S'il ressemble encore à un formulaire multipage ici, ne vous inquiétez pas. Cliquez pour prévisualiser la page et vous devriez voir votre formulaire accordéon.

Vous êtes maintenant prêt à publier votre page et à faire connaître votre formulaire accordéon au monde entier. Une fois le formulaire accordéon publié, il ne vous reste plus qu'à vous assurer qu'il fonctionne comme prévu en testant le formulaire intégré.

FAQ sur la création d'un formulaire accordéon dans WordPress

La création de formulaires accordéon est un sujet de convivialité populaire parmi nos lecteurs. Voici quelques réponses rapides à certaines des questions les plus fréquemment posées :

Qu'est-ce qu'un formulaire accordéon ?

Un formulaire accordéon est un formulaire à plusieurs sections où chaque section peut être développée ou réduite en cliquant sur les en-têtes de section.

Plutôt que d'afficher tous les champs à la fois (ce qui peut être écrasant pour les longs formulaires), les formulaires accordéon révèlent une section à la fois, rendant les formulaires complexes plus gérables.

Les utilisateurs cliquent essentiellement à travers les sections séquentiellement, similaire aux onglets ou aux formulaires multipages, mais le tout sur une seule page.

Comment créer un formulaire accordéon dans WordPress ?

Installez WPForms Pro et le plugin WPCode. Dans WPCode, activez l'extrait Accordion Template Helper.

Créez ensuite votre formulaire dans WPForms, organisez les champs en sections à l'aide des champs Sépareur de section, ajoutez des champs Saut de page après chaque section, et ajoutez la classe CSS wpf-accordion-form dans les paramètres Avancés de votre formulaire.

Le style accordéon s'appliquera automatiquement à votre formulaire.

Quelle est la différence entre les formulaires accordéon et les formulaires multipages ?

Les formulaires accordéon affichent toutes les sections sur une seule page avec une fonctionnalité d'expansion/réduction, permettant aux utilisateurs de passer facilement d'une section à l'autre et de voir la progression globale en un coup d'œil.

Les formulaires multipages affichent une section à la fois sur des pages séparées avec une navigation avant/arrière. Les formulaires accordéon fonctionnent mieux lorsque les utilisateurs ont besoin de référencer des sections précédentes, tandis que les formulaires multipages réduisent la charge cognitive pour les formulaires très longs en n'affichant que les champs pertinents.

Quand dois-je utiliser une conception de formulaire accordéon ?

Utilisez des formulaires accordéon pour les candidatures, les inscriptions détaillées ou les enquêtes avec plus de 15 champs organisés en 4 à 7 sections logiques.

Ils sont parfaits pour les candidatures d'emploi (informations de contact, historique professionnel, références), les inscriptions à des événements (détails des participants, préférences alimentaires, paiement) ou les formulaires d'admission complets.

Évitez la conception accordéon pour les simples formulaires de contact de 5 champs où les sections réductibles ajoutent une complexité inutile.

Comment ajouter un accordéon à mon site WordPress ?

Pour les formulaires accordéons spécifiquement, utilisez WPForms avec l'extrait de code accordéon tel que décrit dans ce guide.

Créez votre formulaire accordéon maintenant ! 🙂

Puis-je utiliser des formulaires accordéons dans WPForms Lite ?

La technique du formulaire accordéon fonctionne avec tous les niveaux de licence WPForms, y compris Lite, tant que vous avez le plugin WPCode installé et l'extrait "Accordion Template Helper" activé.

Cependant, WPForms Pro vous donne accès à des fonctionnalités plus avancées comme la logique conditionnelle et l'intégration de paiements qui améliorent considérablement les formulaires accordéons.

Quelles sont les meilleures pratiques pour les étiquettes de formulaires accordéons ?

Utilisez des titres de section clairs et descriptifs qui indiquent exactement aux utilisateurs quelles informations cette section contient. Bons exemples : « Vos informations de contact », « Historique d'emploi », « Formation scolaire ».

Évitez les étiquettes vagues comme « Section 1 » ou « Détails ». Rendez les titres de section faciles à parcourir afin que les utilisateurs puissent rapidement trouver et développer la section qu'ils doivent examiner ou modifier.

Les formulaires accordéons fonctionnent-ils sur les appareils mobiles ?

Oui, les formulaires accordéons fonctionnent sur les appareils mobiles et améliorent en fait l'expérience utilisateur mobile pour les longs formulaires.

Au lieu de faire défiler plus de 30 champs sur un petit écran, les utilisateurs voient des sections déroulantes qu'ils peuvent développer une par une.

Cependant, testez toujours votre formulaire accordéon sur de vrais appareils mobiles pour vous assurer que les sections se développent en douceur et ne nécessitent pas de défilement excessif dans chaque section.

Ensuite, apprenez comment exiger une adresse e-mail pour les téléchargements de fichiers

Ne serait-il pas formidable d'exiger des utilisateurs qu'ils soumettent leur adresse e-mail avant de télécharger un fichier depuis votre site WordPress ? Apprenez comment encourager les utilisateurs à partager leur adresse e-mail pour télécharger un fichier depuis votre site WordPress.

Créez votre formulaire accordéon dès 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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.