Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Formulário em etapas Download

? - +
Formulário passo a passo
  1. Insira o formulário dentro de um contâiner com a classe ui_steps.
  2. Envolva todos os campos do formulário em outro contâiner com a classe ui_stepsItens.
  3. Agrupe os campos de cada etapa em contâiners com a classe ui_stepsItem.
  4. Por fim, insira botões (sejam links, buttons ou etc) com a classe ui_stepsSubmiting em cada etapa para avançar mediante validação.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Caso desejado, coloque botões com a classe ui_stepsJumping para avançar sem a submissão/validação da etapa. Para retroceder, use o atributo data-type="prev" neste mesmo botão.
  2. A última página é destinada para exibir o resumo dos dados cadastrados
    • Caso existam campos nessa última etapa, como checkbox para confirmação dos dados ou captcha, use a classe ui_stepsFinalRequired em cada campo para que uma última validação seja realizada.
  3. A paginação não estará habilitada para clique e navegação
  4. Para alterar esse comportamento, use em ui_steps o atributo data-pagination e informe true.
  5. A navegação será habilitada para todas as páginas, mediante validação em cada uma delas. Caso queira alterar esse padrão, use em ui_steps o atributo data-pagination-type e informe o valor desejado: validating_allsteps para habilitar paginação em todas as etapas mediante validação (padrão); passing_allsteps para habilitar paginação em todas as etapas sem validação; validating_onlynext para habilitar paginação apenas para a página seguinte mediante validação; passing_onlynext para habilitar paginação apenas para a página seguinte sem validação.
  6. As etapas serão identificadas na URL pelo parâmetro step
    • Para alterar o nome desse parâmetro, use em ui_steps o atributo data-param e informe o valor desejado.
  7. O mesmo documento pode ter vários ui_steps (todos independentes entre si).
Customizar

Paginação

. Padrão: false
Habilitar paginação . Padrão: Todas as etapas c/ validação.

Caminho

A URL identificará a etapa pelo parâmetro Padrâo: step Saiba mais
Os navegadores modernos são capazes de trocar a url em tempo de execução.
As etapas geram links permanentes, facilitando o acesso ao conteúdo.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Formulário em etapas