Créer vos formulaires de contact avec Ninja Forms

Poster le: 25 mars 2021

Les formulaires font partie des éléments indispensables au bon fonctionnement de son site internet. Qu’il s’agisse de créer vos formulaires de contact, d’inscription à votre newsletter, ou encore pour offrir un freebie, ils sont devenus présents sur toutes les pages web. Lorsque l’on crée son site avec WordPress, la question du choix du plugin de formulaire relève du casse-tête. Et une fois ce dernier choisi, il faut encore réussir à le configurer. Rassurez-vous, je vais vous présenter mon coup de cœur, celui que j’utilise et conseil à mes clients. Son nom Ninja Forms, et vous allez l’adorer.

1 – Ninja Forms, bien plus qu’un simple formulaire de contact

1.1 À quoi sert un plugin pour ces formulaires

Le développement d’un formulaire sur un site internet n’est pas à la portée de tout le monde. Il faut des connaissances dans plusieurs langages de programmation type PHP, JavaScript, connaître les bases du HTML et du CSS et être sensibilisé à la sécurité informatique. Sans sécurité adaptée, les données que vous récupérer grave à votre formulaire pourraient se retrouver librement sur Internet. 

Mais le pire, c’est que sans sécurité, vos formulaires peuvent permettre à des personnes mal intentionnées (hackers) de prendre le contrôle de votre site internet.

Maintenant que vous savez ceci, vous comprenez la nécessité de sécuriser vos formulaires. Et c’est là que les plugins interviennent, ici pas besoin de savoir coder et la sécurité est gérée par les développeurs de plugins. 

Bien sûr, il ne faut pas prendre le premier plugin venu, il faut en choisir suivant quelques critères :

– une bonne réputation, 

– activé sur des dizaines de milliers de sites au minimum

– mises à jour sont récente (moins d’un mois minimum) 

Loin de moi l’idée de délaisser les plus petits plugins, mais lorsque l’on ne possède pas de notion de programmation, il est préférable de faire confiance au plus grand nombre pour son choix.

Les plugins vous permettront de créer de nombreux formulaires différents : contact, newsletter,…

Et dans la majorité des cas, vous pourrez placer vos formulaires là où vous le souhaitez, simplement en collant un shortcode dans votre page.

1.2 Pourquoi j’ai choisi Ninja Forms

Lorsque l’on parle de plugin de formulaire WordPress, le premier nom qui sort de la bouche de mes clients est Contact Form 7. 

Du haut de ses 5 millions d’installations actives, Contact Form 7 est le leader incontesté des plugins de contact gratuit sur le marché.

Ce plugin fait le job pour lequel il est conçu (création d’un ou plusieurs formulaires de contact, ajout de quiz, etc.) et en plus, il est gratuit.

Cependant, j’ai pas mal de reproches : 

Son interface trop minimaliste qui semble avoir figé dans le temps, de nombreuses options de personnalisation difficiles à configurer bref, Contact Form 7 n’est pas du tout “user friendly » à mes yeux.

Je vais vous présenter l’alternative que moi j’utilise et que je vous conseille:

Ninja Forms

miniature plugin ninja forms

C’ est selon moi le plugin de formulaire au top du moment (avec 1 million d’installations active, ce n’est pas un nouveau venu^^).

Son interface utilisateur est pensée et optimisée pour que la création d’un formulaire soit accessible quel que soit votre niveau de connaissance.

Tous les ajouts d’éléments se font par un système de « Drag & Drop » très bien conçu.

Vous pouvez personnaliser chaque champ simplement en cliquant dessus (voir plus bas le guide de création d’un formulaire).

Vous avez accès à pas moins de 10 template prédéfinis pour vous faciliter la création de formulaire (demande de devis, demande d’emploi, etc.).

Vous avez un plugin de base, gratuit et un système d’abonnement pour les versions pros et les modules d’extensions. (actuellement à 49 € sur le site de Ninja Forms 👉 Personal Membership)

Petit point supplémentaire pour Ninja Forms, les développeurs ont ajouté des options de personnalisations pour rendre vos formulaire conforme RGPD et ont même pensé à vous en publiant un tutoriel pour vous aider (sympa).

Je vous invite donc fortement à l’essayer.

2 – Comment créer vos formulaires de contact avec Ninja Forms

2.1 Petit tour d’horizon des fonctionnalités

Avant de passer au pas à pas de création d’un formulaire de contact, voyons ensemble ce que vous pouvez faire avec la version gratuite de Ninja Forms.

Vous avez 7 onglets dans le menu WordPress de Ninja Forms:

Tableau de bord

C’est l’accueil du plugin, vous retrouvez ici l’essentiel, un raccourci vers vos formulaires (avec accès au shortcode), un raccourci vers les services complémentaires (fonctionnalité encore en Bêta) et un raccourci vers les modules complémentaires (premium)

Ajouter

C’est dans cet onglet que l’on va créer un formulaire et pouvoir choisir parmi les template prédéfinis.

Entrées :

Ici, vous pouvez contrôler si vous avez reçu des mails via vos formulaires.

Importer/Exporter :

Comme son nom l’indique, ici, vous pouvez importer ou exporter vos formulaires depuis d’autres sites.

Réglages :

Dans cet onglet nous retrouvons les réglages généraux du plugin, format de la date, devise, etc.

Obtenir de l’aide :

Centre d’aide qui permet de créer un rapport que vous pourrez partager avec le support technique.

Modules complémentaires(premium):

Présentation et installation des différents modules.

Voilà, pour le petit tour d’horizon de Ninja Forms, il y a de quoi s’occuper un petit moment. Nous ne sommes plus ici en présence d’un simple plugin de formulaire, tant les options sont nombreuses. Mais rassurez-vous, ce plugin n’est pas une usine à gaz pour autant, toute son interface est conçue pour ne pas vous perdre dans les menus.

Petit tour d’horizon des fonctionnalités

2.2 Créer votre premier formulaire

Nous allons maintenant créer notre premier formulaire. J’ai choisi un formulaire de contact simple avec seulement quelques informations (nom, mail, description). Libre à vous de faire un formulaire beaucoup plus complet.

Lors de votre première connexion, vous serez accueillis par une popup de consentement sur les données et la newsletter de Ninja Forms (conforme RGPD).

Créer vos formulaire de contact avec Ninja Forms

Dans l’onglet “Ajouter” et directement depuis le tableau de bord du plugin, nous allons cliquer sur “Ajouter” afin de créer notre formulaire.

premier formulaire

Nous pouvons à présent choisir parmi les modèles disponibles, dont vous retrouverez l’intégralité en dessous de la photo.

choix modele

-Modèles disponibles version gratuite-

  • Formulaire vierge

Le formulaire vierge vous permet de créer n’importe quel type de formulaire avec notre constructeur en glisser-déposer.

  • Contactez-nous

Aidez vos utilisateurs à vous contacter avec ce formulaire de contact simple. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Demande de devis

Gérez les demandes de devis depuis votre site facilement avec ce modèle. Vous pouvez ajouter et retirer des champs si nécessaire.

  • Demande de renseignements

Recueillez les demandes de vos visiteurs avec ce formulaire générique. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Demande de suppression de données

Inclus l’action d’ajouter les utilisateurs à l’outil de suppression des données personnelles de WordPress, permettant aux administrateurs de respecter le RGPD et les autres lois de confidentialité depuis l’interface publique du site.

  • Demande d’emploi

Permettez à vos utilisateurs de postuler à un poste. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Demande d’export de données

Inclus l’action d’ajouter les utilisateurs à l’outil d’export des données personnelles de WordPress, permettant aux administrateurs de respecter le RGPD et les autres lois de confidentialité depuis l’interface publique du site.

  • Inscription à un évènement

Permettez à vos utilisateurs de s’inscrire facilement à votre prochain évènement. Vous pouvez ajouter et retirer des champs si nécessaire.

  • Questionnaire

Recueillez des informations à propos de vos visiteurs. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Recueillir des retours

Recueillez des retours pour un évènement, un article ou n’importe quoi d’autre. Vous pouvez ajouter et supprimer des champs si nécessaire.

Modèles supplémentaires

-Modules premium-

  • Créer une publication

Permettez à vos utilisateurs de créer des publications depuis l’interface publique à l’aide d’un formulaire, même avec des métadonnées personnalisées !

  • Inscription MailChimp

Ajoutez un utilisateur à une liste MailChimp. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Inscrire un utilisateur

Inscrire un utilisateur WordPress

  • Modifier le profil utilisateur

Permettez aux utilisateurs WordPress de modifier leur profil depuis l’interface publique du site, dont les métadonnées utilisateurs personnalisées !

  • Paiement PayPal

Collectez un paiement en utilisant PayPal Express. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Paiement Stripe

Collectez un paiement en utilisant Stripe. Vous pouvez ajouter et supprimer des champs si nécessaire.

  • Téléversement de fichier

Permettez à vos visiteurs d’envoyer des fichiers via les formulaires. Vous pouvez ajouter et supprimer des champs si nécessaire.

Nous allons donc choisir le modèle de formulaire de contact. Vous arrivez sur la page de personnalisation de votre formulaire.

modification formulaire de contact

La base a été créée pour vous. Il vous suffit maintenant d’ajouter les champs dont vous avez besoin en plus de ceux proposés via le bouton “+”. Ce dernier ouvre la fenêtre des champs utilisable grâce au “Drag & Drop”, il ne vous reste plus qu’à glisser les éléments désirés parmi le grand nombre disponible.

drag&drops

Vous aurez remarqué que sur les deux présente images, le champ Name à été traduit en “Nom”. Vous pouvez paramétrer de nombreuses options pour chaque champ, comme son affichage, une valeur par défaut, etc. En cliquant simplement dessus.

paramettre de champ
  1. Le libellé (ce qui est affiché à l’écran)
  2. Rendre le champ obligatoire ou non
  3. Inscrire une valeur par défaut si besoin
  4. Placeholder ou texte indicatif pour faciliter le remplissage d’un champ
  5. Sa description, pour donner des indications sur les informations attendues par exemple.
modification nom

Vous pouvez constater les personnalisations apportées sur mon champ nom.

“NAME” à été traduit par “Nom”, l’astérisque indiquant un champ obligatoire.

Ajout d’une petite description pour guider l’utilisateur (ceci est pour l’exemple bien entendu, je ne pense pas qu’il soit nécessaire de rappeler comment remplir le le champ nom ^^)

Et enfin le texte indicatif Jean pour encore plus guider l’utilisateur à vous fournir une bonne information.

Vous pouvez personnaliser ainsi tous les champs de votre formulaire, du champ “Nom” au bouton d’envoi.

MAJ : Le cas de la suppression d’un champ

Si vous avez besoin de retirer un champ, la procédure est très simple.

suppression d'un champ

Cliquez simplement sur le bouton paramètre du champ en question, deux options s’offre alors à vous. Soit le dupliquer soit le supprimer.

résultat suppression champ

Et voilà le résultat.

Une fois que votre formulaire vous paraît complet, vous passez sur l’écran “E-mail et actions”.

email et action

Ici vous pouvez configurer les actions qui se passent lorsque l’utilisateur valide le formulaire.

Quels sont les champs que vous souhaitez récupérer ou non, envoyer un mail de confirmation à votre utilisateur (RGPD ^^, à force de le répéter, je vais faire une parodie de YMCA). 

email et action confirmation

Vous pouvez aussi décider de vous envoyer ou non une alerte par mail et également configurer les messages qui seront affichés à l’écran lorsque l’utilisateur aura validé son formulaire pour lui indiquer qu’il l’a bien rempli et envoyé.

email et action success message

Pour finir, vous pouvez passer par l’écran “Option avancé et restriction”.

option avance reglage d'affichage

Ici, vous pouvez choisir l’affichage ou non de certains éléments de votre formulaire, comme son titre par exemple.

option avance restriction

Vous avez quelques options supplémentaires de restrictions, comme par exemple refuser un formulaire si l’adresse mail est déjà enregistrée dans votre base de données.

Ca y est nous sommes au bout de la création de ce formulaire de contact, il ne vous reste maintenant plus que deux petites étapes.

Le valider en cliquant sur le bouton publier.

bouton publier

Et ensuite choisir ou vous souhaitez que votre formulaire apparaisse sur votre site en collant le shortcode créer.

Allez, je vous montrer comment on fait ^^.

Pour commencer copier le shortcode de votre formulaire que vous retrouvez dans votre tableau de bord Ninja Forms (en copiant bien les “[ ]”, [exemple]).

emplacement shortcode ninja forms

Rendez-vous ensuite sur la page où sera placé votre formulaire.

Ou mettre le shortcode

Ajoutez un bloc “Code court” là où vous désirez voir apparaître le formulaire et coller le shortcode dedans. Ensuite mettez a jours votre page. Et allez admirez votre travail.

resultat

Maj : Comment supprimer un formulaire

Il peut arriver qu’un formulaire ne vous soit plus utile, il convient alors de le supprimer.

Cette procédure est très simple :

suppression formulaire

Dans votre espace Ninja Forms, cliquez sur l’icône paramètre (ci-dessus) du formulaire à supprimer.

suppression formulaire suite

Puis « Supprimer »

suppression formulaire suite

Une fenêtre pop-up apparaît vous demandant de confirmer la suppression du formulaire.

Votre formulaire a bien été supprimé.

Vous voilà avec un beau formulaire prêt à être rempli par vos utilisateurs. 

Vous savez à présent comment créer des formulaires pour votre site internet. Maintenant, que nous avons revu l’utilité des plug-ins pour la création de formulaire et que je vous ai présenté et expliqué Ninja Forms, dites-moi en commentaire si je vous ai convaincu de tester mon coup de cœur ou non.

4 thoughts on “Créer vos formulaires de contact avec Ninja Forms

  1. Bonjour, toutes ces informations sont très intéressantes et je vous remercie. Ce qui manque concerne la suppression d’un formulaire, tout le monde décrit comment supprimer les champs d’un formulaire. Je vous remercie par avance si vous pouvez communiquer la réponse. Bien cordialement.

    1. Bonjour Ina,
      Merci pour votre message. Je viens de mettre à jour l’article en ajoutant la suppression d’un champ et celle d’un formulaire.
      J’espère que cela va vous aider. N’hésitez pas à me faire un retour.
      Belle journée

  2. Jonathan, merci. C’est super mais ma version est téléchargée sur internet et j’ai seulement ces possibilités là :
    Modifier
    Dupliquer
    Prévisualiser
    Voir les entrées

    Il n’a pas supprimer !

    1. Bonjour Ina,
      Je ne suis pas sûr de comprendre, votre version est téléchargée ? Vous ne l’avez pas installé via les extensions WordPress ?
      Si vous disposé de la dernière version, vous devriez avoir les mêmes éléments que dans l’article.
      Belle journée

Laisser un commentaire

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