Guia do usuário JotForm / Criar formulários /

Como Montar o Widget de Lista Configurável

Como Montar o Widget de Lista Configurável

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:

  • 1. O Widget adiciona dinamicamente um conjunto de campos no seu formulário, compondo uma lista.
  • 2. Você pode adicionar quantas linhas quiser
  • 3. Você pode definir o tipo de dados ou informações que podem ser coletados para cada linha adicionada dinamicamente na sua lista;
  • 4. Para restringir o tipo de informação que pode ser coletada, você precisa definir os tipos de campo
    • 5. Os seguintes tipos de campo são permitidos na configuração de cada linha na lista dinâmica:
-Texto Curto
-Texto Longo
-Área de Texto
-Data
-Horário
-Lista Suspensa
-Escolha Múltipla
-Escolha Única
-Estática - 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 dinâmica por meio desse widget:

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

Tipo de Campo

O que ele faz

Configuração de Campo  _ 

 Como adicionar esse campo como parte da lista com as opções disponíveis

Exemplo

Texto

Aceita texto corrido

Legenda do Campos: Texto : Texto de Ajuda

Nome:text

Número

Aceita apenas números

Legenda do campo:númerdo

Idade: number

Área de Texto

Aceita mais texto em parágrafos ou relatos

 

Legenda do campo:Área de Texto: Texto de Ajuda

Comentários : textarea: texto de ajuda

Múltipla Escolha

Disponibiliza opções em boxes

Caixa de seleção : seleção : um, dois, três


Escolha Única

Seleciona uma das opções disponíveis


Botões de opção : opções : um, dois, três

Aceita Termos? : Opção: SIm, Não

Lista Suspensa

Uma lista de Opções em uma Lista Suspensa


Lista suspensa : lista suspensa : um, dois, três: Por favor, selecione

Para ter uma das opções selecionadas como padrão (default), substitua por uma das opções da sua lista. Por exemplo:

Lista suspensa : lista suspensa : um, dois, três: Dois

No caso, a Opção 2 será selecionada como padrão quando o formulário for aberto.

Título: lista suspensa: Sr., Sra., Srta., Dr., Prof. : Selecione

Calendário

Um seletor de data com um calendário pop-up


Calendário : data : m / d / a: 2000-2022

Se o formato de data é indefinido ou inválido, o padrão é m/ d / a. 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 atrás até hoje e dez anos para o futuro.


Data de Chegada: data: dia/mês/ano:2014-2020

Tempo

Um seletor de tempo

Time: 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 "agora" na configuração. Ex:

Horário de chegada: horário : 12, agora

Horário de chegada: horário : 12, agora

Estática

Exibe algum texto

Field Label: static: O texto que você quiser exibir

Mensagem importante: estática : 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:

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!

Enviar comentário