Formulário de contratação de serviço

- - - - -

Um formulário de auto-contratação de serviços que ficará disponível em um ponto de atendimento de uma cooperativa de proteção veícular (um tablet).

A "auto-contratação" é um form de etapas html/css/jquery com dados completados via consultas json.

Toda aplicação se resume:
- 1 arquivo (html) com o formulário por etapas (50 campos distribuídos em 8 etapas)
- 1 arquivo (html) com o formulário de upload de arquivos (3 campos)
- 1 arquivo (php) para processmento e envio dos 2 formulários.

Totalmente independente do site, necessitando apenas da formatação de CSS padrão (que já vem nos forms) do Bootstrap.

- - - - -

primeira etapa (identificando uf, veículo e valor a pagar)

* api da consulta de endereços: http://avisobrasil.com.br/correio-control/api-de-consulta-de-cep/
* API de consulta da tabela fipe: http://fipeapi.appspot.com/
* Json da tabela de preços para fazer a comparação e calculo: http://azevedo.media/clients/protecao-veicular/tabela.json

    - CATEGORIA (Lista: Taxi, Veículos Leves, Pick-up, Van Utilitário)
    - MARCA: (Lista importada da Tabela Fipe)
    - MODELO: (Lista importada da Tabela Fipe) > depende do selecionado acima
    - valor tabela fipe (tabela fip) *texto (apenas leitura, retornado da api)
    - código fipe (tabela fip) *texto (apenas leitura, retornado da api)

* se o carro for mais caro que o limite da tabela (de preços da cooperativa), desabilita campo de avançar e alerta: "proposta indisponível para seu veículo"
* se o carro for dentro da faixa de preços, exibe os campos abaixo:

    - cep do cliente (numero)

* ao informar o cep calcula (se carro é da categoria x, valor até y = preenche os 3 campos abaixo)
* se o cep for do es (espírito santo) soma mais r$13 em cada parcela
* se o cep for inválido alertar "cep inválido"

    - valor da adesao (json preços) * texto (apenas leitura, retornado do json)
    - anual (json preços) * texto (apenas leitura, retornado do json)
    - anual parcelada (json preços) * texto (apenas leitura, retornado do json)
    -
    - estado  (api cep) * numero (apenas leitura)
    - cidade  (api cep) * texto (apenas leitura)
    - bairro (texto)
    - endereço (texto)
    - número (numero)
    - complemento (texto)

- - - - -

segunda etapa (dados do veículo)

    - combustível (checkbox: gnv, etanol, gasolina, flex, diesel)
    - portas (radio: 5)
    -
    - veículo alienado? (radio: sim, não)    
    - veículo zero km? (radio: sim, não)
    - veículo proveniente de leilão? (radio: sim, não)
    -
    - data da emissão da nota fiscal: (data)
    - data de saída da nota fiscal (data)
    - codigo renavan (texto)
    - nome completo / razão social do dut: (texto)
    - cpf/cnpj (numero)
    - rg/ie (numero)
    - placa (texto)
    - chassi (texto)

- - - - -

terceira etapa (dados pessoais)

    - nome completo / razão social (texto)
    - nacionalidade (texto)
    - naturalidade (texto)
    - uf nascimento (lista)
    - data de nascimento / abertura da empresa (data)
    - cnh (texto)
    - cpf/cnpj (numero)
    - rg (texto)
    - data de emissão do rg (data)
    - orgão expeditor do rg (texto)
- - - - -

quinta etapa (dados para contato)

    - telefone fixo com ddd (numero)
    - telefone celular com ddd (numero)
    - telefone opcional com ddd (numero)
    - email pessoal (email)
    - email profissional (email)

    - deseja assinar newsletter? (sim, não)
    - deseja receber seu manual do associado por email? (sim, não)
    - deseja receber nosso form de indicação (ganhe r$50 por indicado associado) (sim, não)

- - - - -

sexta etapa (leitura de regulamento e assinatura)

    exibe um campo do tipo select já preenchido com todo regulamento (ele precisa rolar para marcar que concorda)

    - assinar (fundamental o funcionamento disso para o cliente)

* jquery que gera campo tipo "assinatura" com validação (html5/canvas): http://www.jqueryscript.net/demo/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas/examples/

- - - - -

oitava etapa (identificação do consultor que assistiu o cliente)

    alerta: por favor, entregue o tablet ao consultor.

    - nome do consultor (texto) (buscar de cookie a partir da segunda vez que usar, pois será sempre o mesmo consultor)    
    - email do consultor (email) (buscar de cookie a partir da segunda vez que usar, pois será sempre o mesmo consultor)    
    - celular do consultor (numero) (buscar de cookie a partir da segunda vez que usar, pois será sempre o mesmo consultor)
    - comprovantes: (enviar comprovantes do cliente na próxima, prefiro ser lembrado disso por email) (radio) (sim/não)

- - - - -

sétima etapa (submit: php de envio 1)

1 - enviar para email para cooperativa (azevedomedia@gmail.Com) e consultor (informado no form):

    assunto: adesao - #placaveículo - (dados)

    os campos vão listados por agrupamento:
        dados corretor
        dados tabela fipe
        dados veículo
        dados endereço
        dados pessoais
        dados contato
        * a assinatura vai como anexo

2 - enviar para mailchimp (se marcou que deseja assinar newsletter):

    nome, email

3 - enviar manual para o cliente (se tiver marcado que deseja receber)

    olá. Seja bem vindo a Cooperativa.
    Você solicitou nosso manual:  http://azevedo.media/clients/protecao-veicular/manual.rtf

4 - Enviar link do form de indicação para o cliente (se tiver marcado que deseja receber)

    Você solicitou nosso form de indicação:  http://azevedo.media/clients/protecao-veicular/form

5 - Validar o que o consultor decidiu sobre os comprovantes

    se consultor vai enviar depois:

    disparar este terceiro email ao consultor:

        assunto: adesao - #placaveículo - (comprovantes)
        - você precisa enviar os comprovantes do cliente na adesão para a cooperativa (responda este e-mail com os anexos

    exibir no html a mensagem de confirmação: a proposta foi enviada  (retornar a tela inicial?)

- - - - -

oitava etapa - opcional - (form/submit: php de envio 2)

    se consultor for enviar em seguida, exibir este novo formulário:

         envie no form abaixo uma foto dos comprovantes do cliente:

            o segundo formulário (3 campos de upload ou foto)

                (apenas foto)
                - documento do veículo
                - documento do cliente
                - comprovante de endereço

                submit (enviar) > valida os 3 campos obrigatórios

5 - enviar para email para cooperativa:

    assunto: adesao - #placaveículo - (comprovantes)

    exibir no html a mensagem de confirmação: comprovantes enviados (retornar a tela inicial?)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

dicas:

para a criação dos campos dos forms bem rápido:
http://bootsnipp.com/forms?version=3 (para ver o código basta copiar de "rendered")

Para as etapas no mesmo form:
http://demos.thesoftwareguy.in/form-wizard-jquery-bootstrap/

Para a barra de progresso do form:
http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Consulta jSON com jQuery:
‪http://api.jquery.com/jQuery.getJSON/‬

Exemplos de autocompletar:
http://cep.correiocontrol.com.br/example/
http://jsfiddle.net/T45rQ/8/
http://jsfiddle.net/handtrix/32Bck/
http://blog.zeion.net/2011/12/15/ejemplo-practico-de-autocompletar-con-jquery/

Form php com send html estilizado:
https://css-tricks.com/sending-nice-html-email-with-php/