Hoe toon je een HTML-tabel van een WordPress-website op basis van Gravity Forms-inzendingen?

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

Het weergeven van formulierinzendingen is een belangrijk aspect voor elke website, omdat dit de beste manier is om de verzamelde gegevens van het formulier te benutten. Tabellen zijn hiervoor uitermate geschikt. Dit is niet alleen handig voor interne processen, maar ook wanneer we deze inzendingen willen weergeven op onze pagina's of in berichten. Denk bijvoorbeeld aan een contactformulier dat gegevens van leveranciers verzamelt en deze informatie vervolgens aan onze klanten toont.

In deze tutorial laten we zien hoe je je Gravity Form-inzendingen rechtstreeks aan een HTML-tabel kunt toevoegen, met de mogelijkheid om ze ook aan een pagina of bericht toe te voegen.

Maak en pas WordPress HTML-tabellen met formulierinvoer aan.

Het is belangrijk om te weten dat we Gravity Forms en WP Table Manager nodig hebben om deze handleiding te kunnen volgen.

Laten we beginnen met het maken van de tabel. We hebben al een aantal Gravity Forms-formulieren gegenereerd met enkele gegevens voor deze handleiding.

Nu onze formulieren klaar zijn, moeten we naar WP Table Manager > Alle tabellen en op + Maken . Als Gravity Forms is geïnstalleerd, wordt de tabel van Gravity Form weergegeven ; klik daarop.

Hier worden alle actieve formulieren weergegeven. We hoeven alleen maar het formulier te selecteren dat we willen gebruiken en vervolgens de velden te selecteren die we willen weergeven, of alle velden weer te geven, en op ' Klaar' .

Onze tabel wordt automatisch geladen met de gegevens uit het formulier. Alleen de koptekst krijgt een rand, zodat we de gegevens gemakkelijk kunnen herkennen.

Het eerste wat we zien, is dat we alle aanpassingsmogelijkheden van WP Table Manager tot onze beschikking hebben. Laten we beginnen met het maken van een filter. Dit is handig wanneer een formulier veel gegevens bevat.

Om een ​​filter te maken, klikt u op Opmaak > Sorteren en filters. Er verschijnt een pop-upvenster waarin u kunt selecteren waarop u wilt filteren en of u ook een sorteeroptie wilt inschakelen. Zo ziet het eruit nadat u de 'Filter inschakelen' van 'Geen' naar 'Binnen kolom' en de sorteerfunctie hebt ingeschakeld .

De sorteer- en filteropties verschijnen alleen aan de voorkant van onze site. Om ze te zien, moeten we de tabel aan onze pagina/pagina toevoegen. Het toevoegen van een tabel is heel eenvoudig: zoek naar het WP Table Manager -blok en voeg het toe aan je bericht/pagina.

Geweldige filters met een sorteeroptie, maar we willen onze tabel ook nog opmaken. Hiervoor kunnen we alle opties van de tabeleditor in WP Table Managergebruiken, van uitlijning tot randen en opvallende lettertypen. We hebben alle volgende opties tot onze beschikking.

Voor deze handleiding stel ik alle lettertypen in op 'vetgedrukt' en gebruik ik het 'Thema > Alternatieve kleuren' , wat het maken van de tabel verder zal versnellen.

Het mooiste is dat onze tabel de cel continu bijwerkt met alle ingediende gegevens. Laten we ons formulier eens bekijken op de pagina waar we het eerder hebben gepubliceerd.

En klaar! Onze inzendingen worden weergegeven en dankzij de aanpassingsmogelijkheden kunnen we de tabel in elk gewenst thema laten passen!

Van gegevens uit zwaartekrachtformulieren naar grafieken

Je zou kunnen denken dat WP Table Manager ons alleen in staat stelt tabellen te maken van de gegevens, maar dat is niet het geval! We kunnen ook grafieken maken op basis van de informatie, en dat is net zo eenvoudig als klikken op Grafiek > Grafiek maken van gegevens .

En het wonder is geschied! De gegevens uit onze tabellen verschijnen nu in een grafiek en we hebben een zijpaneel met veel aanpassingsmogelijkheden, 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 producten dat via onze formulieren is gekocht!

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

Het tweede gedeelte, ' Configuratie', stelt ons in staat om onze grafiek verder aan te passen en de labels te bewerken die worden gebruikt om elk onderdeel van de grafiek te definiëren. Het bevat ook een shortcode die we kunnen gebruiken om onze grafiek overal weer te geven waar we maar willen.

In dit geval vergelijken we twee producten, dus hebben we gekozen voor een cirkeldiagram met twee verschillende kleuren, waarmee we het verschil in het aantal verkopen gemakkelijk kunnen zien.

Het publicatieproces is vergelijkbaar met het weergeven van een normale tabel; we kunnen elke paginabouwer gebruiken met het WP Table Manager Chart-blok (dat beschikbaar is in alle belangrijke paginabouwers).

Er wordt een venster geopend waarin we de gewenste grafiek kunnen selecteren. Selecteer de grafiek en klaar! De grafiek is gepubliceerd.

Nu we een tabel met onze gegevens hebben en een fantastische grafiek die ons helpt de tabel te begrijpen, kunnen we wel zeggen dat deze integratie een volledig complete tool is! Toch?

Begin met het gebruik van Gravity Forms en WP Table Manager

Zoals je ziet, WP Table Manager + Gravity Forms de perfecte combinatie om al onze gegevens overzichtelijk te houden. We hebben talloze manieren om ze weer te geven en de integratie is zo eenvoudig als een muisklik. Geweldig, toch? Waar wacht je nog op? Ga hierheen en download WP Table Manager nu.