São Paulo - SP, Brazil
contato@oriontecinfo.com.br

Configuração de elementos de formulário

Projetos na área de TI

São disponibilizados mais de 50 elementos de formulário pré-configurados que podem ter seus textos personalizados (texto do label, do placeholder e do help-block) e suas validações customizadas por meio de janelas modais. As validações abrangem inclusive números de CPF, CNPJ, etc. Alguns campos a serem preenchidos possuem máscaras. As validações e máscaras permitem a coleta e inserção de informações de forma padronizada em um banco de dados.

Configurando um elemento de formulário

Botão de configurações dos elementos de formulário

Para configurar um elemento de formulário é necessário clicar no botão “Settings” (Configurações) existente abaixo de cada um dos elementos..

Figura 1 – Botão “Settings”

Na figura 2 são exibidos alguns elementos da categoria “Elementos Básicos“. Observe que abaixo de cada um deles existe o botão “Settings” que permite configurar o elemento.

Figura 2 – Botão “Settings” existente abaixo de elementos da categoria “Elementos Básicos” – 

Configurando o título do formulário

O primeiro elemento a ser descarregado ao se iniciar a construção de um formulário deve sempre ser o seu título. Antes de executar essa operação, acesse sua janela de configurações (Settings) e configure-o (defina o texto do título, estilo visual e selecione o tipo de formulário a ser criado) conforme exemplo a seguir.

Figura 3 – Janela de configuração do elemento “Título do Formulário”

Figura 4 – Elemento “Título do Formulário” configurado

Configurando o elemento de formulário “Nome”

Considerando o elemento de formulário “Nome” (da categoria “Elementos básicos“), o texto do label, do placeholder e do help-block podem ser alterados. Com relação às validações, além das validações obrigatórias (não são aceitos números e caracteres especiais no nome), o preenchimento do campo pode ser configurado para ser obrigatório ou não (no checkbox Required) e o tamanho mínimo e máximo do nome, que por padrão são 3 e 40 respectivamente, podem ser reconfigurados clicando em um dos botões que aparecem abaixo dessas configurações.

Figura 5 – Janela de configuração do elemento “Nome”

Altere o label para “Primeiro Nome“, altere o placeholder para “Digite o seu nome” e altere o block-help para “Digite o seu primeiro nome“. Em tamanho mínimo do nome, clique no botão “2” para alterá-lo para dois caracteres e em tamanho máximo clique no botão “30” para alterá-lo para 30 caracteres. Marque a caixa “Required” para tornar o preenchimento do nome obrigatório.

Figura 6 – Configurando o elemento de formulário “Nome”

  

Figura 7 – Elemento de formulário “Nome” configurado

Repita o mesmo procedimento para o elemento “Sobrenome“; Altere o placeholder para “Digite o seu sobrenome” e o help-block para “Digite apenas o seu sobrenome“. Altere o tamanho mínimo de 5 para 3 caracteres e marque a caixa “Required” para tornar o preenchimento do campo obrigatório.

Testando as validações

Antes de gravar o formulário de contato é recomendado testar se todas as validações estão funcionando corretamente. Clique no botão enviar, sem preencher nenhum dos campos do formulário.

Figura 8 – Validações – campos em branco

Agora teste as demais validações do formulário:

Figura 9 – Validação – tamanho mínimo de Nome

Figura 10 – Validação – tamanho máximo de Sobrenome

Figura 11 – Validação – número ou caracteres especiais no nome

Figura 12 – Validação – email inválido

Figura 13 – Validação – tamanho máximo da mensagem

Criando um elemento de formulário específico

É possível criar um elemento de formulário específico à partir de um elemento genérico, de forma muito simples. Como exemplo, vamos criar o seguinte elemento:

Figura 14 – Criando um elemento de formulário específico

1) Acesse a categoria “Elementos Genéricos” e clique no botão “Settings” do elemento “Lista genérica de opções – Seleção Única“. Será aberta a seguinte janela:

Figura 15 – Elemento “Lista genérica de opções – Seleção Única”

2) Altere o texto do “Label” para: “De modo geral, como você avalia a qualidade do atendimento ao cliente realizado por nossa empresa?” e clique no botão “Alterar“.

3) No campo “primeira opção” altere o texto da primeira opção para “Excelente” e clique no botão “Alterar“;

4) No campo “nova opção” digite o texto da próxima opção: “Ótimo” e em seguida clique no botão “Inserir“.

5) Insira as demais opções, realizando o procedimento similar ao descrito acima.

Figura 16 – Criando o elemento específico – Alterações realizadas

Pronto! O elemento já está criado! Feche a caixa de diálogo. Você já poderá utilizá-lo na construção de um formulário.