form builder
1.0.0
Un outil dynamique de création de formulaires qui permet aux utilisateurs de créer, de personnaliser et de valider les formulaires de manière transparente dans les applications Web. Construit avec React, Next.js et diverses autres technologies, Form Builder fournit une interface intuitive pour les développeurs et les utilisateurs.
Découvrez la démo en direct du constructeur de formulaires ici.
Pour commencer avec Form Builder, suivez ces étapes:
Clone le référentiel:
git clone https://github.com/hasanharman/form-builder.gitNaviguer dans le répertoire du projet:
cd form-builderInstallez les dépendances nécessaires:
npm installPour démarrer le serveur de développement, exécutez:
npm run dev Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir l'application en action.
Le constructeur de formulaires se compose de divers composants réutilisables:
Form Builder utilise ZOD pour la validation d'entrée. Vous pouvez définir des schémas pour vos formulaires comme suit:
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" ) ,
} ) ;Ce schéma peut être appliqué à votre formulaire pour appliquer les règles de validation.
Une fois votre formulaire prêt, vous pouvez gérer les soumissions avec un appel API simple. Voici un exemple de la façon de soumettre les données du formulaire:
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 ) ;
}
} ; Les contributions sont les bienvenues! Si vous souhaitez contribuer à Form Builder, veuillez suivre ces étapes:
git checkout -b feature/YourFeatureNamegit commit -m " Add a feature "git push origin feature/YourFeatureNameCe projet est autorisé sous la licence du MIT.
