Comment afficher un tableau HTML WordPress à partir des entrées Gravity Forms

WP Table Manager a une intégration incroyable avec Gravity Forms qui nous permet de créer des tableaux HTML basés sur les entrées, nous permettant de filtrer, concevoir et afficher avec une synchronisation instantanée des entrées de la meilleure façon possible.

La visualisation des entrées de formulaire est un aspect important dont nous avons besoin sur chaque site, car c'est le meilleur moyen de tirer parti de ce que notre formulaire collecte, et les tableaux sont les meilleurs pour cela, cela n'aide pas seulement les processus internes, mais aide également beaucoup lorsque nous voulons afficher ces soumissions dans nos pages ou publications si, par exemple, nous avons un formulaire de contacts qui collecte des données auprès de fournisseurs et affiche ces informations à nos clients.

Dans ce tutoriel, nous allons voir comment ajouter nos entrées de formulaire Gravity directement à une table HTML avec la possibilité de les ajouter à une page ou un article également.

Créer et personnaliser des tables HTML WordPress avec des entrées de formulaire

Il est important de noter que nous avons besoin de Gravity Forms et de WP Table Manager pour suivre ce tutoriel.

Commençons par la création du tableau, nous avons déjà généré quelques formulaires Gravity Forms avec quelques entrées pour ce tutoriel.

Maintenant que nos formulaires sont prêts, nous devons aller à WP Table Manager > Toutes les tables et cliquer sur + Créer, si nous avons Gravity Forms installé, le Tableau à partir du formulaire Gravity sera affiché, cliquez dessus.

Cela affichera tous les formulaires actifs, nous devons simplement sélectionner le formulaire qui sera utilisé, puis sélectionner les champs que nous voulons afficher, ou afficher tous les champs, et cliquer sur Terminé.

Notre tableau se chargera automatiquement avec les entrées du formulaire, en ajoutant des bordures uniquement à l'en-tête afin que nous puissions facilement les identifier.

Maintenant, la première chose que nous pouvons voir, c'est que nous avons toutes les options de personnalisation de WP Table Manager disponibles, alors commençons par créer un filtre, cela est utile lorsque nous avons beaucoup d'entrées dans un formulaire.

Pour créer un filtre, cliquez sur Format > Trier et Filtres, une fenêtre popup apparaîtra où nous pouvons sélectionner quoi filtrer et si nous voulons une option de tri également, voici à quoi cela ressemblerait après avoir défini l'option Activer le filtre de Aucun à Dans la colonne et en activant le tri également.

Le tri et les filtres n'apparaîtront qu'à l'avant de notre site, nous devrions donc ajouter le tableau à notre page/article pour le voir, ajouter notre tableau est aussi simple que de rechercher le bloc de tableau WP Table Manager et de l'ajouter à notre article/page.

Filtres impressionnants avec une option de tri, mais nous pouvons toujours styliser notre tableau, pour ce faire, nous pouvons utiliser toutes les options de l'éditeur de tableau dans WP Table Manager, de l'alignement aux bordures et aux polices fortes, nous avons toutes les options suivantes disponibles.

Pour ce tutoriel, je vais définir toutes les polices pour qu'elles soient fortes et j'utiliserai la Thème > Couleurs alternatives section qui accélérera encore la création de notre tableau.

La meilleure partie est que notre tableau continuera à mettre à jour la cellule avec toutes les entrées soumises, voyons notre formulaire sur la page où nous l'avons publié auparavant.

Et c'est fait ! Nos entrées seront affichées et les options de personnalisation du tableau nous permettront de l'adapter à n'importe quel thème !

Des entrées de Gravity Form aux graphiques

Nous pourrions penser que WP Table Manager ne nous permettrait que de créer des tableaux à partir des entrées et la réponse est non ! Nous pouvons également créer des graphiques basés sur les informations, et c'est aussi simple que de cliquer sur Graphique > Créer un graphique à partir des données.

Et la magie est faite ! Les données de nos tableaux apparaissent maintenant dans un graphique, et nous avons un panneau latéral avec de nombreux outils de personnalisation comme l'application d'un autre thème ou la sélection des données à utiliser pour le graphique, maintenant nous pourrions, par exemple, créer un graphique basé sur la quantité de produits achetés en utilisant nos formulaires !

Dans la première section du panneau latéral, nous pouvons sélectionner le thème, et sélectionner les données et les couleurs qui seront utilisées.

Et la deuxième section avec Configuration nous permettra de personnaliser davantage notre graphique et de modifier les étiquettes utilisées pour définir chaque partie du graphique, il contient également un shortcode que nous pouvons utiliser pour afficher notre graphique où que nous le voulions.

Dans ce cas, nous comparons 2 produits, nous avons donc fini par utiliser le graphique circulaire avec 2 couleurs différentes qui nous permettront de voir facilement la différence dans le nombre de ventes.

Le processus de publication de ceci serait similaire à l'affichage normal du tableau, nous pouvons utiliser n'importe quel constructeur de page avec le bloc de graphique WP Table Manager (disponible sur tous les principaux constructeurs de pages).

Une boîte s'ouvrira où nous pouvons sélectionner le graphique que nous voulons afficher, nous devons le sélectionner et c'est fait ! Le graphique est publié.

Maintenant, nous avons une table avec nos entrées et un graphique génial qui nous aide à comprendre la table également, nous pouvons dire que cette intégration est un outil totalement complet ! N'est-ce pas ?

Commencez à utiliser Gravity Forms et WP Table Manager

Comme vous pouvez le voir WP Table Manager + Gravity Forms, est juste une combinaison parfaite pour garder toutes nos entrées et données en ordre, nous avons de nombreuses façons de les afficher et l'intégration est aussi simple que de cliquer sur un bouton, génial ! N'est-ce pas ? Qu'attendez-vous ? Allez ici et obtenez WP Table Manager maintenant.