Como Montar o Widget de Lista Configurável

December 7, 2021

O Widget de Lista Configurável exige um pouco mais para ajustar definições, mas não é nem um pouco difícil.

Algumas coisas que precisamos considerar para entender como que ele funciona e como ajustar o widget:

  • O Widget adiciona dinamicamente um conjunto de campos no seu formulário, compondo uma lista.
  • Você pode adicionar quantas linhas quiser
  • Você pode definir o tipo de dados ou informações que podem ser coletados para cada linha adicionada dinamicamente na sua lista;
  • Para restringir o tipo de informação que pode ser coletada, você precisa definir os tipos de campo

Os seguintes tipos de campo são permitidos na configuração de cada linha na lista dinmica:

  • Texto Curto
  • Número
  • Texto Longo
  • Seletor de Datas
  • Horário
  • Lista Suspensa
  • Escolha Múltipla
  • Escolha Única
  • Estático – Exibe mensagem ou texto

Como Configurar o Widget

A Caixa de Diálogo de Configuração abre quando você adiciona o widget ao seu formulário. Você sempre pode acessá-la ao clicar na varinha de assistente no editor de formulários:

Nós preparamos uma tabela para guiar você na configuração da sua lista dinmica por meio desse widget:

Vamos começar pela Configuração de Campos de Lista:

Tipo de CampoO que ele fazConfiguração de Campo _ 
Como adicionar esse campo como parte da lista com as opções disponíveis
Exemplo
Texto CurtoTexto simples sem formataçãoLegenda do Campo: text : Texto de AjudaNome:text
NúmeroAceita apenas númerosLegenda do campo:numberIdade: number
Área de TextoTextos maiores, com formatação e parágrafosLegenda do campo:textarea: Texto de AjudaComentários : textarea: texto de ajuda
Múltipla EscolhaMarcar opções em boxesLegenda do campo : checkbox : opção um, opção dois, opção trêsPagamento: checkbox : à vista, duas vezes, três vezes
Escolha ÚnicaSeleciona uma das opções disponíveisLegenda do campo : radio: um, dois, trêsAceita Termos? : radio: SIm, Não
Lista SuspensaOpções em uma lista suspensaLegenda do campo: dropdown: opção um, opção dois, opção três: opção padrão

Para ter uma das opções selecionadas como padrão (default), incua por uma das opções da sua lista no final. Exemplo:

Legenda do campo: dropdown: um, dois, três: Dois

No caso, a Opção 2 será selecionada como padrão quando o formulário for aberto.
Título: dropdown: Sr., Sra., Srta., Dr., Prof. : Sr.
Seletor de DatasUm seletor de data com um calendário pop-upLegenda do campo: date : m / d / y: 2000-2022
Se o formato de data é indefinido ou inválido, o padrão será y / m / d. Você pode mudar a posição das letras como quiser. 

Escopo de anos: formato como início-fim, ex. 2005-2015. Se indefinido ou inválido, o  padrão estabelece um arco de dez anos para trás e dez anos para o futuro.
Data de Chegada: date: m/d/y:2014-2020
HorárioUm seletor de horárioLegenda do campo: time:12
Formato de tempo- valores permitidos são 12 (com seletor AM/PM) e 24. 
Se não for definido ou for inválido, o padrão é 12.


Para definir o padrão de tempo, adicione “now” na configuração. Ex:

Horário de chegada: time : 12, now
Horário de chegada: time : 12, now
Texto EstáticoExibe algum texto estáticoLegenda do campo: static: O texto que você quiser exibirMensagem importante: static : Clique no botão ‘+’ para adicionar uma nova fileira.

A Tabela acima parece um pouco assustadora, mas é bem fácil. Veja aqui uma configuração como exemplo:

É assim que vai ficar no seu formulário:

Depois de completar cada campo de configuração, aperte a tecla return (enter) e adicione um campo de configuração em uma linha diferente para que o widget possa tratar como definição de um novo campo.

Outras Configurações

Para limitar o número de linhas que vão ser adicionadas no seu formulário, insira o número na caixa Número máximo de linhas.

Para carregar automaticamente a primeira linha (ou mais que uma) insira o número na caixa Número mínimo de linhas.

Para mudar os textos dos botões (adicionar linha ou remover linha), você pode definir nas caixas seguintes:

Defina um campo ou input como “obrigatório”

Em muitos formulários, alguns campos não podem ser ignorados, como campos de nome e email. Para impedir que o usuário do formulário pule esses campos não opcionais, você precisa estabelecer esse campo como “obrigatório”.

Para completar essa definição, você só precisa adicionar um asterisco (*) antes do campo de configuração exibido abaixo:

Os usuários do seu formulário só vão conseguir enviar o formulário se esses campos estiverem preenchidos:

Mude a aparência da sua lista

Com frequência é necessário estilizar o seu formulário para ficar exatamente como você quer: talvez para alinhar com a imagem do seu produto, ou agregar identidade, entre outros motivos.

Com esse widget, você pode personalizar a aparência da sua lista ao adicionar CSS personalizado.

Veja aqui um formulário de exemplo: http://form.myjotform.com/form/41112368425549

Fique à vontade para clonar/copiar o formulário; confira de perto e modifique o formulário como quiser.

A parte do CSS personalizado pode parecer técnica demais, mas não se preocupe, nós vamos adorar ajudar você – apenas entre em contato conosco.

Se você quer tornar a sua Lista Configurável mais interativa, confira esse guia:

How to Make the Configurable List Widget Mobile Responsive

Vamos adorar ouvir sua opinião ou saber da sua experiência, para que possamos continuar aperfeiçoando as ferramentas que tornam seu formulário sensacional!

Este guia foi útil?

Enviar Comentário:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comentar:

Podo CommentSeja o primeiro a comentar.