Hoe een WordPress HTML-tabel weergeven vanuit Gravity Forms-invoer

WP Table Manager heeft een geweldige integratie met Gravity Forms waarmee we HTML-tabellen kunnen maken op basis van de invoer, waardoor we kunnen filteren, ontwerpen en weergeven met een directe synchronisatie van de invoer op de best mogelijke manier.

Het tonen van formulierinzendingen is een belangrijk aspect dat we nodig hebben op elke site, omdat dat de beste manier is om gebruik te maken van wat ons formulier verzamelt, en tabellen zijn hiervoor het beste, dit helpt niet alleen bij interne processen, maar helpt ook veel wanneer we deze inzendingen willen tonen op onze pagina's of berichten, bijvoorbeeld als we een contactformulier hebben dat gegevens verzamelt van leveranciers en die informatie aan onze klanten tonen.

In deze tutorial zullen we zien hoe we onze Gravity Form-inzendingen rechtstreeks aan een HTML-tabel kunnen toevoegen met de mogelijkheid om deze ook toe te voegen aan een pagina of bericht.

Maak en pas WordPress HTML-tabellen aan met formulierinzendingen

Het is belangrijk om op te merken dat we Gravity Forms en WP Table Manager nodig hebben om deze tutorial te volgen.

Laten we beginnen met het maken van de tabel, we hebben al enkele Gravity Forms gegenereerd met enkele invoeren voor deze tutorial.

Nu onze formulieren klaar zijn, moeten we naar WP Table Manager > Alle tabellen gaan en klikken op + Creëren, als we Gravity Forms geïnstalleerd hebben, wordt de Tabel van Gravity Form weergegeven, klik erop.

Dit toont alle actieve formulieren, we hoeven alleen het formulier te selecteren dat zal worden gebruikt en vervolgens de velden te selecteren die we willen weergeven, of gewoon alle velden weergeven, en klikken op Klaar.

Onze tabel wordt automatisch geladen met de gegevens uit het formulier, met alleen randen toegevoegd aan de kop zodat we die gemakkelijk kunnen identificeren.

Nu is het eerste wat we kunnen zien dat we alle aanpassingsmogelijkheden hebben van WP Table Manager , dus laten we beginnen met het maken van een filter, dit is handig als we veel invoer in een formulier hebben.

Om een filter te maken, klikt u op Opmaak > Sorteren en filters, er verschijnt een pop-up waar we kunnen selecteren wat we willen filteren en of we ook een sorteeroptie willen, dit is hoe het eruit zou zien na het instellen van de Filter inschakelen-optie van Geen naar Kolom en het inschakelen van de sortering.

De sorteer- en filters worden alleen aan de voorkant van onze site weergegeven, dus we moeten de tabel aan onze pagina/post toevoegen om deze te zien. Het toevoegen van onze tabel is net zo eenvoudig als het zoeken naar het WP Table Manager Table-blok en het toevoegen aan onze post/pagina.

Geweldige filters met een sorteeroptie, maar we kunnen onze tabel nog steeds stylen. Om dit te doen, kunnen we alle opties van de tabel-editor in WP Table Managergebruiken, van uitlijning tot randen en vetgedrukte lettertypen. We hebben alle volgende opties beschikbaar.

Voor deze tutorial zal ik alle lettertypen sterk maken en zal ik de Thema > Alternatieve Kleuren sectie gebruiken die onze tabelcreatie verder zal versnellen.

Het beste deel is dat onze tabel de cel blijft bijwerken met alle ingediende gegevens, laten we onze formulier op de pagina bekijken waar we het eerder hebben gepubliceerd.

En klaar! Onze inzendingen worden weergegeven en de opties voor het aanpassen van de tabel maken het mogelijk om deze aan te passen aan elk thema!

Van Gravity Form-invoer naar Grafieken

We dachten dat WP Table Manager ons alleen zou toestaan tabellen te maken vanuit de invoeren en het antwoord is nee! We kunnen ook grafieken maken op basis van de informatie, en het is net zo eenvoudig als klikken op Grafiek > Grafiek maken van data.

En de magie is gedaan! Onze tabelgegevens verschijnen nu in een grafiek, en we hebben een zijpaneel met veel aanpassingstools, zoals het toepassen van een ander thema of het selecteren van de gegevens die voor de grafiek moeten worden gebruikt. Nu kunnen we bijvoorbeeld een grafiek maken op basis van het aantal gekochte producten met behulp van onze formulieren!

In het eerste gedeelte van het zijpaneel kunnen we het thema selecteren en de gegevens en kleuren kiezen die worden gebruikt.

En de tweede sectie met Configuratie stelt ons in staat om onze grafiek verder aan te passen en de labels te bewerken die worden gebruikt om elk deel van de grafiek te definiëren. Het bevat ook een shortcode die we kunnen gebruiken om onze grafiek waar dan ook weer te geven.

In dit geval vergelijken we 2 producten en zijn uiteindelijk overgegaan tot het gebruik van de cirkeldiagram met 2 verschillende kleuren die ons in staat stellen om gemakkelijk het verschil te zien in het aantal verkopen.

Het proces van het publiceren hiervan zou vergelijkbaar zijn met de normale tabelweergave. We kunnen elke pagina-builder gebruiken met het WP Table Manager Chart-blok (dat beschikbaar is op alle belangrijke pagina-builders).

Er wordt een vak geopend waarin we de grafiek kunnen selecteren die we willen weergeven, we moeten het selecteren en klaar! De grafiek is gepubliceerd.

Nu hebben we een tabel met onze invoer en een geweldige grafiek die ons helpt de tabel eveneens te begrijpen, we kunnen zeggen dat deze integratie een totaal complete tool is! Is het niet?

Begin met het gebruiken van Gravity Forms en WP Table Manager

Zoals je kunt zien WP Table Manager + Gravity Forms, is gewoon een perfecte combinatie om al onze invoer en gegevens op orde te houden, we hebben veel manieren om het weer te geven en de integratie is net zo eenvoudig als het klikken op een knop, geweldig! Is het niet? Waar wacht je nog op? Ga hier en krijg WP Table Manager nu.