Configurando o Widget Lista Configurável

O widget Lista Configurável permite definir e exibir um conjunto de campos ou perguntas que os usuários podem duplicar conforme necessário. Isso é ideal para situações em que o respondente precisa preencher o mesmo conjunto de informações várias vezes, como ao inserir dados de várias pessoas, itens ou tarefas.

Watch on youtube

How to set up a configurable list widget with Jotform

Adicionando e Configurando o Widget

Adicionar o widget Lista Configurável ao seu formulário e configurá-lo é bem simples. Veja como:

1. No Criador de Formulários, clique em Adicionar Elemento no lado esquerdo da página.

2. Agora, no menu à esquerda, na aba Widgets, clique no widget Lista Configurável para adicioná-lo ao seu formulário.

3. Em seguida, no menu Configurações do Widget que será aberto no lado direito da página, configure os seguintes itens:

• Configuração de Campos — Use essa área para definir os campos que aparecerão em cada linha da lista, utilizando a sintaxe correta. Consulte nosso guia sobre Tipos de Campo Compatíveis e Sintaxe do Widget Lista Configurável para mais detalhes.

• Número Padrão de Linhas — É o número de linhas que serão adicionadas por padrão.
• Número Máximo de Linhas — Use 0 para permitir linhas ilimitadas. Esse número deve ser igual ou maior que o número mínimo de linhas.
• Rótulo para Adicionar — Personalize opcionalmente o texto exibido no botão Adicionar.
• Linha Única — Ative essa opção para exibir todos os campos em uma única linha por registro.

4. Agora, clique em Atualizar e pronto, está tudo configurado.

Quer ver como funciona? Confira este formulário demonstrativo para vê-lo em ação.

Tipos de Campo Compatíveis e Sintaxe do Widget Lista Configurável

O widget Lista Configurável oferece suporte a diversos tipos de entrada, permitindo coletar diferentes tipos de informação de forma dinâmica no seu formulário. Veja a lista completa de tipos de campo compatíveis e a sintaxe que você pode usar para adicioná-los:

• Texto
• Número
• Área de Texto
• Menu Suspenso
• Escolha Única
• Múltipla Escolha
• Seletor de Datas
• Seletor de Horários
• Data
• Hora
• Texto Estático

Vamos analisar mais de perto a sintaxe de cada tipo de campo compatível abaixo:

Texto

Use este tipo para respostas básicas de uma única linha, como nomes ou endereços de e-mail.

Sintaxe:

rótulo do campo: text[:texto de ajuda]

Exemplos:

• Nome: text
• E-mail: text: Digite aqui…

Número

Use este tipo para coletar entradas numéricas, como idade, quantidade ou avaliações.

Sintaxe:

[rótulo do campo]: number[:texto de ajuda:incremento, min, max]

Exemplos: 

• Quantidade: number
• Idade: number: Insira sua idade
• Avaliação: number:: 1, 1, 10

Área de Texto

Use este tipo para respostas mais longas, como observações ou comentários.

Sintaxe:

rótulo do campo: textarea[:texto de ajuda]

Exemplos: 

• Observações: textarea
• Comentários: textarea: Escreva aqui…

Menu Suspenso

Use este tipo para permitir a seleção a partir de uma lista de opções predefinidas.

Sintaxe:

rótulo do campo: dropdown: opcao1, opcao2, opcao3[:opção padrão]

Para selecionar uma das opções por padrão, substitua o texto por uma das opções em sua lista.

Exemplos:

• Pizza: dropdown: Queijo, Pepperoni, Carne
• Tamanho: dropdown: Pequeno, Médio, Grande: Favor selecionar
• Suco: dropdown: Maçã, Laranja, Abacaxi: Laranja

Escolha Única

Use este tipo para opções de escolha única exibidas como botões de opção.

Sintaxe:

rótulo do campo: radio: opcao1, opcao2, opcao3

Exemplos:

• Pedido: radio: Retirada, Entrega
• Vegetal: radio: Cenoura, Rabanete, Brócolis

Múltipla Escolha

Use este tipo para opções de múltipla escolha. Os usuários podem selecionar mais de uma opção.

Sintaxe:

rótulo do campo: checkbox: opcao1, opcao2, opcao3

Exemplos:

• Adicionais: checkbox: Refrigerante, Salada, Batatas fritas
• Molho: checkbox: Doce, Agridoce, Apimentado

Seletor de Datas

Use este tipo para exibir um seletor de data em formato de calendário.

Sintaxe:

rótulo do campo: dateInput[:formato da data]

Caso o formato da data seja indefinido ou inválido, o formato padrão será y/m/d (ano/mês/dia). Você pode alterar a ordem das letras como desejar.

Exemplos:

• Data: dateInput
• Data de Nascimento: dateInput: d/m/y

Seletor de Horários

Use este tipo para permitir que os usuários selecionem um horário.

Sintaxe:

rótulo do campo: timeInput: formato do horário[,now] 

• Os valores permitidos de formato do horário são 12 (com seletor AM/PM) e 24. Caso inserido um número inválido, seu padrão é 12.
• Para configurar o horário atual como padrão, adicione o atributo “,now” à função.

Exemplos:

• Horário de Chegada: timeInput: 24
• Horário Atual: timeInput: 12, now

Data

Use este tipo para exibir a seleção de data em formato de lista suspensa (mês/dia/ano).

Sintaxe:

rótulo do campo: date[:formato da data:intervalo:today]

• Caso o formato da data seja indefinido ou inválido, o formato padrão será y/m/d. Você pode alterar a ordem das letras como desejar.
• O intervalo de anos é formatado como início-fim (ex.: 2015-2025). Caso indefinido ou inválido, seu padrão será 10 anos antes do ano seguinte.
• Para definir a data atual como padrão, adicione “:today” à função.

Exemplos:

• Data de Nascimento: date
• Data de Chegada: date: d/m/y: 2025-2030
• Data: date: d/m/y::today

Horário

Use este tipo para exibir listas suspensas de hora, minuto e AM/PM.

Sintaxe:

rótulo do campo: time[:formato do horário,now]

• Os valores permitidos de formato do horário são 12 (com seletor AM/PM) e 24. Caso inserido um número inválido, seu padrão é 12.
• Para configurar o horário atual como padrão, adicione o atributo “,now” à função.

Exemplos:

• Horário de Chegada: time: 24
• Horário Atual: time: 12,now

Texto Estático

Use este tipo para adicionar observações, dicas ou textos instrutivos somente para leitura entre os campos.

Sintaxe:

rótulo do campo: static: [texto]

• Oferece suporte a HTML básico para formatação.

Exemplos:

• Observação: static: Estamos abertos 24h.
• Dica: static: Clique no botão <strong>Adicionar Linha</strong> para adicionar novas linhas.

Tornando Campos da Lista Configurável Obrigatórios

Para tornar um campo obrigatório, adicione um asterisco (*) no início da sua declaração. Isso garante que o usuário precise preencher o campo antes de enviar o formulário.

Exemplos:

• *Nome: text
• *Data de Nascimento: date

Alterando a Aparência da Lista Configurável

Você pode personalizar a aparência da sua lista para que ela reflita sua marca, estilo de produto ou identidade corporativa. O widget Lista Configurável oferece suporte a CSS personalizado, dando controle total sobre o visual e o layout.

1. No Criador de Formulários, selecione o widget e, no lado direito, clique no ícone de varinha.
2. Em seguida, na aba CSS Personalizado, cole seu código CSS.
3. Agora, clique em Atualizar e pronto, está tudo configurado.