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

Vous cherchez un moyen simple d'ajouter un formulaire en accordéon à votre site web WordPress ?

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

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

Dans cet article, nous allons vous montrer la manière la plus simple de concevoir un formulaire en accordéon pour améliorer la fonctionnalité et l'expérience utilisateur de votre site web.

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

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

1. Installer et activer WPForms

La première chose à faire est d'installer et d'activer WPForms.

WPForms est un plugin de construction de formulaires avancé et convivial pour créer tous types de formulaires. Il est livré avec plus de 2 000 modèles de formulaires WordPress et une tonne de fonctionnalités pour améliorer la fonctionnalité de votre site.

Pour commencer, rendez-vous sur le site de WPForms et créez votre compte. Veuillez noter que pour ce tutoriel, nous utiliserons une licence Pro, mais vous pouvez utiliser n'importe quel niveau de licence.

Besoin d'aide pour installer WPForms sur votre site web ? Consultez ce tutoriel sur l'installation des plugins WordPress.

Une fois le plugin installé, n'oubliez pas de l'activer !

Une fois cette étape terminée, nous allons installer WPCode et ajouter l'extrait de code qui permet de créer le style accordéon.

2. Installer WPCode et ajouter l'extrait de code Accordion

Pour faire fonctionner la magie du formulaire accordéon, nous devons installer le plugin WPCode, qui fonctionne avec WPForms. Assurez-vous 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 avez accès à une bibliothèque d'extraits de code spécialement conçue pour les utilisateurs de WPForms. N'oubliez pas d'activer le plugin après l'avoir installé !

Après avoir installé WPCode depuis le dépôt de plugins WordPress, revenez à WPForms. Nous allons maintenant activer un extrait de code dans WPForms.

Depuis votre tableau de bord WordPress, naviguez vers WPForms " Tools dans la barre de navigation latérale gauche. Sur cette page, sélectionnez l'onglet " Code Snippets".

Notez que si WPCode n'est pas installé, vous ne verrez pas l'option Code Snippets.

Faites défiler les pages ou utilisez la fonction de recherche pour trouver l'extraitAccordion Template Helper.

Cliquez sur le bouton Installer l'extrait.

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

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

3. Créer un nouveau formulaire

Depuis votre tableau de bord d'administration WordPress, naviguez vers 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 par un formulaire vierge. Cela vous donnera une meilleure idée de la façon de créer le format accordéon.

Vous êtes alors dirigé vers l'écran Champs, où les champs disponibles apparaissent sur le panneau de gauche. Les champs auxquels vous avez accès dépendent 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 qu'il n'y ait rien pour commencer. Vous y glisserez et déposerez les éléments de votre formulaire et il ne restera pas vierge très longtemps !

Construisez votre formulaire en utilisant des séparateurs de section

Lorsque vous commencez à construire votre formulaire, réfléchissez à la manière dont vous souhaitez regrouper les informations. En d'autres termes, quelles informations voulez-vous voir figurer dans la liste déroulante lorsque l'accordéon du formulaire est ouvert ?

Pour chacune de ces sections, vous devez ajouter un champ séparateur de section. Donnez à ce champ le nom que vous souhaitez donner à cette section d'informations.

Notre exemple est un formulaire de candidature, nous allons donc commencer par les informations de contact en haut de la page.

Une fois le séparateur de section en place, vous pouvez faire glisser et déposer tous les éléments de formulaire que vous souhaitez en dessous, de la manière qui vous convient le mieux.

Ajouter des sauts de page

Une fois que tous les champs sont en place, ajoutez un champ " Saut de page" au bas de chaque section de votre 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 dans lequel vous pourrez modifier l'indicateur de progression. Sélectionnez Aucun. Vous ne devez effectuer cette opération qu'une seule fois par formulaire.

Si vous omettez cette étape, l'accordéon fonctionnera toujours, mais une barre de progression inactive apparaîtra 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 en comportera.

Si vous le prévisualisez maintenant, il ressemblera à un formulaire multipage et non à un accordéon. Ne vous inquiétez pas ; nous sommes sur le point d'ajouter l'ingrédient magique : une classe CSS !

4. Ajouter la classe CSS

À ce stade, vous devriez avoir créé l'ensemble de votre formulaire. 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 menus déroulants de l'accordéon.

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

Tout d'abord, sauvegardez votre formulaire. Le générateur de formulaires étant toujours ouvert, accédez à l'option Paramètres dans le menu de gauche. La page Général s'affiche par défaut. Faites défiler la page jusqu'en bas et cliquez sur Avancé.

Ensuite, entrez wpf-accordion-form dans le champ Classe CSS du formulaire.

Après avoir saisi ce code, cliquez sur le bouton Enregistrer. Pendant que nous sommes dans les paramètres, mettons à jour les notifications et confirmations de nos formulaires.

5. Configurer les notifications et les confirmations

Il est essentiel de définir les messages et les notifications qui apparaîtront après que l'utilisateur a rempli et envoyé le formulaire.

C'est facile à faire. Accédez à l'onglet Paramètres et sélectionnez Notifications.

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

Ensuite, sous l'onglet Paramètres, sélectionnez Confirmations pour modifier le message que vos clients recevront lorsqu'ils auront rempli le formulaire.

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

Publier votre formulaire accordéon

Après avoir mis à jour les confirmations et les notifications de votre formulaire, vous êtes prêt à publier !

Il y a différentes façons 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.

Lorsque votre formulaire est ouvert dans le générateur de formulaires, il vous suffit de cliquer sur le bouton Embed en haut à droite.

Une fenêtre modale vous demandera si vous souhaitez intégrer le formulaire dans une page existante ou créer une nouvelle page.

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 que vous avez fait votre choix, votre formulaire s'ouvrira dans WordPress, dans une ébauche de la page que vous avez sélectionnée ou créée. Si cela ressemble encore à un formulaire multi-pages, ne vous inquiétez pas. Cliquez sur l'aperçu de la page et vous devriez voir votre formulaire en accordéon.

Vous êtes maintenant prêt à publier votre page et à diffuser votre formulaire en accordéon dans le monde entier.

Après avoir publié le formulaire en accordéon, il ne reste plus qu'à s'assurer qu'il fonctionne comme prévu en testant le formulaire intégré.

Félicitations pour avoir rempli votre formulaire en accordéon !

FAQ sur les formulaires en accordéon

La création de formulaires en accordéon est un sujet populaire parmi nos lecteurs. Voici quelques réponses rapides aux questions les plus fréquentes :

Quels sont les avantages et les inconvénients des formulaires en accordéon par rapport aux formulaires multipages ?

Un formulaire en accordéon vous permet d'insérer plus de contenu dans un espace réduit, mais il peut être envahissant s'il n'est pas bien conçu.

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

Utilisez des libellés concis et clairs. Utilisez des titres et évitez les désignations telles que "Section 1".

Comment concevoir des formulaires en accordéon pour les ordinateurs de bureau et les téléphones portables ?

Pour concevoir des formulaires en accordéon qui sont réactifs et fonctionnent parfaitement sur les ordinateurs de bureau et les téléphones portables, pensez à vous inscrire à WPForms !

Ensuite, apprenez comment exiger une adresse électronique pour les téléchargements de fichiers.

Ne serait-ce pas génial de demander aux utilisateurs de communiquer 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 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.