Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Feature: Form designer

Aberta
  • Algo errado?
#28 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
25/100
Tipo de issue
Funcionalidade
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
javascript
Domínio
frontend

Direção de pesquisa

Nenhum arquivo, teste ou ponto de entrada é especificado. Comece transformando a área de formulário proposta, o comportamento do dragula, os rótulos e as descrições contenteditable e a exportação de formArea.innerHTML em um escopo concreto; o trabalho concluído deve incluir um design acordado e um formato de persistência definido.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

enhancement

Using this issue to jot down ideas about the form designer. We could try to reuse dobt's form designer ... but if we didn't....

We could use dragula and HTML5's contenteditable, and simply serialize the DOM.

So there'd be a form area, and a way to add fields to it. Adding an <input type="text"> would actually add a <div class="draggable"><label><input><p class="description"></div>. The <div> would have dragula enabled on it. Dragging it around simply rearranges it in the DOM. The <label> and description <p> would have contenteditable="true", letting the user directly edit their contents (which also just updates the DOM).

"Saving" the form would be a matter of exporting formArea.innerHTML. Sure, we could serialize it into JSON if we want to, but there may be an advantage to simply storing the HTML. For instance, you could very easily customize it to infinity. We'd just need a way to associate the fields with the data, but that shouldn't be too hard; just require that each field has a <label> and use an underscorified_version_of_the_label as the field name.

Sounds like fun!

Linguagem predominante
Python
Estrelas
22
Forks
5
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de CodeForPhilly/stately

Todas as issues de CodeForPhilly/stately

Issues semelhantes

Mais issues de Python

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.