form builder
1.0.0
Ein dynamisches Tool für Formbuilding, mit dem Benutzer Formulare in Webanwendungen nahtlos erstellen, anpassen und validieren können. Form Builder erstellt mit React, Next.js und verschiedenen anderen Technologien und bietet eine intuitive Schnittstelle für Entwickler und Benutzer gleichermaßen.
Schauen Sie sich hier die Live -Demo des Formbuilders an.
Befolgen Sie die folgenden Schritte, um mit Form Builder zu beginnen:
Klonen Sie das Repository:
git clone https://github.com/hasanharman/form-builder.gitNavigieren Sie in das Projektverzeichnis:
cd form-builderInstallieren Sie die erforderlichen Abhängigkeiten:
npm installUm den Entwicklungsserver zu starten, führen Sie aus:
npm run dev Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000 um die Anwendung in Aktion anzuzeigen.
Formbuilder besteht aus verschiedenen wiederverwendbaren Komponenten:
Formular Builder verwendet ZOD für die Eingabevalidierung. Sie können Schemas für Ihre Formulare wie folgt definieren:
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" ) ,
} ) ;Dieses Schema kann auf Ihr Formular angewendet werden, um die Validierungsregeln durchzusetzen.
Sobald Ihr Formular fertig ist, können Sie Einsendungen mit einem einfachen API -Anruf behandeln. Hier ist ein Beispiel dafür, wie Sie die Formulardaten einreichen:
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 ) ;
}
} ; Beiträge sind willkommen! Wenn Sie zum Formular Builder beitragen möchten, befolgen Sie bitte die folgenden Schritte:
git checkout -b feature/YourFeatureNamegit commit -m " Add a feature "git push origin feature/YourFeatureNameDieses Projekt ist unter der MIT -Lizenz lizenziert.
