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

WP Table Manager possède une intégration exceptionnelle avec Gravity Forms qui nous permet de créer des tableaux HTML à partir des entrées, ce qui nous permet de filtrer, de concevoir et d'afficher les entrées avec une synchronisation instantanée de la meilleure façon possible.

Afficher les données saisies dans les formulaires est un aspect important dont nous avons besoin sur chaque site, car c'est le meilleur moyen de tirer parti des informations collectées par nos formulaires. Les tableaux sont la solution idéale pour cela ; cela facilite non seulement les processus internes, mais s'avère également très utile lorsque nous souhaitons afficher ces soumissions sur nos pages ou articles, par exemple si nous avons un formulaire de contact qui collecte des données auprès des fournisseurs et affiche ces informations à nos clients.

Dans ce tutoriel, nous verrons comment ajouter directement les entrées de notre formulaire Gravity Form à un tableau HTML, avec la possibilité de les ajouter également à une page ou à un article.

Créez et personnalisez des tableaux HTML WordPress avec des entrées de formulaire

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

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

Maintenant que nos formulaires sont prêts, nous devons aller dans WP Table Manager > Tous les tableaux et cliquer sur + Créer . Si Gravity Forms est installé, le tableau provenant de Gravity Forms s'affichera ; cliquez dessus.

Ceci affichera tous les formulaires actifs ; il suffit de sélectionner le formulaire à utiliser, puis les champs à afficher, ou d'afficher tous les champs, et de cliquer sur Terminé .

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

La première chose que nous pouvons constater, c'est que toutes les options de personnalisation de WP Table Manager sont disponibles. Commençons donc par créer un filtre ; cela s'avère utile lorsque nous avons de nombreuses entrées dans un formulaire.

Pour créer un filtre, cliquez sur Format > Tri et filtres . Une fenêtre contextuelle apparaîtra, vous permettant de sélectionner les éléments à filtrer et, si vous le souhaitez, une option de tri. Voici à quoi cela ressemblera après avoir défini l' Activer le filtre de Aucun à À l'intérieur de la colonne et activé le tri .

Les options de tri et de filtrage n'apparaîtront qu'en première page de notre site. Nous devons donc ajouter le tableau à notre page/article pour les voir. Ajouter notre tableau est aussi simple que de rechercher le bloc Tableau WP Table Manager et de l'ajouter à notre article/page.

Des filtres performants 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 de WP Table Manager: de l'alignement aux bordures en passant par les polices grasses, toutes les options suivantes sont disponibles.

Pour ce tutoriel, je vais paramétrer toutes les polices en gras et utiliser la Thème > Couleurs alternatives, ce qui accélérera encore la création de notre tableau.

Le plus intéressant, c'est que notre tableau mettra à jour automatiquement la cellule avec toutes les entrées soumises. Voyons voir notre formulaire sur la page où nous l'avons publié précédemment.

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

Des entrées du formulaire Gravity aux graphiques

On pourrait croire que WP Table Manager ne permet que de créer des tableaux à partir des entrées, mais ce n'est pas le cas ! On peut aussi créer des graphiques à partir de ces informations, et c'est aussi simple que de cliquer sur Graphique > Créer un graphique à partir des données .

Et la magie opère ! Les données de nos tableaux apparaissent désormais dans un graphique, et nous disposons d'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. Nous pourrions maintenant, par exemple, créer un graphique basé sur le nombre de produits achetés via nos formulaires !

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

La deuxième section, intitulée « Configuration », nous permettra de personnaliser davantage notre graphique et de modifier les étiquettes utilisées pour définir chaque partie du graphique. Elle contient également un code court que nous pouvons utiliser pour afficher notre graphique où nous le souhaitons.

Dans ce cas précis, nous comparons deux produits et avons donc opté pour un graphique circulaire avec deux couleurs différentes, ce qui nous permettra de visualiser facilement la différence au niveau du nombre de ventes.

Le processus de publication serait similaire à celui de l'affichage d'un tableau normal ; nous pouvons utiliser n'importe quel constructeur de pages avec le bloc Graphique WP Table Manager (disponible sur tous les principaux constructeurs de pages).

Une boîte de dialogue s'ouvrira, vous permettant de sélectionner le graphique à afficher. Il suffit de le sélectionner, et voilà ! Le graphique est publié.

Maintenant que nous avons un tableau avec nos données et un graphique génial qui nous aide aussi à comprendre ce tableau, on peut dire que cette intégration est un outil vraiment complet ! N'est-ce pas ?

Commencez à utiliser Gravity Forms et WP Table Manager

Comme vous pouvez le constater, WP Table Manager  : un clic suffit ! Génial, non ? Qu'attendez-vous ? Téléchargez WP WP Table Manager dès maintenant !