Site icon WPMarmite

Ninja Forms : on a infiltré et testé ce plugin de formulaire

Ninja Forms

Si je vous dis « ninja », à quoi pensez-vous ? Pour ma part, ça m’évoque trois choses, de but en blanc :

Dans cet article, on va se concentrer sur la troisième référence, celle en rapport avec l’extension de formulaire. Par avance, mes excuses pour les fans des Tortues Ninja qui pensaient avoir droit à un revival.

Pour votre activité de webmaster/créateur de site, Ninja Forms sera plus intéressant à évoquer. À la fin de ces lignes, vous saurez tout sur son mode de fonctionnement, ses qualités et ses défauts.

Formez-vous à WordPress en 3 mois

Apprenez à concevoir des sites WordPress sécurisés, rapides et conformes aux obligations légales avec la formation à distance la plus généreuse du marché (éligible au CPF).

Qu’est-ce que Ninja Forms ?

Ninja Forms est un plugin WordPress freemium qui permet de créer différents types de formulaires (contact, connexion, réservation, paiement etc.) sans coder. Il s’utilise en glisser-déposer et propose des modèles de formulaires prêts à l’emploi pour éviter à l’utilisateur de partir de zéro.

Ninja Forms est disponible sous deux versions : 

Avec plus de 30 millions de téléchargements et 800K installations actives, il s’agit de l’une des extensions pour créer un formulaire les plus populaires du répertoire officiel, derrière Contact Form 7 (5M+ installations actives) et WPForms (5M+ installations actives). 

Découvrez juste en dessous ce qui fait la renommée de Ninja Forms, et pourquoi il a su conquérir un public en masse.

Quelles sont les fonctionnalités principales de Ninja Forms ?

Une extension conçue pour les débutants…

« 100 % adapté aux débutants. » C’est l’argument commercial majeur mis en avant par Ninja Forms. 

Sa cible principale reste les non-techniciens qui ne savent pas  – ou ne veulent pas – coder pour créer un formulaire, mais qui veulent quand même un rendu professionnel.

Pour cela, Ninja Forms propose diverses fonctionnalités appréciables : 

… mais aussi pour les développeurs

Si Ninja Forms permet de concevoir des formulaires faciles à utiliser « qui vous donneront l’impression d’être un développeur web professionnel », ses créateurs ont aussi pensé aux développeurs, justement.

Grâce à Ninja Forms, ces derniers pourront facilement améliorer ou optimiser leurs formulaires grâce aux hooks disponibles, très utiles pour étendre les fonctionnalités de l’extension.

À côté de cela, Ninja Forms propose aussi un add-on appelé Webhooks, pour envoyer les données de votre formulaire vers un outil tiers qui ne proposerait pas d’intégration à WordPress.

Ninja Forms, un plugin évolutif

La possibilité de créer des formulaires variés avec Ninja Forms

Sa description le précise clairement : Ninja Forms est un constructeur de formulaires. Comprenez, au sens large.

Évidemment, vous pouvez mettre sur pied des formulaires de contact avec lui. Mais le limiter uniquement à cela serait bien trop réducteur. En fait, les possibilités créatives sont quasi-illimitées (à condition d’utiliser une licence ou des add-ons premium).

Ninja Forms liste une cinquantaine de types de formulaires dans sa Foire aux Questions présente sur sa page du répertoire officiel. Parmi les exemples proposés, on retrouve : 

Des options poussées proposées en premium

Si Ninja Forms propose une base avec des champs classiques (nom, prénom, e-mail, téléphone, message, bouton d’envoi, etc.) pour créer des formulaires relativement simples, dès sa version gratuite, il est possible d’aller beaucoup plus loin à l’aide de son offre premium.

En fonction de l’add-on ou de la licence dont vous vous servirez, vous pourrez : 

Des intégrations à des outils tiers pour automatiser vos process

Enfin, vous ne serez pas en reste niveau flexibilité, avec Ninja Forms. Ce dernier s’intègre à un écosystème de plus de 1 000 services, grâce à son intégration à Zapier.

Très pratique, aussi, pour un plugin de formulaire : l’intégration à une plateforme d’email marketing. Ninja Forms fait le boulot à ce niveau-là aussi, puisque vous pourrez le connecter à Mailchimp ou ActiveCampaign (en premium, par contre), pour ne citer que ces services.

Dans ce cas, les coordonnées de vos visiteurs que vous aurez collectées atterriront directement dans la liste de contacts de votre choix. 

Voilà pour ce premier tour d’horizon qui nous a permis de faire les présentations. À présent, découvrez plus en détails la personnalité et le caractère de cette extension de formulaire. 

Pour cela, on va la passer à la moulinette pour voir ce qu’elle a dans le ventre. À travers un exemple concret, vous allez apprendre à concevoir un formulaire de contact en partant de zéro. En voiture !

Comment créer un formulaire de contact avec Ninja Forms en 4 étapes

Pour vous détailler le mode de fonctionnement de Ninja Forms, on va se baser sur la version gratuite de l’extension, suffisante pour créer un formulaire de contact efficace. Bien sûr, si vous souhaitez bénéficier d’options supplémentaires, la version Pro sera plus complète. On vous détaillera ses caractéristiques et ses tarifs un peu plus tard dans cet article.

Étape 1 : Installer et activer l’extension

Pour débuter, installez l’extension depuis l’interface d’administration (back office) de votre site WordPress. 

Pour cela, passez par Extensions > Ajouter :

Après activation du plugin, vous verrez apparaître un menu de réglages baptisé « Ninja Forms » dans la barre latérale gauche de votre admin. Ce menu général se décompose en 7 sous-menus.

C’est à partir de là que vous commencerez la création de tout nouveau formulaire, notamment :

Pour installer Ninja Forms après son achat, téléchargez le fichier zip de votre licence ou de votre add-on dans votre espace client, puis ajoutez-le sur votre site WordPress dans Extensions > Ajouter.

Étape 2 : Choisir un modèle de formulaire

Hop, sans transition, place à l’étape n°2 : l’ajout d’un nouveau formulaire. Pour cela, suivez le chemin suivant Ninja Forms > Ajouter.

L’extension vous renvoie sur une page contenant 3 onglets :

Pour concevoir notre formulaire de contact, on va s’appuyer sur le modèle appelé « Contactez-nous ». Cliquez dessus pour l’activer.

Bien sûr, vous avez la possibilité de partir d’une feuille blanche, en choisissant le modèle « Formulaire vierge ».

Étape 3 : Ajouter des champs à votre formulaire Ninja Forms

Une interface claire et en plein écran

Ça y est : vous voilà sur l’interface d’édition de Ninja Forms. Au premier coup d’œil, vous remarquerez qu’elle est épurée et peu surchargée.

Elle s’impose en plein écran pour éviter toute distraction, ce qui permet de vous concentrer entièrement à la création de votre formulaire.

Décomposons son organisation et son mode de fonctionnement :

Quels sont les types de champs proposés ?

Cliquez donc sur ce bouton « + » pour ajouter les champs de votre choix, répartis en 4 catégories :

  1. Champs communs : case(s) à cocher, liste déroulante, images, envoyer, paragraphe, date/heure, sélection multiple, boutons radio, ligne de texte.
  2. Champs d’infos utilisateur : adresse, ville, e-mail, prénom, nom, pays, localisation, téléphone, code postal.
  3. Champs de mise en page : HTML, jeu de champs répétable, séparateur.
  4. Champs divers : confirmé, caché, nombre, reCAPTCHA, anti-spam, vote par étoiles.

Au total, ce sont pas moins de 28 champs qui vous sont offerts dès la version gratuite. Un nombre vraiment conséquent qui permet à Ninja Forms de se démarquer de la concurrence sur ce point précis.

À titre de comparaison, l’un de ses concurrents, WPForms, propose « seulement » 10 champs dans sa version gratuite.

Avec Ninja Forms, on apprécie de bénéficier de champs classiques indispensables à tout formulaire de contact (nom, prénom, e-mail, envoyer etc.), mais aussi de champs plus avancés pour concevoir des formulaires plus avancés (notes, jeu de champs répétable, etc.).

Comment ajouter et personnaliser les champs de votre formulaire ?

Pour intégrer un nouveau champ à votre formulaire, survolez-le avec votre souris, puis effectuez un glisser-déposer à l’endroit souhaité, sur votre formulaire.

Pour le personnaliser, cliquez dessus. Vous pourrez alors : 

En survolant chaque champ, vous accédez aussi à des actions rapides pour supprimer le champ, le dupliquer ou le modifier :

Étape 4 : Procéder aux réglages finaux

Lorsque vos champs sont intégrés et configurés, vous pouvez peaufiner votre formulaire à l’aide des deux derniers onglets de réglages. « E-mails et actions » vous propose 4 options  :

  1. Enregistrer les données à chaque fois qu’un formulaire est soumis (Record submission). Vous pouvez exclure certains champs et configurer un délai à partir duquel les données s’effaceront.
  2. Envoyer une confirmation par e-mail (Email confirmation) pour indiquer à votre visiteur que son formulaire a bien été envoyé.
  3. Délivrer une notification par e-mail (Email notification) pour signaler à l’administrateur du site (vous, par exemple) qu’une personne a rempli et envoyé votre formulaire.
  4. Afficher un message de confirmation (Success Message) dès que l’utilisateur envoie un formulaire.

Chaque option s’active et se désactive en un clic et se paramètre individuellement comme un champ, en cliquant dessus.

Enfin, l’onglet « Avancé » dispose de deux options :

  1. « Règles d’affichage ». Dans ce menu, vous pouvez notamment choisir d’afficher le titre de votre formulaire, d’effacer les champs et de masquer le formulaire après envoi. Vous avez aussi la possibilité de modifier la position du libellé par défaut (au-dessus, au-dessous, à gauche, à droite ou caché par rapport à son champ).
  2. « Restrictions » permet par exemple de n’accepter qu’une seule soumission de formulaire par utilisateur, si vous le souhaitez. Pour cela, sélectionnez le champ « Email » dans l’encart « Champ unique ».

Et voilà, votre formulaire est fin prêt. Publiez-le en cliquant sur le bouton du même nom. Vous allez à présent apprendre à l’intégrer dans votre contenu.

Par défaut, Ninja Forms ne propose pas d’options pour personnaliser l’apparence visuelle de votre formulaire (couleurs, typographie, bordure, arrière-plan etc.). L’extension hérite du style de votre thème, pour vous assurer quand même une certaine continuité graphique.
Pour agir précisément sur le style de votre formulaire, vous devrez soit ajouter du code CSS, soit passer par l’add-on « Layout and Styles ».

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Comment intégrer un formulaire Ninja Forms dans votre contenu ?

Comment intégrer un formulaire dans une page ou un article ?

Votre formulaire est tout pimpant et sémillant. Faites-en donc profiter vos visiteurs en l’ajoutant à vos articles et/ou à vos pages. Pour cela, Ninja Forms propose 3 méthodes pour intégrer un formulaire.

Utiliser le bloc Gutenberg proposé par Ninja Forms

Première option possible : passer par le bloc Gutenberg maison proposé par Ninja Forms. Rendez-vous dans la page de votre choix (ex : votre page Contact), et ajoutez le bloc appelé « Ninja Form »

Il ne vous reste plus qu’à sélectionner votre formulaire dans la liste déroulante afin qu’il s’affiche :

Utiliser le bloc « Code court »

Deuxième option, très similaire. Sauf que cette fois, c’est le nom du bloc à utiliser qui change. Sélectionnez le bloc « Code court » et collez le shortcode associé à votre formulaire à l’intérieur.

Vous trouverez ce shortcode dans Ninja Forms > Tableau de bord. Il se présente sous ce format : [ninja_form id=2].

Attacher votre formulaire

Les blocs Gutenberg ne vous séduisent pas ? Alors vous pouvez aussi ajouter votre formulaire dans votre contenu en le sélectionnant dans l’encart « Attacher un Ninja Form » situé dans l’onglet « Page » de l’éditeur de contenu de WordPress.

Par contre, dans ce cas de figure, vous ne pourrez pas choisir où s’affichera votre formulaire. Par défaut, il se positionnera à la fin, après votre contenu.

Comment intégrer un formulaire Ninja Forms dans une zone de widgets ?

Les pages et les articles représentent les principaux types de contenus proposés par WordPress. Mais ce ne sont pas les seuls endroits où vous pouvez ajouter un formulaire.

Il est aussi possible de l’intégrer au sein d’une zone de widgets comme votre barre latérale (sidebar) ou votre pied de page (footer)

Le nombre et le type de zones de widgets proposés dépend du thème que vous utilisez. Il se peut qu’il ne propose pas de barre latérale, par exemple.

En pratique, vous disposez de deux façons de procéder : 

Comment intégrer Ninja Forms à Elementor ?

Allez, on continue à causer intégration, car ce n’est pas fini. ^^ Si vous faites partie de la gigantesque base d’utilisateurs (+ de 10 millions) du constructeur de page Elementor, sachez que vous pouvez profiter d’une intégration dédiée au page builder le plus populaire de l’écosystème WordPress.

Pour cela, il suffit de sélectionner le widget « Ninja Forms » sur l’éditeur d’Elementor, puis de sélectionner le formulaire de votre choix. Grâce à cela, vous pourrez personnaliser l’apparence de votre formulaire directement depuis l’interface d’Elementor.

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Comment créer un lien public pour accéder directement à votre formulaire ?

Enfin, il existe une ultime façon d’afficher votre formulaire à vos visiteurs. Plutôt que de l’intégrer dans vos pages, vous pouvez proposer à vos visiteurs d’y accéder directement en cliquant sur un lien.

Pour cela, voici la marche à suivre : 

Quels sont les réglages additionnels proposés par Ninja Forms ?

Votre formulaire actuel est déjà fonctionnel et efficace, mais vous pouvez lui apporter quelques retouches et le paramétrer un peu plus finement grâce à certaines options proposées dans le menu général de Ninja Forms :

Pour y voir plus clair, je vous propose de faire un tour dans chaque sous-menu.

Tableau de bord

Ici, vous retrouverez tous les formulaires que vous avez créés, avec leur date de création et le code court qui leur est associé.

Un clic sur l’icône représentant une roue dentée permet par exemple de modifier, dupliquer, prévisualiser et supprimer un formulaire.

Vous pouvez aussi ajouter un formulaire depuis ce tableau de bord, et également activer les services et add-ons proposés par Ninja Forms.

Entrées

Le sous menu « Entrées » compile les données en rapport avec vos leads, c’est-à-dire les personnes qui ont rempli et soumis un ou plusieurs de vos formulaires.

Vous retrouverez par exemple, pour chaque formulaire :

Vous avez la possibilité de télécharger toutes ces données, si vous le souhaitez. 

Importer/Exporter

Comme son nom l’indique, ce sous-menu permet d’importer ou d’exporter vos formulaires. Vous pouvez par exemple vous en servir pour exporter l’un de vos formulaires vers un autre site WordPress que vous administrez.

À noter que vous pouvez aussi importer ou exporter uniquement certains champs de votre choix.

Réglages

À l’intérieur de ce sous-menu, vous pourrez procéder à :

C’est aussi dans le sous-menu « Réglages » que vous pouvez activer les licences de vos modules, via l’onglet « Licences ».

Quels sont les modules complémentaires proposés par Ninja Forms ?

Si la version gratuite de Ninja Forms est déjà bien fournie en options, il est possible d’aller beaucoup plus loin avec des add-ons que vous pouvez vous procurer à l’unité.

La liste de ceux qui vous sont proposés est à retrouver dans Ninja Forms > Modules complémentaires.

Au moment de rédiger ces lignes, il y en avait 41 classés en plusieurs catégories :

Ninja Forms propose aussi un module pour connecter WordPress à Zapier. Grâce à cet outil, vous pourrez intégrer vos formulaires à des centaines de services différents.

Évidemment, ces modules complémentaires ont un coût. Je vous le détaille dans la partie suivante, qui aborde les tarifs de Ninja Forms.

Combien coûte Ninja Forms ?

L’offre premium de Ninja Forms vous intéresse ? Sachez qu’il existe deux façons de vous la procurer.

Opter pour une licence

Tout d’abord, vous pouvez acheter l’une des 4 licences (Memberships) proposées par Ninja Forms :

Au moment de choisir parmi telle ou telle licence, prenez notamment en compte :

Acheter un add-on à l’unité

Si vous êtes seulement intéressé par un ou plusieurs add-ons, vous pouvez aussi vous les procurer à l’unité. D’ailleurs, à la base, Ninja Forms ne proposait que cette option-là (ses concepteurs ont ensuite commercialisé des licences).

Dans certains cas de figure, un add-on peut être plus avantageux qu’une licence.

Chaque add-on est proposé sous 3 formules :

Bien compris pour les prix ? Alors on passe à l’épineuse question du RGPD.

Quelle conformité au RGPD ?

Lorsqu’on cause formulaire, il y a souvent un mot qui nous revient à la bouche. Enfin, plutôt un sigle : RGPD.

Le Règlement Général sur la Protection des Données encadre le traitement des données personnelles au sein de l’Union Européenne. Et cela concerne notamment les informations que vous allez recueillir sur vos visiteurs (ex : nom, prénom, e-mail, etc.) à chaque fois qu’ils vont remplir et envoyer l’un de vos formulaires.

Plusieurs règles sont à respecter pour être dans les clous. Pour être certain de ne pas commettre d’impair, le mieux reste de vous rapprocher d’un spécialiste de la question, si vous avez le moindre doute. 

Vous pouvez aussi consulter les ressources suivantes, pour vous aider à vous mettre en conformité :

Par ailleurs, la formation WordPress de WPChef vous montre également comment configurer Ninja Forms pour le RGPD.

Eh bien, je pense que l’on a réalisé un tour assez complet de l’extension. Il ne reste plus qu’à récapituler tout ce que l’on a vu jusqu’à présent.

Notre avis final sur Ninja Forms

En guise de résumé, je vous propose de revenir sur les avantages et les limites de Ninja Forms. Je terminerai en vous indiquant pour qui le plugin me semble destiné.

Points forts

Points faibles

Ninja Forms, pour qui ?

Au final, Ninja Forms est une extension plus séduisante que décevante, avec des avantages qui me semblent prendre le pas sur les inconvénients.

De prime abord, c’est un plugin qui satisfera les non-techniciens et les débutants, grâce à sa simplicité d’usage. Sa version gratuite sera d’ailleurs suffisante si vous désirez concevoir un formulaire de contact sans coder, de façon visuelle.

Comme elle a plus d’un tour dans sa poche, Ninja Forms plaira aussi aux profils plus techniques, grâce aux nombreux hooks qu’elle propose.

Télécharger l’extension Ninja Forms :

Si je devais la comparer à certains concurrents au moment de faire un choix, je dirais que sa version gratuite est kif-kif avec celle de WPForms. Ce dernier plugin propose moins de champs que Ninja Forms, mais son interface de construction d’un formulaire est encore plus facile à utiliser, à mon sens.

En premium, une alternative comme Gravity Forms (lien aff), par exemple, sera tout aussi puissante et meilleur marché.

Et vous, quelle est votre opinion sur Ninja Forms ? Partagez-nous votre retour d’expérience dans les commentaires.

Quitter la version mobile