Динамический инструмент построения форм, который позволяет пользователям создавать, настраивать и проверять формы беспровно в веб-приложениях. Построенный из React, Next.js и различных других технологий, Builder Form обеспечивает интуитивно понятный интерфейс как для разработчиков, так и для пользователей.
Проверьте живую демонстрацию застройщика форм здесь.
Чтобы начать с создания форм, следуйте этим шагам:
Клонировать репозиторий:
git clone https://github.com/hasanharman/form-builder.gitПерейдите в каталог проектов:
cd form-builderУстановите необходимые зависимости:
npm installЧтобы запустить сервер разработки, запустите:
npm run dev Откройте свой браузер и перейдите на http://localhost:3000 чтобы увидеть приложение в действии.
Строитель формы состоит из различных многоразовых компонентов:
Form Builder использует ZOD для проверки ввода. Вы можете определить схемы для ваших форм следующим образом:
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" ) ,
} ) ;Эта схема может быть применена к вашей форме для обеспечения соблюдения правил проверки.
Как только ваша форма будет готова, вы можете обрабатывать материалы с помощью простого вызова API. Вот пример того, как отправить данные формы:
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 ) ;
}
} ; Взносы приветствуются! Если вы хотите внести свой вклад в создание формы, пожалуйста, выполните следующие действия:
git checkout -b feature/YourFeatureNamegit commit -m " Add a feature "git push origin feature/YourFeatureNameЭтот проект лицензирован по лицензии MIT.