Formulários e Campos

De Melhor Loja Web

Edição feita às 16h23min de 10 de fevereiro de 2011 por Melhorlojaweb (disc | contribs)
Wiki ferramentas.png Formulários e Campos

Tabela de conteúdo

Como inserir novos campos e formulários no cadastro?

A grande vantagem de trabalhar com esta loja são as variedades de edições que você mesmo poderá fazer. Nesta área você poderá definir quais serão os campos que seu cliente terá que cadastrar.

Para criar um novo campo, clique no botão "Criar novo campo" e em seguida você terá que escolher que tipo de campo ele será:

Wiki campos.jpg

CheckBoxes

É um campo onde é possível escolher várias opções.

Veja um exemplo:

Wiki campo checkbox.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki editar checkboxes.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Lista de Valores: Nesta área você vai digitar todas as opções que você deseja nos checkboxes.

Depois de inserir todos os campos que você deseja, clique no link "Ordenar Valores em Ordem Alfabética" para que eles fiquem na ordem.

Eles precisam estar separados por espaços um abaixo do outro, como mostramos abaixo:

Wiki editar checkboxes1.jpg


  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Campo Data

Campo Data é a criação de um campo em formato de data: mês, dia e ano.

Veja um exemplo:

Wiki campo data.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo data.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Valor Padrão: Você pode pré definir uma data para que apareça logo quando o cliente for escolhê-la;
  • Faixa de Datas: Além de uma data pré definida você também pode limitar as faixas de datas para que o cliente não use datas muito antigas, ou datas muito futuras.
  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Campo Texto - Multi Linha

Campo Texto Multi Linha é a criação de um campo em formato texto, mas que permite textos mais extensos.

Veja um exemplo:

Wiki campo multilinha.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo multilinha.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Valor Padrão: Você pode pré definir uma mensagem para que apareça logo quando o cliente visualizá-la;
  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Número de Linhas: Aqui você vai definir qual a quantidade de linhas que o campo terá;
  • Tamanho do Campo: Depois é preciso definir também qual tamanho em pixels deste campo;
  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Números apenas

Campo número é a criação de um campo com apenas números.

Veja um exemplo:

Wiki campo numero.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo numero.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Faixa de Números: Aqui você pode definir a faixa de números que o cliente pode digitar, por exemplo: se você deseja que ele escolha entre 1 a 5 você vai colocar as faixas para não permitir outras numerações;
  • Valor Padrão: Você pode pré definir um número para que apareça logo quando o cliente visualizá-lo;
  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Tamanho do Campo: É preciso definir qual tamanho em pixels deste campo;
  • Máximo de Letras do Caractere: Além do tamanho, você pode definir quantos caracteres (números) o cliente pode digitar;
  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Campo Senha

O Campo Senha é a criação de um campo com a finalidade de gravar senhas, estes dados não aparecem para dar mais segurança ao usuário.

Lembramos que a senha pode ter números, letras e caracteres especiais (*, @, e outros).

Veja um exemplo:

Wiki campo senha.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo senha.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Valor Padrão: Você pode pré definir esta informação para que apareça logo quando o cliente for digitá-la;
  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Tamanho do Campo: É preciso definir qual tamanho em pixels deste campo;
  • Máximo de Letras do Caractere: Além do tamanho, você pode definir quantos caracteres (números) o cliente pode digitar;
  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Botões Radio

O Botão Radio é um campo onde é possível escolher apenas 1 opção.

Veja um exemplo:

Wiki campo radio.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo radio.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Lista de Valores: Nesta área você vai digitar todas as opções que você deseja nos botões radio.

Depois de inserir todos os campos que você deseja, clique no link "Ordenar Valores em Ordem Alfabética" para que eles fiquem na ordem.

Eles precisam estar separados por espaços um abaixo do outro, como mostramos abaixo:

Wiki cria campo radio1.jpg

  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Campo Texto

Através deste campo é possível criar um texto como nome, endereço, e outros.

Veja um exemplo:

Wiki campo texto.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo texto.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Valor Padrão: Você pode pré definir este campo para que apareça logo quando o cliente for digitá-lo;
  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Tamanho do Campo: É preciso definir qual tamanho em pixels deste campo;
  • Máximo de Letras do Caractere: Além do tamanho, você pode definir quantos caracteres (letras) o cliente pode digitar;
  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Listas

O campo Listas permite que você crie diversas opções para o cliente selecionar.

Veja um exemplo:

Wiki campo lista.jpg

Se você deseja um campo como este, clique nesta opção para preencher todos os dados:

Wiki cria campo lista.jpg

Aba Geral:

  • Nome do Campo: Este é o título do seu campo, ou nome do campo que você dará;
  • Texto Instrucional: Aqui você pode definir um texto de instrução ao cliente, por exemplo: "Selecione agora como nos conheceu";
  • Lista de Valores: Nesta área você vai digitar todas as opções que você deseja desta seleção.

Depois de inserir todos os campos que você deseja, clique no link "Ordenar Valores em Ordem Alfabética" para que eles fiquem na ordem.

Eles precisam estar separados por espaços um abaixo do outro, como mostramos abaixo:

Wiki cria campo lista1.jpg


  • Obrigatório: Se você deseja que este campo seja obrigatório para o cliente, basta selecioná-lo.

Depois de preencher os dados iniciais, agora você deve clicar na aba "Avançado":


Aba Avançado:

  • Noma da Classe CSS:
  • Estilo Inline CSS:

Depois de tudo definido agora basta clicar no botão "Salvar", ou se não deseja mais criar o campo, clique no botão "Cancelar".

Ferramentas pessoais