Comment créer des formulaires multi-étapes efficaces sur WordPress avec Elementor

Formulaires en plusieurs étapesest une méthode qui consiste à diviser un formulaire en plusieurs étapes ou sections, ce qui permet aux utilisateurs de remplir plus facilement des formulaires complexes et d'améliorer l'expérience globale de l'utilisateur. En guidant les utilisateurs à travers le formulaire étape par étape, vous pouvez réduire efficacement les taux d'abandon des utilisateurs tout en assurant une plus grande précision dans la collecte des données. Cet article explique en détail comment créer des formulaires à plusieurs étapes dans WordPress à l'aide du plugin Elementor.

Étape 1 : Ajouter des champs de formulaire

Pour créer un formulaire à plusieurs étapes, vous devez ajouter le widget Form Fields au canevas Elementor. Chaque étape du formulaire sera représentée par un conteneur dans la mise en page d'Elementor.

1. Ouvrir l'éditeur Elementor: Allez sur la page où vous voulez ajouter le formulaire ou créez une nouvelle page et cliquez sur ".Modifier avec Elementor"Bouton.
2. Ajouter un widget de formulairePour ce faire, recherchez le widget "Form" dans le panneau de gauche d'Elementor et faites-le glisser sur le canevas.
3. Ajout de champsDans les paramètres du widget de formulaire, ajoutez les champs obligatoires. Chaque champ représente une information que l'utilisateur doit remplir, comme le nom, l'adresse électronique, le téléphone, etc.

Étape 2 : Attribuer un identifiant au conteneur

Comme chaque étape d'un formulaire à plusieurs étapes est un conteneur, vous devez fournir un identifiant unique pour chaque conteneur dans l'onglet Avancé du panneau Paramètres d'Elementor.

1. Sélectionner un conteneurCliquez sur le conteneur de chaque étape du formulaire pour ouvrir ses paramètres.
2. Ajouter un identifiantPour ce faire, vous devez : aller dans l'onglet Avancé et saisir un identifiant unique dans le champ CSS ID. Cet identifiant sera utilisé pour faire référence à l'étape dans le widget de formulaire multi-étapes. Par exemple, vous pouvez utiliser id1, id2, id3, etc. pour faire référence à différentes étapes.

Étape 3 : Ajouter le widget de formulaire en plusieurs étapes à la mise en page

Le widget Formulaires en plusieurs étapes permet de configurer les identifiants de chaque étape afin d'unifier tous les conteneurs en un seul formulaire.

1. Ajouter un widget de formulaire en plusieurs étapesPour ce faire, recherchez le widget "Multi-Step Form" dans le panneau de gauche d'Elementor et faites-le glisser sur le canevas.
2. Configuration Étape IDDans les paramètres du widget du formulaire en plusieurs étapes, ajoutez le même identifiant que celui spécifié précédemment pour le conteneur, afin de garantir que le widget du formulaire en plusieurs étapes identifie et se connecte correctement aux conteneurs d'étapes individuels.
3. Définir le styleStyles : Dans Styles, vous pouvez donner un style aux boutons Suivant et Précédent ainsi qu'aux indicateurs d'étape. Veillez à ce que les styles soient cohérents avec la conception générale de votre site afin d'offrir une expérience cohérente à l'utilisateur.

Étape 4 : Ajouter un bouton de soumission

Dans le même conteneur, vous ajoutez le widget de formulaire à plusieurs étapes, puis le widget de bouton de soumission.

1. Ajouter un widget de bouton de soumission: Dans le panneau de gauche d'Elementor, recherchez "Bouton de soumission"et faites-le glisser jusqu'au dernier conteneur d'étape sur le canevas.
2. Configuration du bouton de soumissionLe widget "bouton de soumission" renvoie automatiquement à la page "formulaire en plusieurs étapes".
3. Sauvegarde et prévisualisationAprès avoir effectué tous les réglages, cliquez sur "mettre à jour"pour enregistrer les modifications. Prévisualisez votre page pour vous assurer que le formulaire en plusieurs étapes fonctionne comme prévu.

résumés

Les formulaires à plusieurs étapes améliorent l'expérience de l'utilisateur et réduisent le taux d'abandon en divisant les formulaires complexes en plusieurs étapes. L'utilisation du plugin Elementor dans WordPress facilite la création de tels formulaires.