Configurando o Widget Lista Configurável

O widget Lista Configurável exige alguns ajustes em suas configurações, mas estes não são tão difíceis de lidar assim. Este guia explicará como você pode usar e configurar o widget Lista Configurável.

Com o widget Lista Configurável, você pode definir e exibir um conjunto de campos ou perguntas em seu formulário. Seus respondentes poderão então adicionar e responder quantos conjuntos de dados você permitir. Este é ideal para que você possa perguntar um conjunto de perguntas múltiplas vezes.

Configurando o Widget

Confira abaixo como configurar o widget Lista Configurável:

1. No Criador de Formulários, clique no menu Adicionar Elemento à esquerda.
2. Em seguida, acesse a guia Widget no painel esquerdo.
3. Pesquise e adicione o widget Lista Configurável ao seu formulário.

4. No painel de Configurações do Widget, à direita, defina seus campos na seção Configuração de Campos.

Observação: Cada campo deve ser separado por uma quebra de linha.

Confira uma lista e a sintaxe dos tipos de campos suportados que você pode utilizar em sua lista dinâmica:

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

Texto Curto

Aceita uma única linha de texto simples.

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

Exemplos:

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

Número

Aceita apenas números.

[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

Aceita textos simples e quebras de linha.

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

Exemplos: 

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

Menu Suspenso

Uma lista de opções em um menu suspenso.

[rótulo do campo]:dropdown:opcao1[,opcao2,...:texto de ajuda]

Para selecionar uma das opções por padrão, substitua o atributo texto de ajuda 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

Campo de escolha única (botão de opção) — selecione uma das opções disponíveis.

[rótulo do campo]:radio:opcao1[,opcao2,...]

Exemplos:

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

Múltipla Escolha

Campo de múltipla escolha — marque as opções disponíveis.

[rótulo do campo]:checkbox:opcao1[,opcao2,...]

Exemplos:

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

Seletor de Datas

Um seletor de datas com calendário pop-up.

[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. Você pode alterar a ordem das letras como desejar.

Exemplos:

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

Seletor de Horários

Um seletor de horários.

[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

Um seletor de datas com três campos.

[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

Um seletor de horários com três campos.

[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

Exibe uma mensagem ou texto.

[rótulo do campo]:static:[texto]

Você pode incluir algumas tags de texto HTML básicas.

Exemplos:

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

Configurando Campos como “Obrigatórios”

Para impedir que seus respondentes pulem campos obrigatórios, você pode configurá-los como “obrigatórios” adicionando um asterisco (*) no início da declaração do campo.

Seus respondentes poderão submeter o formulário apenas se estes campos estiverem preenchidos.

Realizando Outras Configurações

Role para baixo no painel de Configurações do Widget à direita, na guia Geral, para ver mais opções de configuração do widget.

Confira a lista de outras opções abaixo:

• Número Mínimo de Linhas — O número mínimo de conjuntos de campos a ser exibido em seu formulário.
• Número Máximo de Linhas — O número máximo de conjuntos de campos a ser exibido em seu formulário. Insira zero para um número ilimitado.
• Rótulo para Adicionar — Texto a ser exibido no botão de adição de linha.

Alterando a Aparência da Lista Configurável

É frequentemente necessário estilizar seu formulário para deixá-lo exatamente como desejado, talvez para alinhar a imagem do seu produto ou identidade corporativa, entre outros motivos. Com este widget, você pode personalizar a aparência da sua lista usando códigos CSS personalizados.