form builder

Pembangun formulir

Alat pembangunan bentuk dinamis yang memungkinkan pengguna untuk membuat, menyesuaikan, dan memvalidasi formulir mulus dalam aplikasi web. Dibangun dengan React, Next.js, dan berbagai teknologi lainnya, Form Builder menyediakan antarmuka intuitif untuk pengembang dan pengguna.

Daftar isi

• Pembangun formulir
  • Daftar isi
  • Fitur
  • Demo langsung
  • Demo YouTube
  • Instalasi
  • Penggunaan
    • Membuat formulir
  • Komponen
  • Validasi
  • API
    • Formulir Pengajuan
  • Berkontribusi
  • Lisensi
  • Ucapan Terima Kasih

Fitur

• Dinamic Form Creation : Mudah membuat formulir dengan berbagai jenis input termasuk teks, kotak centang, tombol radio, dan banyak lagi.
• Validasi real-time : Validasi input pengguna menggunakan perpustakaan ZOD, memastikan integritas data dan umpan balik yang ramah pengguna.
• Desain Responsif : Dibangun dengan CSS Tailwind, memastikan bentuk terlihat bagus di semua perangkat.
• Komponen yang dapat disesuaikan : Leverage komponen shadcn untuk pengalaman UI yang konsisten dan modern.
• Rendering Sisi Server : Memanfaatkan Next.js untuk kinerja dan SEO yang dioptimalkan.

Demo langsung

Lihat demo langsung dari pembangun formulir di sini.

Demo YouTube

Instalasi

Untuk memulai dengan Form Builder, ikuti langkah -langkah ini:

1. Klon Repositori:

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

2. Menavigasi ke direktori proyek:

    cd form-builder

3. Instal dependensi yang diperlukan:

   npm install

Penggunaan

Untuk memulai server pengembangan, jalankan:

npm run dev

Buka browser Anda dan navigasikan ke http://localhost:3000 untuk melihat aplikasi beraksi.

Membuat formulir

1. Akses pembangun : Setelah aplikasi berjalan, navigasikan ke antarmuka Form Builder.
2. Tambahkan input : Gunakan bilah alat untuk menambahkan berbagai jenis input.
3. Kustomisasi input : Klik pada bidang input apa pun untuk mengonfigurasi properti seperti label, placeholder, validasi yang diperlukan, dll.
4. Simpan & Pratinjau : Setelah formulir Anda dibangun, simpan dan pratinjau output.

Komponen

Pembangun formulir terdiri dari berbagai komponen yang dapat digunakan kembali:

• FormContainer : Wadah utama untuk elemen formulir.
• Inputfield : Komponen input yang dapat disesuaikan.
• SelectField : Komponen pemilihan dropdown.
• CHECKBOXFIELD : Komponen input kotak centang.
• Tombol : Komponen tombol bergaya untuk pengiriman formulir.

Validasi

Builder formulir menggunakan zod untuk validasi input. Anda dapat mendefinisikan skema untuk formulir Anda sebagai berikut:

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

Skema ini dapat diterapkan pada formulir Anda untuk menegakkan aturan validasi.

API

Formulir Pengajuan

Setelah formulir Anda siap, Anda dapat menangani pengiriman dengan panggilan API sederhana. Berikut adalah contoh cara mengirimkan data formulir:

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

Berkontribusi

Kontribusi dipersilakan! Jika Anda ingin berkontribusi untuk membentuk pembangun, silakan ikuti langkah -langkah ini:

1. Fork The Repository : Klik tombol "Fork" di sudut kanan atas halaman Repositori.
2. Buat cabang :

   git checkout -b feature/YourFeatureName

3. Buat Perubahan : Menerapkan fitur atau perbaikan Anda.
4. Melakukan perubahan :

   git commit -m " Add a feature "

5. Dorong Perubahan :

   git push origin feature/YourFeatureName

6. Buat permintaan tarik : Pergi ke repositori asli dan buat permintaan tarik.

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT.

Ucapan Terima Kasih

• React - perpustakaan JavaScript untuk membangun antarmuka pengguna.
• Next.js - Kerangka kerja reaksi untuk produksi.
• Tailwind CSS - Kerangka kerja CSS utilitas -pertama untuk membuat desain khusus.
• ZOD - Deklarasi dan Validasi Skema First TypeScript.