Je vous ai parlé précédemment du tout nouveau plugin weForms. Aujourd’hui, je vous présente Ninja Forms, un concurrent de longue date. J’avais envie de rédiger cet article depuis un moment. J’ai connu cette extension lors de la sortie officielle de la V3.
Quelques informations sur ce plugin de formulaire :
- Plus de 7 millions de téléchargements
- Plus de 900 000 installations actives
- V1 sortie en janvier 2011 et V3 sortie en septembre 2016
- Notation : 4,4 / 5
- Le plugin est gratuit (addons payants)
Présentation rapide de NinjaForms
Voici les fonctionnalités principales :
- Form builder en drag & drop
- De nombreux champs de base disponibles (email, téléphone, dates, etc)
- Sauvegarde/Réutilisation de champs favoris (par exemple une liste de choix)
- Redirection possible après la soumission d’un formulaire
- Vue des soumissions des utilisateurs pour chaque formulaire, avec possibilité d’export et d’import
- Import/Export de formulaires
- Import/Export des champs favoris
- Notifications mails configurable à chaque soumission d’un formulaire
- Plusieurs options anti spam tels que Google ReCaptcha, Honeypot, champ de question/réponse.
- Côté front : Tout est fait en AJAX sans rechargement de la page
Vous pouvez voir une vidéo de présentation di-dessous:
Voici les différents types de champs disponibles :
- Case à cocher (checkbox)
- Radio button
- Texte
- Zone de texte
- Select
- Sélection multiple
- Bouton submit
- Date
- Prénom
- Nom
- Adresse
- Ville
- Pays
- Code Postal
- Adresse email
- Téléphone
- Séparateur
- Code HTML
- Nombre
- Champ hidden
- ReCaptcha
- AntiSpam
- Notation
- Produit
- Quantité
- Livraison
- Total
C’est très complet comme vous pouvez le constater, on n’est pas bridé de ce côté-là.
On peut voir le drag & drop en action sur cette capture d’écran.
Mais avant d’aller plus loin, petit tour d’horizon des différents menus du plugin.
Les Menus
Dashboard
Le premier élément du menu, c’est le tableau de bord. Ce dernier nous offre une liste des différents formulaires.
Lors du clic sur l’icône d’option, un nouveau menu contextuel apparaît. Il propose les actions suivantes :
- Modifier
- Supprimer
- Duppliquer
- Prévisualiser
- Voir les données reçues
On a également comme information la date de création du formulaire ainsi que le shortcode à copier dans les pages où l’on souhaite afficher un formulaire.
Ajouter
Le second élément de menu sert tout simplement à ajouter un nouveau formulaire.
Comme pour weForms, on nous propose un certain nombre de templates prédéfinis tels que :
- Formulaire vide
- Formulaire de contact
- Demande de devis
- Inscription à un événement
Soumissions
C’est sur cette page qu’on retrouve toutes les soumissions des utilisateurs.
Là encore on peut modifier, supprimer ou exporter la soumission. Au clic sur une soumission, on obtient en détail les valeurs des différents champs.
Import/Export
Fonctionnalité ô combien importante, l’import export de formulaires Ninja Forms vous économisera un temps précieux. De plus, il est même possible d’importer et exporter les champs sauvegardés.
Réglages
Enfin, les réglages du plugin sont assez limités, ce qui est plutôt une bonne chose. On retrouve la configuration Google ReCaptcha, ainsi que le choix du format de date et de la devise.
On a également accès à quelques réglages avancés tels que la suppression de toutes les données (formulaires, soumissions, etc), ou la désactivation des notifications administrateur.
Obtenir de l’aide
Cette page sert principalement à envoyer un ticket de support afin de résoudre un problème potentiel avec le plugin.
Modules complémentaires
Dernier élément du menu, il s’agit des modules complémentaires.
En effet, l’écosystème Ninja Forms est basé sur la gratuité du plugin principal, et de la vente de modules complémentaires pour enrichir le plugin de base. On retrouve ainsi tout un tas de modules intéressants :
- Logique conditionnelle
- Formulaire à plusieurs étapes
- Amélioration de la mise en page et du style des formulaires
- Upload de fichiers
- PayPal Express
- Mailchimp
- Ajout d’utilisateur WordPress
- Ajout d’articles WordPress
- Stripe
- Trello
- Slack
- etc
La totalité des modules est consultable ici : https://ninjaforms.com/extensions/
Les formulaires
Les mails et actions
Fonctionnalité très importante pour une extension de formulaire. Les emails servent à notifier une nouvelle soumission à l’administrateur du site, à l’utilisateur ou à tout autre personne. Il sont grandement personnalisables (adresse email d’envoi, de réception, CC, prénom, contenu du mail, etc).
Quant aux actions, il s’agit d’un très bon concept permettant d’effectuer une action au moment précis où un formulaire est soumis. Avec ce système, les extensions tierces peuvent facilement se pluger sur le système d’action de Ninja Forms et proposer leur propre action.
Exemple : Lors de la soumission d’un formulaire, envoyer une notification Slack dans tel chanel…
Par défaut, le plugin embarque les actions suivantes :
- Redirection
- Sauvegarde du formulaire dans la Base de données
- Message de succès
- WP Hook : très utile pour les développeurs, on peut directement indiquer un hook de type action à exécuter suite à la soumission du formulaire
Mode avancée
Nous avons plusieurs options spécifiques au formulaire pour personnaliser davantage ce dernier. On peut indiquer un titre de formulaire, choisir de l’afficher ou non, modifier les différents textes d’erreur ou de validation, etc.
Restrictions
Côté restrictions, Ninja Forms propose des réglages plutôt intéressants également. On peut limiter par nombre de soumission ou par utilisateur connecté comme pour weForms. Mais on peut aussi limiter par champ unique.
Imaginez par exemple une inscription à un événement avec un identifiant unique. Cela permettrait d’autoriser une seule soumission de formulaire avec cet identifiant unique.
Calculs
Autre fonctionnalité intéressante, le calcul.
On peut effectuer un calcul avec plusieurs champs de son formulaire. Par exemple un champ prix unitaire avec un champ quantité pour multiplier le prix final.
Le Design
Au niveau du design front du formulaire, on retrouve un design neutre par défaut.
Design plutôt sobre, mais qui sera en accord avec la plupart des thèmes.
L’extension nous permet également de choisir entre un style light, ou un style dark, pour encore mieux s’adapter au style de notre thème.
Ainsi, on peut voir avec ces captures d’écran que le thème light semble davantage adapté au thème Twenty Seventeen.
Et les développeurs dans tout ça ?
L’équipe de Ninja Forms apporte un soin particulier aux développeurs qui souhaitent modifier le comportement de l’extension ou ajouter certaines fonctionnalités tierces.
En plus de proposer de nombreux hook, ils ont réellement pensé aux développeurs en utilisant des paterns orientés objet facilement utilisable.
Les fonctionnalités clés
Voici selon moi, les fonctionnalités majeures du plugin :
- Form builder super bien pensé
- Beaucoup de champs par défaut
- Un stock de modules complémentaires très varié
- Le système d’action très bien pensé
- Les restrictions intéressantes
- Le calcul
- Developper friendly
- Un style passe partout
- Extension traduite
Conclusion sur Ninja Forms
En conclusion, Ninja Forms est un très bon plugin de formulaire. On sent qu’un travail très important a été réalisé pour obtenir un form builder aussi bon et complet. Les développeurs et les utilisateurs avancés seront ravis de nombreux modules supplémentaires.
L’équipe de Ninja Forms n’a pas hésité à prendre des risques en repartant de zéro pour cette troisième version. Et le moins qu’on puisse dire c’est que le résultat final est de qualité.
De mon côté, c’est une extension avec la quelle je prends de plus en plus de plaisir. Elle est suffisamment complète et en tant que développeur, je suis capable d’étendre certaines fonctionnalités pour coller à des besoins spécifiques, c’est donc un atout majeur.
Et vous, que pensez-vous de Ninja Forms ?
Beaucoup plus intuitif que Contact Form 7, à tester sans modération….
Bonjour , J’utilise NinjaForms pour des commandes de produits locaux dans une asso type Amap. Je trouve cet outils super !
J’essaye juste de trouver un moyen d’envoyer un email de confirmation avec le récapitulatif des produits commandés. J’ai bien trouvé comment envoyer ce message automatique, je peux mettre en dessous le listing complet du formulaire avec l’ensemble des champs, mais pas moyen de trouver un moyen de n’afficher que ceux qui ne sont pas vides. Avez vous une idée par hasard ? Merci. Maite