JetFormBuilder: o que é e como usar este plugin gratuito de formulários para WordPress

JetFormBuilder by Crocoblock

O WordPress é a ferramenta para criação de sites e blogs mais usada no mundo, presente em mais de 42% das aplicações desta modalidade. Junto com o crescimento da sua popularidade, um verdadeiro ecossistema de ferramentas para o gerenciador de conteúdo se estabeleceu. São milhares de temas, plugins e serviços à disposição dos usuários, criados exclusivamente para o WordPress.

Neste artigo, vamos falar sobre o JetFormBuilder, um poderoso plugin para a criação de formulários, que funciona através do editor nativo de conteúdo do WordPress — o Gutenberg. Pela sua integração com a plataforma e facilidade de uso, o JetFormBuilder merece atenção por parte de qualquer usuário do WordPress. E o melhor: o plugin pode ser usado gratuitamente e sem limitações por qualquer pessoa. Para aqueles que desejam recursos extras específicos, há uma versão paga, cujos diferenciais você conhecerá alguns parágrafos adiante.

Quer saber como funciona o plugin JetFormBuilder e como usá-lo em seu site? Fique comigo e descubra! 😉

O que é o JetFormBuilder plugin

JetFormBuilder é um plugin destinado à criação de formulários via editor Gutenberg, que é o editor de conteúdos padrão do WordPress desde o final de 2018. Com ele, é possível criar uma infinidade de tipos de formulário, de acordo com a necessidade do usuário. Formulário de cadastro, contato, inscrições, agendamento e reservas são apenas alguns exemplos do que este poderoso plugin é capaz.

Existem muitos plugins para criação de formulários no WordPress, no entanto, a maior parte deles não se baseia no editor Gutenberg. Este aspecto por si só torna a experiência de criação de formulários bastante intuitiva para qualquer pessoa que já use o editor. A integração é total: os tipos de campos de formulário são disponibilizados na lista de blocos do Gutenberg.

Na ocasião em que fiz este teste, não havia versão em português para o JetFormBuilder, mas acredito que seja uma questão de tempo para isso ocorrer. Vale mencionar que isso não impede que os campos e validações sejam exibidos em português no site. Todos estes itens são editáveis.

Os campos de formulário do JetFormBuilder estão disponíveis na lista de blocos do editor
Os campos de formulário estão disponíveis na lista de blocos do editor

Há ainda recursos especiais que não são encontrados em plugins tradicionais. Por exemplo, é possível preencher um formulário em etapas, recuperar dados do servidor e fazer cálculos durante o preenchimento (muito útil para carrinhos de compras ou sites de reserva online), para citar apenas algumas possibilidades. Veremos mais detalhes sobre estes recursos ao longo do artigo.

A facilidade e a quantidade de recursos disponíveis fazem com que o JetFormBuilder represente um marco para a criação de formulários no WordPress. É um plugin que certamente pode agradar tanto leigos quanto usuários mais experientes.

Recursos do plugin JetFormBuilder gratuito

É possível criar formulários com diversos níveis de complexidade usando o JetFormBuilder. Conheça agora os principais recursos do plugin — todos disponíveis na sua versão gratuita.

Campos de seleção (select, radio e checkbox)

Campos de seleção estão presentes em praticamente qualquer formulário na internet. Obviamente o JetFormBuilder inclui todos os tipos de seleção possíveis entre os seus recursos.

O campo de seleção do tipo select permite que o usuário escolha uma opção dentre as disponíveis em uma lista suspensa de seleção.

Campo de seleção
Campo de seleção (imagem: site JetFormBuilder)

Da mesma forma, os botões do tipo radio também permitem escolher apenas uma opção dentre as disponíveis e definidas pelo criador do formulário.

Botões do tipo “radio” em um formulário
Botões do tipo “radio” em um formulário (imagem: site JetFormBuilder)

Para permitir a escolha de múltiplas opções, os campos do tipo checkbox são os mais indicados.

A opção “checkbox” permite ao usuário marcar múltiplas opções
A opção “checkbox” permite ao usuário marcar múltiplas opções (imagem: site JetFormBuilder)

Vale mencionar que a aparência final do formulário será determinada pelo tema utilizado ou por alguma estilização específica feita pelo usuário.

Campos de texto (text, textarea e WYSIWYG)

Os campos de texto também estão presentes em qualquer formulário, sendo fundamentais em formulários de contato e login, por exemplo.

O campo de texto simples text é usado comumente para informações como nome, sobrenome e e-mail (entre outras). O JetFormBuilder permite definir o tipo de dado que está sendo inserido (ex.: e-mail, URL etc.) para que ocorra a validação correta do campo, no caso de uma informação obrigatória.

Campos de texto simples (text) do JetFormBuilder
Campos de texto simples (text) (imagem: site JetFormBuilder)

O campo de área de texto textarea é usado para textos maiores, como a área de mensagem em um formulário de contato.

Campos do tipo “textarea”
Campos do tipo “textarea” (imagem: site JetFormBuilder)

Há ainda um diferencial no JetFormBuilder que é a possibilidade de usar um área de texto com formatação, na qual pode-se formatar o conteúdo como em um editor de textos, usando negrito, itálico, listas, links, entre outros. Isso é possível através do campo WYSIWYG, cuja sigla é o acrônimo de What You See Is What You Get. Em tradução livre, isso significa algo como “o que você vê é o que você obtém“.

O campo do tipo WYSIWYG permite formatar visualmente o texto no JetFormBuilder
O campo do tipo WYSIWYG permite formatar visualmente o texto (imagem: site JetFormBuilder)

Campos numéricos (number, date, datetime, time e range) e cálculos

O que seriam dos formulários de reserva ou agendamento sem os campos numéricos? Felizmente o JetFormBuilder facilita muito o uso desse tipo de dado, fornecendo não apenas os campos, mas também com a possibilidade de criar formulários dinâmicos, nos quais a escolha dos números pode ser somada ou subtraída, dependendo das necessidades do usuário.

Para a inserção de números, os campos number e range permitem que se escolha um número…

Campo numérico
(imagem: site JetFormBuilder)

… ou um intervalo.

Campo de intervalo de números
(imagem: site JetFormBuilder)

Os campos date, datetime e time permitem escolher uma data específica…

Campo data
(imagem: site JetFormBuilder)

…um horário…

Campo horário
(imagem: site JetFormBuilder)

…ou os dois!

O tipo “datetime” permite escolher uma data e um horário no mesmo campo
O tipo “datetime” permite escolher uma data e um horário no mesmo campo (imagem: site JetFormBuilder)

Caso seja necessário realizar a soma ou subtração dos valores, o campo calculated pode ser usado para isso.

O campo “calculated” realiza cálculos baseados no preenchimento de outros campos numéricos
O campo “calculated” realiza cálculos baseados no preenchimento de outros campos numéricos (imagem: site JetFormBuilder)

Upload de arquivos (media)

Como não poderia deixar de ser, é fácil configurar o envio de arquivos diversos com o JetFormBuilder. Isso é possível através do campo media.

O campo “media” permite o envio de arquivos anexados à mensagem
O campo “media” permite o envio de arquivos anexados à mensagem (imagem: site JetFormBuilder)

Campos ocultos (hidden)

Em diversas situações o envio de informações ocultas pode ser necessário. Por exemplo, o administrador do site pode querer saber em qual página ou post o formulário foi preenchido. Isso — e muito mais — é possível com o campo hidden. A informação a ser enviada junto com o formulário pode ser pré-definida ou dinâmica, carregada a partir do banco de dados do WordPress, como no exemplo que mencionei acima.

O campo hidden não fica visível para o usuário, mas é submetido juntamente com o formulário após seu envio.

O campo “hidden” pode enviar diversas informações que não estão visíveis para quem está preenchendo o formulário criado com o plugin JetFormBuilder
O campo “hidden” pode enviar diversas informações que não estão visíveis para quem está preenchendo o formulário (imagem: site JetFormBuilder)

Repetir campos dinamicamente (repeater)

A repetição de campos pode ser usada em diversas situações, como por exemplo em formulários onde é necessário adicionar pessoas ou itens sem quantidade definida. Para casos como esse, o campo de repetição (repeater) é a solução. Ele pode ser configurado de acordo com a necessidade e pode incluir diversos campos para serem repetidos.

A função “repeater” permite ao usuário adicionar um grupo de campos ao preencher um formulário
A função “repeater” permite ao usuário adicionar um grupo de campos ao preencher um formulário (imagem: site JetFormBuilder)

Títulos e subtítulos (heading)

Formulários mais complexos podem ser organizados e ter seu uso facilitado para o usuário através do uso de títulos e subtítulos (heading). Além de organizar o conteúdo do formulário, eles podem ser usados para separar e hierarquizar as seções do formulário.

É possível inserir títulos e subtítulos para organizar as seções do formulário JetFormBuilder
É possível inserir títulos e subtítulos para organizar as seções do formulário (imagem: site JetFormBuilder)

Organização e envio (formbreak, groupbreak e submit)

Assim como os títulos, outros elementos podem ser usados para melhorar a usabilidade de um formulário. O  divisor de campos (groupbreak) permite criar uma divisão visual no formulário.

Divisão de campos no formulário
(imagem: site JetFormBuilder)

Já o formbreak permite dividir em etapas o preenchimento dos campos. Essa função é especialmente útil quando combinada com o salvamento automático dos dados (Save Form Progress), disponível apenas na versão paga do JetFormBuilder.

Quebra de formulário
(imagem: site JetFormBuilder)

Ao final do formulário, o famoso botão de envio (submit) está lá para enviar os dados. O texto do botão pode ser personalizado à vontade, como ocorre em qualquer outro campo.

Botão de envio
(imagem: site JetFormBuilder)

Vale mencionar que o envio do formulário pode ser feito nos moldes tradicionais, quando a página é carregada novamente, ou utilizando a tecnologia AJAX. Nessa modalidade, os dados são enviados dinamicamente, sem que a página precise ser carregada novamente. Esta é a melhor opção em termos de usabilidade e experiência do usuário.

Diferenciais do JetFormBuilder em relação a outros plugins de formulário

Um dos grandes diferenciais do JetFormBuilder é o fato dele estar completamente integrado ao editor padrão do WordPress. Ao editar um formulário, basta clicar no botão para adicionar um bloco e procurar pela seção do JetFormBuilder.

Esta integração permite inserir qualquer outro bloco disponível no editor, não ficando restrito aos blocos de formulário. Além disso, os layouts e padrões disponíveis no Gutenberg podem ser usados para organizar um formulário em colunas e distribuí-lo entre áreas diversas.

Exemplo de formulário em duas colunas, combinando os recursos do próprio Gutenberg com o JetFormBuilder
Exemplo de formulário em duas colunas, combinando os recursos do próprio Gutenberg com o JetFormBuilder

A criação e edição de formulários é apenas um dos diferenciais do plugin. Dentre os recursos que mais me chamaram a atenção, destaco os seguintes:

Uso de condicionais

É possível criar formulários complexos com o JetFormBuilder usando condicionais lógicas. Na prática, se você quiser que determinados campos sejam exibidos ou removidos de acordo com determinada escolha do usuário, isso pode ser feito com este recurso.

Exemplo de formulário com condicionais no JetFormBuilder
Exemplo de formulário onde determinado campo é exibido de acordo com a resposta do usuário à pergunta anterior (imagem: site JetFormBuilder)

Esse tipo de recurso geralmente não está disponível nos plugins tradicionais de formulário para WordPress e pode ser um grande diferencial para aqueles que necessitam.

Pré-preenchimento de campos

O JetFormBuilder permite trazer dados e informações que estão gravados no banco de dados para preencher determinados campos previamente. Este recurso pode ser muito útil, por exemplo, em formulários de atualização cadastral, nos quais o usuário quer atualizar apenas uma outra informação. Assim, ele consegue visualizar todas as informações que já estão gravadas no banco de dados e preencher apenas o necessário.

Pré-preenchimento dos campos
(imagem: site JetFormBuilder)

Preenchimento em etapas

Formulários mais complexos também podem se beneficiar do preenchimento em etapas. Além de poder dividir os passos de preenchimento em múltiplas etapas, o JetFormBuilder permite exibir para o usuário as etapas e onde ele se encontra em cada passo do preenchimento. O carregamento das etapas se dá pela tecnologia AJAX, ou seja, não é necessário recarregar a página toda enquanto se preenche o formulário.

É possível criar formulários com etapas no JetFormBuilder
Exemplo de formulário em etapas (imagem: site JetFormBuilder)

Validação de dados com máscaras e reCaptcha

A validação do que está sendo preenchido em cada campo — além do modo tradicional, que identifica, por exemplo, se um e-mail está no padrão correto — pode ser feita através de máscaras. Este recurso é especialmente útil quando sabemos exatamente a quantidade de dígitos que determinado campo precisa, como por exemplo CEP, telefone, CPF etc.

O uso de máscaras no preenchimento de dados também facilita muito a vida do usuário, porque ele consegue visualizar previamente o formato do que deve inserir no campo.

Exemplo de máscara de preenchimento para número de telefone
Exemplo de máscara de preenchimento para número de telefone (imagem: site JetFormBuilder)

Outro ponto interessante é que o JetFormBuilder já vem integrado com a ferramenta antispam reCaptcha, bastando apenas que o administrador do site gere as credenciais necessárias no site do reCaptcha.

o reCaptcha já vem integrado ao JetFormBuilder
(imagem: site JetFormBuilder)

Como instalar o plugin JetFormBuilder

A instalação do JetFormBuilder é bastante simples e funciona como em qualquer outro plugin. Ele está disponível no diretório de plugins do WordPress para download.

Mas a maneira mais fácil de realizar a instalação é através do próprio painel do WordPress. Para isso, na área de plugins do painel admin, procure por JetFormBuilder e clique em “instalar agora”.

A instalação do JetFormBuilder pode ser feita por dentro do painel do WordPress
A instalação do JetFormBuilder pode ser feita por dentro do painel do WordPress

Após a instalação, ative o plugin e você verá que a opção jetFormBuilder fica visível no menu do WordPress. Clique no item JetFormBuilder e depois em “Add New” para criar um novo formulário.

Tela do JetFormBuilder logo após a ativação do plugin
Tela do JetFormBuilder logo após a ativação do plugin

A partir daí, tudo o que precisamos fazer é configurar o formulário desejado usando o editor. Para ver um tutorial bem abrangente sobre o assunto, confira o vídeo abaixo (em inglês).

Captura de tela do vídeo tutorial do JetFormBuilder

Versão paga (Pro) do JetFormBuilder plugin

A versão gratuita do JetFormBuilder já é por si só bastante completa. Não há nenhum tipo de limites no uso do plugin ou no envio de formulários. No entanto, alguns recursos especiais são encontrados apenas na versão paga do plugin.

A versão paga (PRO) do JetFormBuilder custa US$ 39 por ano para um site ou US$ 79 por ano para sites ilimitados. O preço da anuidade para sites ilimitados torna o plugin especialmente atraente para designers e desenvolvedores que pretendem usar o JetFormBuilder nos sites de seus clientes.

A ativação da versão PRO é bem simples. Após adquirir a licença no site do JetFormBuilder, a chave de ativação é exibida e basta copiar e colar o código no seu próprio site, na área de Addons do plugin.

A licença é exibida imediatamente após a compra da versão PRO
A licença é exibida imediatamente após a compra da versão PRO

Com a versão PRO liberada, basta escolher os complementos (Addons) desejados, instalá-los e ativá-los pelo painel. Os complementos ativados ficam em destaque na parte superior da página de Addons.

Complementos instalados na versão PRO do JetFormuilder
Complementos instalados na versão PRO do JetFormBuilder

Conheça agora um resumo de todos os recursos da versão paga.

Seleção com autopreenchimento

Este recurso exibe um campo de texto aberto, cujas opções são exibidas à medida que o usuário digita o conteúdo. Por exemplo, se fosse um campo para informar uma cor, ao inserir a letra “v” no campo, as opções de cores com a letra “v” (verde e vermelho) são exibidas logo abaixo, facilitando o uso do formulário e evitando erros de digitação. Muito útil para campos de seleção que contém muitas opções possíveis.

Para usá-lo, depois de ativar o Addon, basta escolher um campo do tipo select e ativar a opção Use Autocomplete e Loading via AJAX. Em seguida, configure as opções que deseja exibir à medida que o usuário digita um texto qualquer no campo.

Tela de configuração do recurso de autopreenchimento no editor do WordPress
Tela de configuração do recurso de autopreenchimento no editor do WordPress

Após configurar tudo e publicar o formulário, o recurso de autopreenchimento fica disponível para os usuários do formulário.

No recurso de seleção com autopreenchimento, as opções correspondentes ao que o usuário está digitando aparecem dinamicamente
Exemplo de seleção com autopreenchimento, onde as opções correspondentes ao que o usuário está digitando aparecem dinamicamente (imagem: site JetFormBuilder)

Autopreenchimento de endereços

Através da integração com o Google Maps, é possível usar o sistema de autopreenchimento para endereços no JetFormBuilder. De forma semelhante ao recurso de autopreenchimento de opções, à medida que o usuário começa a preencher o endereço, o sistema busca opções correspondentes, facilitando bastante o processo e minimizando os erros.

O autopreenchimento de endereços usa o sistema do Google Maps para localizar endereços completos
O autopreenchimento de endereços usa o sistema do Google Maps para localizar endereços completos (imagem: site JetFormBuilder)

Salvamento automático de preenchimento

O preenchimento de um formulário pode ser interrompido por diversos motivos. Desde queda na conexão até a desistência por parte do usuário. Para facilitar o uso do formulário por aqueles que precisarem interromper seu preenchimento, o recurso de salvamento automático é uma mão na roda. Carrinhos de compra ou formulários de cadastro extensos são candidatos a esse tipo de recurso.

À medida que o usuário insere os dados nos campos as informações vão sendo gravadas no banco de dados. Assim, antes mesmo de qualquer envio do formulário, os dados vão sendo gravados no banco de dados e podem ser recuperados posteriormente.

Salvamento automático no JetFormBuilder
(imagem: site JetFormBuilder)

Agendamento de formulários

Em algumas situações, pode ser necessário que um formulário esteja disponível apenas durante um período de tempo específico. Por exemplo, uma votação online, uma enquete ou a inscrição em um concurso que tem data para começar e encerrar. Para estes casos, o agendamento do JetFormBuilder pode ser usado.

Ao tentar preencher o formulário antes ou depois do período de validade, o usuário visualiza um aviso sobre a disponibilidade do formulário.

Agendamento de formulários
(imagem: site JetFormBuilder)

Limitar o número de envios

O preenchimento de um formulário pode ser limitado de acordo com condições pré-definidas pelo administrador do site. Determinado formulário, por exemplo, pode estar disponível apenas para usuários logados no site. Em uma votação online, talvez você queira limitar o número de votos por usuário. Para estas e outras situações, o recurso de limite pode ser usado na versão PRO do JetFormBuilder.

É possível limitar o número de envios de um formulário por usuário
É possível limitar o número de envios de um formulário por usuário (imagem: site JetFormBuilder)

Integração com serviços externos

A versão gratuita do JetFormBuilder permite a integração do plugin com alguns serviços externos, como por exemplo o MailChimp (e-mail marketing e automação) e o PayPal (meio de pagamento). No entanto, a integração com outros serviços só está disponível na versão PRO.

São eles:

E-mail marketing e automação

  • MailerLite
  • ConvertKit
  • MailPoet
  • Moosend

CRM e vendas

  • HubSpot

Meio de pagamento

  • Stripe

Confira a lista completa de recursos das versões gratuita e paga no site do JetFormBuilder.

Conclusão: o JetFormBuilder vale a pena?

Sim, vale muito a pena usar o JetFormBuilder em seu site WordPress, especialmente para aqueles que usam o editor nativo do sistema (Gutenberg). O plugin permite a criação de formulários ricos e complexos, sendo que os principais recursos estão disponíveis já na versão gratuita. Mesmo os sites mais simples, que precisam apenas de um formulário de contato ou cadastro em newsletter, podem se beneficiar da facilidade de uso e recursos do JetFormBuilder.

Quer saber mais detalhes sobre os recursos do JetFormBuilder? Acesse aqui o site do plugin.

Tags: ,

Por:

Designer, desenvolvedor web, músico — e um dos fundadores do Tudo Sobre Hospedagem de Sites. Desde 2010 vem atuando na área de hospedagem de sites, tendo ajudado centenas de pessoas a encontrarem as melhores soluções para seus projetos online. É um entusiasta do WordPress e acredita que a Internet pode transformar a vida das pessoas através do conhecimento. Desde 2013 compartilha sua experiência sobre hospedagem e criação de sites no TSHS. É responsável pela área de infraestrutura e desenvolvimento do site e autor dos artigos e tutoriais técnicos do blog.

Deixe um comentário

Todos os comentários são moderados. Então, seu comentário não será exibido imediatamente após o envio.
Mas fique tranquilo(a), porque ele será respondido em breve. 😉