Como criar páginas de cadastro no front end e mostrar os dados em uma tabela com filtro em tempo real. – Apenas plugins gratuitos do WordPress.

Eu amo WordPress e todas as facilidades que o mesmo me trás no dia a dia. Porém, recentemente fiz um trabalho que me deixou de cabelo em pé… No WordPress, as coisas são sempre mais intuitivas e fluidas, porém, nesse caso, não foi tão intuitivo e nem tão fluido assim. Saca só o objetivo…

Objetivo: Criar páginas de cadastros de pessoas e mostrar esses dados em uma tabela em tempo real, com filtro avançado e formulário de pesquisa. Ah, tudo isso com plugins gratuitos.

Acredito que o maior obstáculo foi trabalhar com plugins gratuitos. Não por serem gratuitos, mas por disponibilizarem apenas tabela e gerenciamento de tabela na versão PRO. Como a cliente precisava que a entrega do projeto fosse rápida, com plugins gratuitos e sem mexer no código original do wordpress, meu trabalho foi extenso e feito através de muito pensar, programar e agonizar. haha Mas eu não posso reclamar, eu simplesmente amo esses desafios.

Segue a explicação de como resolvi isso tudo:

Desafio:

  • Trabalhar apenas com versões gratuitas de plugins do wordpress
  • Não mexer no código original do wordpress, sem criar funções para temas e plugins no core do wordpress.
  • Encontrar plugins certos
  • Criar o projeto rápido

Solução:

Para resolver essa questão, após muita pesquisa, encontrei plugins gratuitos no wordpress que pudessem me ajudar.

PRIMEIRO PASSO – Instalar plugins

  1. Contact Form 7 Por Takayuki Miyoshi: Com esse plugin é possível criar inúmeros formulários de contato para o site, porém, apenas com ele, os dados do contato não serão salvos na base de dados do WordPress. O plugin 2 nos ajudará com isso.
  2. Contact Form CFDB7 Por Arshid: Com esse plugin é possível cadastrar no banco de dados do wordpress tudo o que for enviado através do Contact Form 7.
  3. Contactic Por Contactic: Esse plugin nos ajuda a gerenciar os dados do contact form 7, incluindo exportar dados, utilizar shortcodes, rastrear dados e visualizar estatísticas. Esse plugin será importante na hora de criar um shortcode para a datatable, a nossa tabela em questão.

SEGUNDO PASSO – Configurar plugins

  1. Contact Form 7 Por Takayuki Miyoshi 

No contact form 7 eu criei um formulário para adicionar alunos como exemplo.

Após instalar o Contact Form 7, você verá no menu lateral esquerdo, o ícone de Contato. Ao passar o mouse no menu, você verá 3 opções: Formulários de Contato, Adicionar novo e Integração.

Clique em “Adicionar novo” para adicionar um novo formulário de contato.

A tela a seguir irá aparecer para você. Adicione um nome para o Formulário. Adicione também os campos abaixo, cada campo representa uma coluna da tabela que vamos construir posteriormente. Clique no botão “Salvar” na lateral direita.

Pronto, seu formulário de contato está finalizado.

  1. Contact Form CFDB7 Por Arshid

Esse plugin não precisa ser configurado, pois já configuramos o contact form 7. Apenas instale e ative no painel de controles de plugins.

Observe que se você acessar no menu lateral esquerdo Plugins. Você encontrará seu plugin instalado dessa maneira. Ao clicar em “Contact Forms”, você verá que o seu formulário “Alunos”, já estará aparecendo com a contagem do lado direito. Cada vez que esse contato for preenchido, o contador vai aumentar.

Quando o contador do Alunos estiver maior do que 0, você pode clicar no número e ver todos os dados de contato ali.

ATENÇÃO: Antes de entrarmos para o passo 3, você precisará criar uma página onde esse formulário será exibido.

No menu lateral esquerdo clique em páginas e logo em seguia em “Adicionar nova”.

Se você estiver utilizando o editor novo do wordpress, você verá a seguinte tela:

Digite o nome da página e clique em publicar, ao lado direito da tela.

Clique no botão “Editar com Elementor” para realizar as edições necessárias.

Em contato você deverá copiar o shortcode do formulário para colar na página.

Dentro da página do elementor, procure por shortcode e arraste para o lado direito

Ao colar o shortcode do contact form 7 do aluno, já irá aparecer na tela. É essa página que a pessoa irá utilizar para cadastrar o aluno.

Faça alguns cadastros.

Para configurar o formulário para realizar cadastros ,você deverá seguir o outro tutorial – Como configurar o contact form 7 para que o usuário possa cadastrar os dados

Se você já souber como configurar o SMTP para que o formulário do contact form 7 seja enviado ou se você acabou de seguir o tutorial, você poderá seguir para o passo 3.

  1. Contactic Por Contactic

Esse plugin te permite acessar os dados e estatísticas do formulário.

Ao clicar em “Contactic” no menu lateral esquerdo, aparecerá uma tela assim:

Descendo com o mouse, você verá local para exportar em CSV, ODS, Excel, HTML e JSON.

No menu lateral esquerdo, clique em “Contactic” e logo em seguida em “Shortcodes”.

A tela a seguir aparecerá pra você:

É importante entender que só irá aparecer “Aluno”, o formulário que você criou na lista abaixo, quando você cadastrar pelo menos um aluno naquele passo 2 que ensinei anteriormente.

Clique em “Alunos” e selecione o shortcode de [cfdb-datatable].

Porque escolher datatable e não table? Porque no datatable nós temos as opções de filtros. Você pode inserir inúmeras opções de filtros, mas como esse tutorial deve ser simples, mostrarei apenas alguns.

Na segunda coluna “Columns” você irá configurar o que vai aparecer na sua tabela, veja como configurei o que vai aparecer na minha tabela abaixo:

Agora você verá que ao clicar no shortcode da tabela, ele aparecerá para você:

Copie esse shortcode e crie uma página para mostrar os dados:

Publique a página, clique em “Editar com o Elementor” escolha o widget de shortcode como no passo 2 e cole.

Veja que a seguir que a tabela já apareceu:

Agora quando você visualizar a tela, você terá um formulário de pesquisa com filtros.

Quando pesquisei por “mar” sem apertar enter, ele já me mostrou só a linha que tem a palavra que começa com mar.