Realizado

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

Publicado em 14 de Julho de 2015 dias na TI e Programação

Sobre este projeto

Aberto

- - - - -

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/

Categoria TI e Programação
Subcategoria Programação
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Experiência nesse tipo de projeto Sim (Eu já gerenciei esse tipo de projeto)
Integrações de API Outros (Outras APIs)
Funções necessárias Desenvolvedor

Prazo de Entrega: 16 de Julho de 2015

Habilidades necessárias

Outro projetos publicados por A.