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

WP Table Manager tem uma incrível integração com o Gravity Forms que nos permite criar tabelas HTML com base nas entradas, permitindo-nos filtrar, projetar e mostrar com uma sincronização instantânea das entradas da melhor maneira possível.

Mostrar entradas de formulários é um aspecto importante que precisamos em todos os sites, pois essa é a melhor maneira de aproveitar o que nosso formulário coleta, e as tabelas são as melhores para isso, isso não apenas ajuda nos processos internos, mas também ajuda muito quando queremos mostrar essas submissões em nossas páginas ou posts, por exemplo, se tivermos um formulário de contato que coleta dados de provedores e mostra essa informação para nossos clientes.

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

Criar e personalizar tabelas HTML do WordPress com entradas de formulário

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

Vamos começar com a criação da tabela, temos alguns Gravity Forms já gerados com algumas entradas para este tutorial.

Agora que nossos formulários estão prontos, precisamos ir para WP Table Manager > Todas as tabelas e clicar em + Criar, se tivermos o Gravity Forms instalado, a Tabela do Formulário Gravity Form será exibida, clique nela.

Isto mostrará todos os formulários ativos, basta selecionar o formulário que será usado e, em seguida, selecionar os campos que desejamos exibir, ou simplesmente 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.

Agora, 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 > Ordenar e Filtrar, uma janela pop-up aparecerá onde podemos selecionar o que filtrar e se queremos uma opção de ordenação também, é assim que ficaria após definir a Habilitar Filtro opção de Nenhum para Dentro da Coluna e habilitar a ordenação também.

A classificação e os filtros aparecerão apenas na frente do nosso site, então devemos adicionar a tabela à nossa página/post para vê-la, adicionar nossa tabela é tão fácil quanto procurar pelo bloco de tabela WP Table Manager e adicioná-lo à nossa postagem/página.

Filtros incríveis com uma opção de ordenação, mas ainda podemos estilizar nossa tabela, para fazer isso, podemos usar todas as opções do editor de tabela no WP Table Manager, desde alinhamento até bordas e fontes fortes, temos todas as seguintes opções disponíveis.

Para este tutorial, definirei todas as fontes para serem fortes e usarei a Tema > Cores Alternadas seção que irá 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, vamos ver nosso formulário na página onde o publicamos antes.

E pronto! Nossas entradas serão exibidas e as opções para personalizar a tabela nos permitirão fazer com que ela se ajuste a qualquer tema!

De entradas do Gravity Form para Gráficos

Poderíamos pensar que WP Table Manager permitiria apenas criar tabelas a partir das entradas e 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 dos dados.

E a mágica está feita! Os dados das nossas tabelas agora estão aparecendo em um gráfico, e temos um painel lateral com muitas ferramentas de personalização, como aplicar outro tema ou selecionar quais dados devem ser usados para o 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 selecionar os dados e as cores que serão usados.

E a segunda seção com Configuração permitirá que personalizemos ainda mais nosso gráfico e editemos os rótulos usados para definir cada parte do gráfico, também contém um shortcode que podemos usar para exibir nosso gráfico onde quisermos.

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

O processo de publicação disso seria semelhante à exibição normal da tabela, podemos usar qualquer construtor de página com o bloco de gráfico WP Table Manager (que está disponível em todos os principais construtores de página).

Uma caixa será aberta onde podemos selecionar o gráfico que desejamos exibir, precisamos selecioná-lo e pronto! O gráfico é publicado.

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

Comece a usar Gravity Forms e WP Table Manager

Como você pode ver WP Table Manager + Gravity Forms, é apenas uma combinação perfeita para manter todas as nossas entradas e dados em ordem, temos muitas 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? Vá aqui e obtenha WP Table Manager agora.