Como criar um planejador semanal - Formulario com escolha de datas e horarios

  • Profile Image
    umlugaraosol
    Asked on January 18, 2021 at 01:13 PM

    Boa tarde

    Como sugerem criar um formulario assim?

    Agradeço a sugestão.

    1610993585_6005cfb134fd3_Capturar.PNG

  • Profile Image
    Eduardo_H
    Answered on January 18, 2021 at 01:37 PM

    Olá @umlugaraosol

    Eu recomendaria duas possibilidades:

    1 - Criar um formulário baseado nos campos Seletor de Datas e Horários (Guia Visao-geral-dos-campos-de-formulario)

    Aqui você encontra um modelo já construído para utilizar:

    https://www.jotform.com/form-templates/weekly-time-card

    2 - Criar um formulário baseado no campo Tabela de Entrada.

    Aqui você encontra um modelo baseado neste elemento:

    https://www.jotform.com/form-templates/weekly-timesheet-and-progress-report-form


    Espero ter ajudado. Seguimos à disposição.

  • Profile Image
    umlugaraosol
    Answered on January 21, 2021 at 08:37 AM

    Ótimo, usando a tabela de entrada, precisava que apenas a ultima coluna fosse maior para o campo observaçoes e as propriedades da tabela definem o tamanho em px de todas. Possivel definir o tamamho da última de forma responsiva?

  • Profile Image
    Eduardo_H
    Answered on January 21, 2021 at 10:46 AM

    Olá, umlugaraosol

    É possível faze-lo utilizando Código CSS Customizado.

    Confira as instruções:

    Guia:
    Como-inserir-codigos-css-personalizados

    Neste caso poderá utilizar o seguinte código:

    @media(min-width:767px)
    {
    .form-matrix-column_0 {
     width: 22%
    }
    .form-matrix-column_1 {
     width: 22%
    }
    .form-matrix-column_2 {
     width: 56%
    }
    }

    Seguimos à disposição.

  • Profile Image
    umlugaraosol
    Answered on January 21, 2021 at 11:04 AM

    Funcionou no desktop. No mobile como poderia tornar o campo observaçao maior. Ficaram todos iguais.

    Grato

  • Profile Image
    Gustavo_H
    Answered on January 21, 2021 at 11:46 AM

    Olá, umlugaraosol.


    Posso confirmar que as colunas estão do mesmo tamanho no mobile.

    1611246128_6009aa300c9bb_


    Fiz alguns testes aqui e encontrei uma solução que poderia te agradar. Você poderia mudar o tema do seu formulário do antigo tema padrão para o novo? E depois disso, adicionar o código CSS abaixo que já estava presente no seu formulário com uma ligeira alteração no código fornecido pelo meu colega. Veja o GIF completo abaixo de como aplicar as mudanças.

    @media {
    .form-matrix-column_0 {
     width: 22%;
    }
    .form-matrix-column_1 {
     width: 22%;
    }
    .form-matrix-column_2 {
     width: 56%;
    }
    }

    .form-label.form-label-auto {
         
       display: block;
       float: none;
       text-align: left;
       width: 100%;
       
    }


    1611247519_6009af9f611dc_


    Esse é o resultado final após as alterações indicadas.

    1611247027_6009adb38c189_


    E esse é o clone do seu formulário caso você queira testar antes de aplicar as indicações.


    Nos deixe saber se podemos te ajudar em algo mais.


    Tudo de bom!!! 😀✨