Descarga form builder - Descargar el código fuente form builder

form builder

Código Fuente de IA

1.0.0

Descargar

Formulario

Una herramienta dinámica de construcción de formularios que permite a los usuarios crear, personalizar y validar los formularios sin problemas dentro de las aplicaciones web. Construido con React, Next.js y varias otras tecnologías, Form Builder proporciona una interfaz intuitiva para desarrolladores y usuarios por igual.

Tabla de contenido

Formulario
- Tabla de contenido
- Características
- Demostración en vivo
- Demostración de youtube
- Instalación
- Uso
  - Creando un formulario
- Componentes
- Validación
- API
  - Envío de formulario
- Que contribuye
- Licencia
- Expresiones de gratitud

Características

Creación de formulario dinámico : cree fácilmente formularios con varios tipos de entrada que incluyen texto, casilla de verificación, botones de radio y más.
Validación en tiempo real : valida las entradas de los usuarios utilizando la biblioteca Zod, asegurando la integridad de los datos y los comentarios fáciles de usar.
Diseño receptivo : construido con CSS de viento de cola, asegurando que las formas se vean muy bien en todos los dispositivos.
Componentes personalizables : Aproveche los componentes SHADCN para una experiencia de IU consistente y moderna.
Renderización del lado del servidor : utilice Next.js para un rendimiento optimizado y SEO.

Demostración en vivo

Echa un vistazo a la demostración en vivo del formulario del formulario aquí.

Demostración de youtube

Instalación

Para comenzar con Form Builder, siga estos pasos:

Clon el repositorio:

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

Navegue al directorio del proyecto:
```
 cd form-builder
```
Instale las dependencias necesarias:
```
npm install
```

Uso

Para iniciar el servidor de desarrollo, ejecute:

npm run dev

Abra su navegador y navegue a http://localhost:3000 para ver la aplicación en acción.

Creando un formulario

Acceda al constructor : una vez que la aplicación se ejecute, navegue a la interfaz de formulario de formulario.
Agregue entradas : use la barra de herramientas para agregar diferentes tipos de entradas.
Personalizar entradas : haga clic en cualquier campo de entrada para configurar propiedades como etiqueta, marcador de posición, validación requerida, etc.
Guardar y obtener una vista previa : una vez que se cree su formulario, guárdelo y obtenga una vista previa de la salida.

Componentes

Form Builder consta de varios componentes reutilizables:

FormContainer : el contenedor principal para los elementos de formulario.
InputField : un componente de entrada personalizable.
SelectField : componente de selección desplegable.
CheckBoxfield : un componente de entrada de casilla de verificación.
Botón : un componente de botón de estilo para el envío del formulario.

Validación

Form Builder utiliza ZOD para la validación de entrada. Puede definir esquemas para sus formularios de la siguiente manera:

 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" ) ,
} ) ;

Este esquema se puede aplicar a su formulario para hacer cumplir las reglas de validación.

API

Envío de formulario

Una vez que su formulario esté listo, puede manejar los envíos con una simple llamada API. Aquí hay un ejemplo de cómo enviar los datos del formulario:

 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 ) ;
  }
} ;

Que contribuye

¡Las contribuciones son bienvenidas! Si desea contribuir al formulario de formulario, siga estos pasos:

Bifurca el repositorio : haga clic en el botón "Bifurca" en la esquina superior derecha de la página del repositorio.
Crear una rama :
```
git checkout -b feature/YourFeatureName
```
Haga cambios : implementa su función o corrección.
Cambios de confirmación :
```
git commit -m " Add a feature "
```
Cambios de empuje :
```
git push origin feature/YourFeatureName
```
Cree una solicitud de extracción : vaya al repositorio original y cree una solicitud de extracción.