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

Boa tarde

Como sugerem criar um formulario assim?

Agradeço a sugestão.

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.

Ó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?

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.

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

Grato

Olá, umlugaraosol.

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

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%;

   

}

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

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!!! 😀✨