Como exibir uma tabela HTML do WordPress a partir de entradas do Gravity Forms

WP Table Manager possui uma integração incrível com o Gravity Forms , que nos permite criar tabelas HTML com base nas entradas, possibilitando filtrar, formatar e exibir as tabelas com sincronização instantânea dos dados da melhor maneira possível.

Exibir os dados coletados em formulários é um aspecto importante e necessário em todos os sites, pois é a melhor maneira de aproveitar as informações coletadas. Tabelas são ideais para isso, não apenas para processos internos, mas também para exibir esses dados em páginas ou posts, como, por exemplo, um formulário de contato que coleta dados de fornecedores e os exibe para nossos clientes.

Neste tutorial, veremos como adicionar as entradas do Gravity Forms diretamente a uma tabela HTML, com a possibilidade de adicioná-las também a uma página ou postagem.

Crie e personalize tabelas HTML do WordPress com campos de formulário.

É importante ressaltar que precisamos do Gravity Forms e WP Table Manager para seguir este tutorial.

Vamos começar com a criação da tabela. Já temos alguns formulários do Gravity Forms gerados com algumas entradas para este tutorial.

Agora que nossos formulários estão prontos, precisamos ir em WP Table Manager > Todas as tabelas e clicar em + Criar . Se o Gravity Forms estiver instalado, a opção Tabela do Gravity Forms será exibida ; clique nela.

Isso mostrará todos os formulários ativos; basta selecionar o formulário que será usado e, em seguida, selecionar os campos que deseja exibir, ou exibir todos os campos, e clicar em Concluído .

Nossa tabela será carregada automaticamente com as entradas do formulário, adicionando bordas apenas ao cabeçalho para que possamos identificá-las facilmente.

A primeira coisa que podemos ver é que temos todas as opções de personalização do WP Table Manager disponíveis, então vamos começar criando um filtro. Isso é útil quando temos muitas entradas em um formulário.

Para criar um filtro, clique em Formatar > Classificar e Filtros. Uma janela pop-up será exibida, onde você poderá selecionar o que filtrar e, se desejar, também uma opção de classificação. Veja como ficará após definir a opção Ativar Filtro Nenhum para Dentro da Coluna e ativar a classificação .

A opção de ordenar e filtrar só aparecerá na página inicial do nosso site, então precisamos adicionar a tabela à nossa página/postagem para visualizá-la. Adicionar a tabela é tão simples quanto pesquisar pelo bloco de tabela WP Table Manager e adicioná-lo à nossa postagem/página.

Filtros incríveis com opção de classificação, mas ainda podemos estilizar nossa tabela. Para isso, podemos usar todas as opções do editor de tabelas do WP Table Manager, desde alinhamento e bordas até fontes marcantes. Temos todas as seguintes opções disponíveis.

Para este tutorial, definirei todas as fontes como "Strong" e usarei a Tema > Cores Alternativas, o que acelerará ainda mais a criação da nossa tabela.

A melhor parte é que nossa tabela continuará atualizando a célula com todas as entradas enviadas. Vejamos nosso formulário na página onde o publicamos anteriormente.

E pronto! Nossas inscrições serão exibidas e as opções de personalização da tabela nos permitirão adaptá-la a qualquer tema!

Das entradas do Gravity Form aos gráficos

Poderíamos pensar que WP Table Manager só nos permitiria criar tabelas a partir das entradas, mas a resposta é não! Também podemos criar gráficos com base nas informações, e é tão fácil quanto clicar em Gráfico > Criar gráfico a partir de dados .

E a mágica aconteceu! Os dados das nossas tabelas agora aparecem em um gráfico, e temos um painel lateral com várias ferramentas de personalização, como aplicar outro tema ou selecionar quais dados devem ser usados ​​no gráfico. Agora podemos, por exemplo, criar um gráfico com base na quantidade de produtos comprados usando nossos formulários!

Na primeira seção do painel lateral, podemos selecionar o tema e escolher os dados e cores que serão usados.

A segunda seção, de Configuração , nos permitirá personalizar ainda mais o gráfico e editar os rótulos usados ​​para definir cada parte dele. Ela também contém um código curto que podemos usar para exibir o gráfico onde quisermos.

Neste caso, estamos comparando dois produtos, então acabamos usando o gráfico de pizza com duas cores diferentes, o que nos permitirá ver facilmente a diferença no número de vendas.

O processo de publicação seria semelhante à exibição normal de uma tabela; podemos usar qualquer construtor de páginas com o bloco WP Table Manager Chart (disponível em todos os principais construtores de páginas).

Uma caixa será aberta onde poderemos selecionar o gráfico que desejamos exibir. Basta selecioná-lo e pronto! O gráfico será publicado.

Agora que temos uma tabela com nossas entradas e um gráfico incrível que nos ajuda a entender a tabela, podemos dizer que essa integração é uma ferramenta totalmente completa! Não é?

Comece a usar o Gravity Forms e WP Table Manager

Como você pode ver, WP Table Manager + Gravity Forms é a combinação perfeita para manter todas as nossas entradas e dados organizados. Temos diversas maneiras de exibi-los e a integração é tão fácil quanto clicar em um botão. Incrível, não é? O que você está esperando? Acesse aqui e adquira WP Table Manager agora mesmo.