form builder

Construtor de formulários

Uma ferramenta dinâmica de construção de formulários que permite aos usuários criar, personalizar e validar formulários perfeitamente nos aplicativos da Web. Construído com o React, Next.js e várias outras tecnologias, o Form Builder fornece uma interface intuitiva para desenvolvedores e usuários.

Índice

• Construtor de formulários
  • Índice
  • Características
  • Demoção ao vivo
  • Demonstração do YouTube
  • Instalação
  • Uso
    • Criando um formulário
  • Componentes
  • Validação
  • API
    • Envio de formulário
  • Contribuindo
  • Licença
  • Agradecimentos

Características

• Criação de formulário dinâmico : crie formulários facilmente com vários tipos de entrada, incluindo texto, caixa de seleção, botões de rádio e muito mais.
• Validação em tempo real : Validar entradas do usuário usando a biblioteca Zod, garantindo a integridade dos dados e o feedback fácil de usar.
• Design responsivo : construído com o Tailwind CSS, garantindo que os formulários fiquem ótimos em todos os dispositivos.
• Componentes personalizáveis : Aproveite os componentes do shadcn para uma experiência consistente e moderna da interface do usuário.
• Renderização do lado do servidor : utilize o próximo.js para desempenho otimizado e SEO.

Demoção ao vivo

Confira a demonstração ao vivo do construtor de formulários aqui.

Demonstração do YouTube

Instalação

Para começar com o Form Builder, siga estas etapas:

1. Clone o repositório:

   git clone https://github.com/hasanharman/form-builder.git

2. Navegue no diretório do projeto:

    cd form-builder

3. Instale as dependências necessárias:

   npm install

Uso

Para iniciar o servidor de desenvolvimento, execute:

npm run dev

Abra seu navegador e navegue para http://localhost:3000 para ver o aplicativo em ação.

Criando um formulário

1. Acesse o construtor : depois que o aplicativo estiver em execução, navegue até a interface do construtor de formulários.
2. Adicionar entradas : use a barra de ferramentas para adicionar diferentes tipos de entradas.
3. Personalize entradas : clique em qualquer campo de entrada para configurar propriedades como etiqueta, espaço reservado, validação necessária, etc.
4. Salvar e visualizar : Depois que seu formulário for construído, salve -o e visualize a saída.

Componentes

Form Builder consiste em vários componentes reutilizáveis:

• FormContainer : O contêiner principal para os elementos do formulário.
• Inputfield : um componente de entrada personalizável.
• Selectfield : componente de seleção suspensa.
• Checkboxfield : um componente de entrada da caixa de seleção.
• Botão : um componente de botão com estilo para envio de formulário.

Validação

O Form Builder utiliza Zod para validação de entrada. Você pode definir esquemas para seus formulários da seguinte forma:

 import { z } from 'zod' ;

const formSchema = z . object ( {
  name : z . string ( ) . min ( 1 , "Name is required" ) ,
  email : z . string ( ) . email ( "Invalid email address" ) ,
  age : z . number ( ) . min ( 18 , "You must be at least 18 years old" ) ,
} ) ;

Esse esquema pode ser aplicado ao seu formulário para aplicar as regras de validação.

API

Envio de formulário

Depois que seu formulário estiver pronto, você pode lidar com envios com uma chamada de API simples. Aqui está um exemplo de como enviar os dados do formulário:

 const handleSubmit = async ( data ) => {
  try {
    const response = await fetch ( '/api/form-submit' , {
      method : 'POST' ,
      body : JSON . stringify ( data ) ,
      headers : {
        'Content-Type' : 'application/json' ,
      } ,
    } ) ;
    const result = await response . json ( ) ;
    console . log ( 'Form submitted successfully:' , result ) ;
  } catch ( error ) {
    console . error ( 'Error submitting form:' , error ) ;
  }
} ; 

Contribuindo

As contribuições são bem -vindas! Se você deseja contribuir para o Form Builder, siga estas etapas:

1. Gifra o repositório : clique no botão "garfo" no canto superior direito da página do repositório.
2. Crie uma filial :

   git checkout -b feature/YourFeatureName

3. Faça alterações : implemente seu recurso ou conserte.
4. Cometer mudanças :

   git commit -m " Add a feature "

5. Push mudanças :

   git push origin feature/YourFeatureName

6. Crie uma solicitação de tração : vá para o repositório original e crie uma solicitação de tração.

Licença

Este projeto está licenciado sob a licença do MIT.

Agradecimentos

• REACT - Uma biblioteca JavaScript para criar interfaces de usuário.
• Next.js - A estrutura do React para produção.
• Tailwind CSS - Uma estrutura CSS de utilitário primeiro para criar designs personalizados.
• ZOD - Declaração e validação do esquema TypeScript -primeiro.