skip to Main Content

Comment ajouter un Slider de plage sur un formulaire WordPress ?

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

En tant que propriétaire de site Web, vous devez toujours être à la recherche de nouveaux moyens pour rendre vos formulaires plus intuitifs et interactifs. Il existe de nombreux éléments qui peuvent  pousser vos formulaires à se démarquer et  à s’avérer efficace pour votre site web.

Dans cet article, vous apprendrez à ajouter un slider de plage de nombre dans un formulaire de votre site Web. Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là. 

Il faut noter que l’ajout d’un champ slider de plage à vos formulaires augmente l’engagement de l’utilisateur et vous aide à obtenir une réponse efficace. Avec l’aide du plugin WordPress Everest Forms, vous pouvez facilement créer un formulaire WordPress avec un tel slider.

Everest Forms est un plugin WordPress premium incroyable de constructeur de formulaires, aimé par de nombreux utilisateurs de WordPress pour la création de formulaires faciles et professionnels.

Ce plugin offre de nombreuses fonctionnalités pour améliorer votre expérience de création de formulaires. Il propose une liste d’options de champ de formulaire et l’un de ces champs est le champ Slider de plage.

Everest form plugin wordpress formulaire blogpascher

Étape 1 : créer un nouveau formulaire

Après avoir installé Everest Forms sur votre site web, vous pouvez commencer à créer un nouveau formulaire. – Découvrez notre guide sur Comment installer un plugin dans WordPress

Pour cela, allez sur Everest Forms → Add New et sélectionnez un modèle de formulaire qui vous convient.

Everest forms ajouter nouveau blogpascher

Étape 2 : ajouter le slider de plage dans le constructeur de formulaires

Une fois que vous avez choisi un modèle de formulaire et nommé votre formulaire, vous pourrez voir le constructeur de formulaires. Ici, vous pouvez faire glisser et déposer facilement les champs de formulaire dont vous avez besoin.

Découvrez également nos 10 plugins WordPress pour améliorer le panier WooCommerce

Et vous pouvez également trouver le champ Slider de plage –Range Slider– dans la section Advanced Fields. Pour ajouter le champ à votre formulaire, vous pouvez simplement glisser et déposer le champ dans le côté droit du générateur de formulaires.

Range slider form blogpascher

Étape 4 : configurer les paramètres du champ Slider de plage

Ensuite, vous devez configurer les paramètres du champ. Les paramètres vous permettent de modifier la valeur du slider, le style du slider, et plus encore. Pour cela, cliquez sur le slider de plage et vous pouvez voir les options du champ –Field Options- .

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Range slider options blogpascher

Dans les options du champ, vous pouvez afficher tous les paramètres de champ tels que l’étiquette, la description et les requis. En outre, il y a plus de réglage pour ce champ qui sont :

  • Step : Cette option vous permet d’entrer des intervalles de nombres spécifiques.
  • Min/Max : Cette option vous permet de définir les valeurs minimales et maximales en fonction de vos besoins. Si vous ne définissez pas les valeurs min/max vous-même, les valeurs par défaut seront de 0 à 100.

Range slider etape blogpascher

Options avancées du slider de plage :

Si vous défilez vers le bas dans les paramètres, vous verrez les paramètres avancés du champ Slider de plage. Ces paramètres vous permettent de modifier l’apparence du slider  qui propose des options telles que :

  • Skin : Cette option vous permet de choisir un style visuel pour le slider. En d’autres termes, vous pouvez modifier l’apparence du slider de plage en fonction de votre goût. Vous avez six options : Flat, Big, Modern, Sharp, Round, and Square
  • Slider Handle Color : cette option vous permet de changer la couleur de la poignée de slider.
  • Slider Highlight Color : cette option vous permet de changer la couleur du point culminant du curseur.
  • Slider Track Color : cette option vous permet de changer la couleur de la piste du slider.
Intervalle couleur blogpascher

Plus de paramètres avancés

  • Show Grid for The Slider : Vous pouvez utiliser cette option pour afficher la grille de plage sur le slider. Il est ainsi facile pour les utilisateurs de sélectionner une valeur.
  • Show Slider Prefix/Postfix : L’activation de cette option affiche le texte du préfixe et du postfixe sur le curseur. Si vous ne les avez pas encore définies, les valeurs min/max s’affichent.
  • Use Texts for Prefix and Postfix : Vous pouvez activer cette option si vous souhaitez afficher les textes pour le préfixe et le postfixe du champ. Après avoir activer cette option, vous pourrez définir les textes ci-dessous.
  • Show Slider Input : L’activation de cette option affiche l’entrée du slider de l’utilisateur sur le côté droit du slider. La valeur sélectionnée par l’utilisateur s’affiche dans la zone sur le côté.
  • Default Value : Cette option vous permet de définir la valeur par défaut du slider de plage.
Prefix blogpascher

Une fois que vous avez terminé avec les paramètres avancés, vous pouvez enregistrer le formulaire et le publier sur votre site web. Une fois que les utilisateurs remplissent votre formulaire et le soumettent, vous pouvez afficher les résultats. Voilà à quoi pourra ressembler votre champ.

Range slider blogpascherRésumé :

Par conséquent, vous pouvez utiliser le plugin WordPress Everest Forms pour ajouter un champ de slider de plage à vos formulaires. Avec ce champ sur vos formulaires, vous pouvez augmenter l’interaction avec l’utilisateur et collecter des données efficaces pour votre site web.

Vous pouvez aussi utiliser le constructeur visuel de page Elementor pour arriver au même résultat.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Easy Custom JS and CSS 

Ce plugin WordPress premium est un éditeur puissant de code CSS et Javascript qui vous permet d’ajouter ces derniers sur n’importe quelle section de votre site web. Il vous permet de garder vos personnalisations même après une importante mise à jour de votre thème WordPress. Easy custom js and css extra customization plugin wordpress

Vous avez la possibilité de limiter le champ d’utilisation de votre code personnalisé. Par exemple, vous pouvez utiliser votre code uniquement pour un article ayant le format vidéo.

Consultez notre articles sur Comment exiger l’acceptation des termes d’utilisation sur WordPress

Ou encore vous pouvez limiter votre code à un thème WordPress spécifique; Ce qui est pratique si vous changez couramment de thèmes pour votre blog WordPress.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Télécharger | Démo | Hébergement Web

2. CSS3 Vertical Web Pricing Tables

Parfois, une mise en page sous forme de colonne n’est pas adaptée pour les informations que vous essayez de transmettre. Si tel est votre cas, alors ce plugin pourrait être la solution que vous recherchez. Avec CSS3 Vertical Web Pricing Tables, les tableaux sont affichés sous forme de rangées empilées verticalement au lieu des colonnes placées horizontalement comme il est courant.

Css3 vertical web pricing tables for wordpress

Comme certains autres plugins, CSS3 Vertical Web Pricing Tables est conçu à base de CSS3 et HTML5. Vous pourrez créer un nombre illimité de tables bien que le plugin ne propose que 10 apparences différentes, Les fichiers source PSD y sont également inclus.

Consultez aussi 9 plugins WordPress pour personnaliser votre tableau de bord

Ses autres fonctionnalités supplémentaires sont : des effets uniques avec animations au survol des colonnes, une largeur de colonne personnalisable, le support du HTML, la prise en charge des shortcodes et bien plus.

Télécharger Démo | Hébergement Web

3. Quack Chat Live Chat System

Quack Chat est une extension WordPress premium qui s’intègre facilement à votre site web et offre une interface conviviale pour vos clients. Il s’agit d’un chat en ligne qui peut être utilisé à partir de n’importe quel ordinateur ou appareil mobile.

Quack chat live help support system for wordpress

Comme fonctionnalités il offre entre autre : le support des notifications instantanées via des messages ou des e-mails, un système de notification audible, l’archivage automatique (historique) des chats, un panneau de configuration convivial, une fenêtre de chat personnalisable, un message de salutation automatique et personnalisable, le support du défilement automatique sur la page du chat etc…

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Conclusion

Voilà ! C’est tout pour ce tutoriel, désormais, vous savez comment ajouter un Slider de plage sur un formulaire WordPress. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

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.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer