Dans cet article nous montrerons comment créer un formulaire multi-étapes avec animation lottie sur Elementor.
La fonctionnalité formulaire multi-étapes a été ajoutée récemment au constructeur visuel et robuste d’Elementor. Vous avez désormais un constructeur de formulaires qui couvre toutes les bases !
Même s’il ne semble pas au top, il faut savoir que c’est la première mouture et forcément de nouvelles mises à jour viendront étoffer cette fonctionnalité.
Avec le formulaires à plusieurs étapes, vos formulaires ne seront pas seulement plus beaux, ils offriront des taux de conversion plus élevés lorsque vous chercherez à recueillir des informations les visiteurs du votre site Web.
Aidez désormais vos visiteurs à compléter l’inscription et à améliorer vos conversions avec un formulaire à plusieurs étapes.
Meilleure expérience utilisateur
Convaincre les utilisateurs de remplir vos formulaires n’est pas une tâche facile. Une fois que vous les avez encouragés à lire votre formulaire et même envisager de le remplir, vous devez vous assurer de les gardez engagés, surtout que certains formulaires peuvent être intimidants.
Découvrez aussi nos 10 plugins WordPress pour créer un formulaire de contact
Le nouveau widget de Formulaire Multi-étape aborde cette question exacte : faire d’un formulaire complexe un élément de conception simple et magnifique.
Augmentation des conversions et des prospects
Il ne fait aucun doute qu’un formulaire qui est agréable à regarder et facile à parcourir sera plus propice à la conversion. C’est votre objectif en tant que créateur de site web, et c’est aussi l’objectif du widget de Formulaire Multi-étape.
Lire notre article sur Comment booster les conversions : dynamiser les offres limitées
Ce formulaire vous permettra d’améliorer les taux de conversion dans tous les domaines. Ils sont surtout parfaits dans les domaines tels que l’assurance, l’université, l’immobilier, le tourisme et bien d’autres, et je suis sûr qu’ils vous aideront à créer des formulaires de conversion élevée avec une flexibilité infinie.
Comment ça marche
Après avoir déposé un formulaire sur la page, ajoutez le champ « Step». Vous verrez qu’un nouveau champ a été automatiquement ajouté et qu’il se distingue visuellement. Déplacez l’élément Step à l’emplacement que vous souhaitez diviser en étapes, et voilà! Vous venez de créer un formulaire multi-étapes.
Découvrez également Comment créer un site Web complet avec Elementor
Le champ Step agira comme séparateur et permettra aux utilisateurs de :
- Choisissez l’indication d’étape : Icône, texte, icône et texte, nombre, nombre et texte, barre de progression ou aucun
- Ajouter une icône en tant qu’indicateur d’étape
- Personnaliser l’apparence des étapes
- Personnaliser les éléments suivants et précédents
- et valider chaque champ d’étape
Amenez votre site web à un tout autre niveau interactif
Avez-vous déjà souhaité que votre site web puisse être encore plus interactif et engageant qu’il ne l’est déjà ?
Vous avez peut-être renoncé à cette pensée dans le passé pour un certain nombre de raisons, mais tout ceci est sur le point de changer, avec l’introduction de Lottie Animations. C’est l’occasion d’amener votre jeu de web designer au niveau suivant, en choisissant parmi des milliers d’animations Lottie à ajouter à votre site Web.
Le widget Lottie peut accepter des animations Lottie provenant de diverses sources, telles que LottieFiles.com. Vous pouvez également ajouter vos propres animations à l’aide du plugin Lottiefiles ou du plugin Bodymovin pour Adobe After Effects.
Ébahissez vos clients
Lorsque vous chargez vos conceptions et images statiques et les rajeunissez soudainement avec du mouvement, des couleurs, et de tous les autres types d’effets d’animation, vous changez le jeu.
Soudain, la conception de votre site web prend vie. Il est en mouvement, et avec cela, il interagit avec le visiteur de votre site web. Les animations Lottie sont SVG, 100% responsive et super légères.
Augmenter l’engagement de l’utilisateur
L’ajout d’animations Lottie, prend quelques secondes et peut être utilisé pour améliorer l’engagement de chaque partie de votre site Web.
Prenons par exemple les boutons.
Nous savons tous à quel point les boutons d’appel à l’action sont importants. Avec Lottie, vous pouvez améliorer la façon dont vos visiteurs interagissent avec les boutons sans passer des tonnes de temps sur le codage et sur le perfectionnement des détails de conception.
A lire aussi : Comment améliorer l’engagement des utilisateurs sur WordPress
Pensez à un bouton régulier par rapport à un bouton qui a une flèche animée. Quel est celui à qui vous accorderiez plus d’attention ? Ce sont ces petites choses qui feront une différence, et vos clients apprécieront sûrement ce travail.
Avec le widget Lottie, vous pouvez jouer avec de nombreux paramètres, tels que les déclencheurs, les boucles, le survol, l’animation inversée et les options de rendu. Il n’y a aucune limite sur la façon dont vous pouvez animer vos sites Web.
Comment ça marche
- Accédez à lottiefiles.com et choisissez une animation
- Télécharger le fichier JSON Lottie
- De retour dans l’éditeur Elementor, faites glisser dans le widget Lottie
- Cliquez sur l’icône de la médiathèque et téléchargez le fichier Lottie JSON
- Voilà ! Vous devriez commencer à voir l’animation.
Si vous avez créé une belle animation, Assurez-vous de nous envoyer le lien dans la section commentaires ci-dessous.
Obtenez Elementor Pro Maintenant !
Conclusion
L’ajout d’animations Lottie et de formulaires multi-étapes offre deux excellentes façons d’améliorer non seulement votre expérience utilisateur, mais aussi votre interface utilisateur.
Comme les tendances web sont en constante évolution, il est toujours passionnant de continuer à améliorer les fonctionnalités de votre site Web et de vous positionner comme un véritable expert. Si vous avez des commentaires ou des suggestions, n’hésitez pas à nous en faire part dans la section réservée.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
