Jour : 13 décembre 2021

Route des Plugins #3 | Utilisation de Forminator

Posted on 13/12/202104/03/2024 by Enguerrand MICHAUX

Présentation du tuto

Dans ce tuto de la série #Route des Plugins, je vous propose de découvrir un plugin permettant d’ajouter formulaires, quizz, sondages et autres interfaces permettant une saisie de la part de l’utilisateur.

Nativement, WordPress ne permet d’intégrer aucun formulaire. C’est à dire que dès lors que l’on souhaite proposer un envoi simple de mail de contact aux utilisateurs, il faut nécessairement installer un plugin. Il en existe beaucoup , des plus simples jusqu’au plus complet/complexes. Forminator constitue selon moi le bon compromis en offrant des fonctionnalités variées, en plus d’une relative simplicité d’utilisation.

POINT DE DÉPART

Backend WordPress / Page ou article Elementor

PLUGIN

Forminator

Etape 1 : Installer le plugin

Comme la plupart des plugins, on doit l’installer via la bibliothèque des plugins de WordPress. On se rends dans “Extensions“ dans le tableau de bord WordPress, puis “Ajouter“. Dans la barre de recherche on saisie “Forminator” et on attends la fin de la recherche. On clique sur “Installer” puis sur “Activer“.

Etape 2 : Découverte les réglages du plugin

Général

Accessibilité

Captcha

Soumissions

Paiements

Les réglages de bases du plugins se divisent en différentes sous sections :

Général

On va y retrouver de quoi gérer le tableau de bord Forminator, de régler les en-têtes d'expéditeur (informations reçues par l'utilisateur qui recevra un e-mail sortant depuis votre site), et autres paramètres.
Accessibilité

Ici , on retrouve un seul réglage : activer ou non le mode contraste élevé, qui permet d'augmenter la visibilité des éléments graphiques.
Captcha

Comme tout plugin de formulaire , une couche de sécurité de base est nécessaire : le captcha. Il permet entre autres d'empêcher les robots de remplir et d'envoyer vos formulaires automatiquement, avec du contenu flood ou de type phishing. Ici , on rentre simplement les deux données demandées la clé du site et la clé secrète. Ces deux clés sont générées par l'outil reCaptcha de Google.
Soumissions

On va gérer ici tout ce qui se passe lorsque les formulaires sont envoyés et ou/comment les données sont stockées (conservation des données et conservation de l'IP de l'utilisateur qui à rempli le formulaire). On peut choisir la durée de conservation de ces deux données pour les formulaires, les sondages et les quizz, indépendamment.
Paiements

Dans ce dernier sous-menu, on peut connecter ces comptes de système de paiement (Stripe / Paypal Business) , si l'on souhaite intégrer une étape de paiement dans ces formulaires Forminator.

Etape 3 : Créer un contenu (formulaire / quizz ...)

Créer form #1

Créer form #2

Créer form #3

Créer form #4

Créer form #5

La création de formulaire est très simple , et se déroule en 3 grandes étapes :

On choisit le type de formulaire (formulaire / sondage / quizz) (img.1)
On choisit un modèle pour démarrer rapidement. Les réglages disponibles par formulaire ne seront pas les mêmes en fonction du modèle choisit (img.2)
On place ligne par ligne (et en colonne), les éléments de saisie, et qui seront ensuite affichés en tant que zone de saisies du formulaire (img.3)

Ensuite, pour chaque formulaire / sondage / quizz , ont à accès a une foule de réglages plus ou moins importants. Mon conseil est de naviguer dans tous ces réglages et d’essayer de bien comprendre à quoi ils correspondent via des tests ou des recherches dans la documentation du plugin.

Certains réglages les plus importants : Apparence (tout ce qui touche au design de votre formulaire et au CSS | img.4) / Behavior (comment se comporte votre formulaire ou votre page après soumissions du formulaire | img.5)

Etape 4 : Ajouter son formulaire à une page / article

Récupérer le code court

Utiliser le code court

Une fois notre formulaire créer (ou dès que l’on a une première version valide pour l’affichage), on peut générer un code court. On clique sur “Copier le code court” pour l’enregistrer dans le presse papier. Ensuite, sur une page ou un article Elementor, on place un bloc nommé “Code Court” , puis on colle le code dans la zone de saisie du bloc (img.2).

Certains plugins (souvent premium/payants) proposent des widgets tous prêts pour Forminator et d’autres plugins de formulaire équivalent. Cela peut être intéressant si des options supplémentaires sont proposées. Si non, je conseille d’utiliser le bon vieux code court qui est un widget intégré à Elementor.

ATTENTION : parfois Elementor n’affiche pas l’aperçu en temps réel, n’hésites pas à sauvegarder ta modification et de faire un aperçu de la page (via le bouton œil). Tu auras alors le visuel de ton code court.

Aperçus : exemples d'utilisations

Route des Plugins #2 | ⚙️ Utilisation de CPT UI

Posted on 13/12/202106/11/2023 by Enguerrand MICHAUX

Présentation du tuto

Dans ce tuto de la série #Route des Plugins, je vous propose de découvrir un plugin permettant d’ajouter des type de posts personnalisés. Nativement dans WordPress , on trouve deux principaux type de posts (post type) : Page et Article.

On voit qu’il s’agit de post type car ils sont présent dans le barre de gauche de WordPress et dispose d’un menu à eux. Un élément présent dans l’interface Page sera forcément de type Page. Si l’on souhaite obtenir des éléments personnalisés, comme par exemples Etudiants ou Films , on peut créer un Custom post type. C’est l’intérêt de ce plugin.

POINT DE DEPART

Backend WordPress

PLUGIN

CPT UI

Etape 1 : Installer le plugin

Comme tout plugin, pour l’installation, rends-toi sur l’onglet Extensions > Ajouter, et recherches dans la barre « Custom Post Type UI ». Une fois installée et activée, l’extension rajoute un élément dans la liste des options , dans la barre de gauche de l’espace administration (libellée CPT UI).

Etape 2 : Découverte les réglages du plugin

On peut presque diviser les réglages de CPT UI en trois parties :

Les réglages obligatoires (nom du champ, le pluriel du champ et au singulier);
Ensuite on trouve une très grosse liste des champs à renseigner pour personnaliser à 100% l’affichage de votre libellé personnalisé sous toutes les formes possibles sous WordPress;
Enfin, on trouve tous les réglages , qui vont gérer le comportement de vos libellés personnalisés.

Hormis les 3 premiers champs, tout le reste peut être laissé par défaut en fonction de vos besoins. On va voir ensemble quelques réglages et leur intérêt pour t’aider à paramétrer ton plugin :

Afficher dans les menus de navigation
Permets d’autoriser ou non la possibilité d’intégrer ce champ personnalisé dans tes menu (Apparence > Menu), un peu à l’image des pages, des articles ou des catégorie
API REST
Plutôt qu’une explication, un conseil si tu n’es pas développeur. Tous ce qui touche à l’API REST est à laisser par défaut si tu ne comprends pas de quoi il s’agit. Pour informations, une API est un ensemble d’outils et de règles pour aider à la création de services logiciels. Il s’agit d’un concept purement technique, mais peut être connait tu l’API Google, qui permet entre autres de récupérer des données de services Google (comme une carte, les avis, etc …)
Exclure de la recherche
Permet d’exclure ou d’inclure ce champ personnalisé, du retour de contenu de la fonction de recherche intégrée à WordPress. Si vous utilisez un champ personnalisé purement administratif, à but de classement ou de tri, tu peux ne pas vouloir l’afficher pour les clients / utilisateurs qui vont rechercher quelque chose sur le site.
Icone du menu
Permets de personnaliser son menu avec une icône pour identifier le type de champs
Supports
Réglage assez important qui permet de décider quelles fonctions peuvent être utilisées avec ton champ personnalisé. En clair, Est-ce qu’on peut leur donner un titre, leur attribuer un éditeur, un auteur, pouvoir écrire un extrait, pouvoir commenté, etc. … . On choisit dans la liste de champs à cocher quelle fonction on veut attribuer à notre champ personnalisé
Taxonomies
Deuxième réglage important, permet de pouvoir attribuer le support des taxonomie enregistrés dans WordPress. Par exemple, vous pouvez choisir ou non de permettre de catégoriser, libeller, etc.… vos contenus de types de postes personnalisés.

Etape 3 : Créer un custom post type

Avec toutes ces informations, il est maintenant assez facile de créer un type de champs personnalisé. Pour cela on clique sur Ajouter/Modifier des types de publications.

Dans Configuration par défaut, inscrit le slug de ton type de poste personnalisé. Le slug correspond au terme qui sera affiché dans l’url. Par exemple , pour le type Article (Posts en anglais) , le slug est « posts ».

Ensuite, saisi le libellé qui s’affichera pour le pluriel de ton type personnalisé (ex : Étudiants) et le libellé au singulier (ex : Etudiant). Paramètres le reste en fonction des informations ci-dessus. Pense notamment aux derniers qui permettent le support des catégories et des libellés ainsi que le support des images mise en avant, des auteurs, etc …

Une fois que tout est renseigné , cliques sur « Ajouter un type de publication »

Etape 4 : Création de contenus des CPT

Une fois le type de contenu créé, tu peux le retrouver dans ta barre d’administration à gauche. Par exemple, dans l’illustration ci-dessus, tu peux voir « Fiche Alternants » qui est un type de publication personnalisé que j’ai créé. Tu peux voir qu’au niveau de l’affichage, on retrouve exactement la même interface que pour ajouter des Pages ou des Articles (bouton Ajouter en haut, liste des contenus créé , etc …).

En fonction des réglages que tu as effectués avant, tu auras plus ou moins d’informations / de détails dans cette interface. Sur l’image, on peut voir que j’ai choisit de pouvoir lui attribuer un auteur (Ajouter des types de publications > Réglages > Supports > Case à cocher Auteur). À partir de là, on peut créer des contenus qu’il est possible de trier , réutiliser de manière automatisée etc …

Présentation du tuto

Etape 1 : Installer le plugin

Etape 2 : Découverte les réglages du plugin

Etape 3 : Créer un contenu (formulaire / quizz ...)

Etape 4 : Ajouter son formulaire à une page / article

Aperçus : exemples d'utilisations

Présentation du tuto

Etape 1 : Installer le plugin

Etape 2 : Découverte les réglages du plugin

Etape 3 : Créer un custom post type

Etape 4 : Création de contenus des CPT

ATTENTION A TA SANTÉ