form builder

フォームビルダー

ユーザーがWebアプリケーション内でシームレスにフォームを作成、カスタマイズ、検証できる動的なフォームビルディングツール。 React、Next.js、およびその他のさまざまなテクノロジーで構築されたForm Builderは、開発者とユーザーの両方に直感的なインターフェイスを提供します。

目次

• フォームビルダー
  • 目次
  • 特徴
  • ライブデモ
  • YouTubeデモ
  • インストール
  • 使用法
    • フォームの作成
  • コンポーネント
  • 検証
  • API
    • フォームの提出
  • 貢献
  • ライセンス
  • 謝辞

特徴

• 動的フォーム作成：テキスト、チェックボックス、ラジオボタンなどを含むさまざまな入力タイプを使用して、簡単にフォームを作成できます。
• リアルタイム検証：ZODライブラリを使用してユーザー入力を検証し、データの整合性とユーザーフレンドリーなフィードバックを確保します。
• レスポンシブデザイン：Tailwind CSSで構築され、すべてのデバイスでフォームが見栄えを良くするようにします。
• カスタマイズ可能なコンポーネント：一貫した最新のUIエクスペリエンスのために、ShadCNコンポーネントを活用します。
• サーバー側のレンダリング：最適化されたパフォーマンスとSEOにnext.jsを使用します。

ライブデモ

フォームビルダーのライブデモをご覧ください。

YouTubeデモ

インストール

フォームビルダーを始めるには、次の手順に従ってください。

1. リポジトリをクローンします：

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

2. プロジェクトディレクトリに移動します。

    cd form-builder

3. 必要な依存関係をインストールします。

   npm install

使用法

開発サーバーを開始するには、実行します。

npm run dev

ブラウザを開き、 http://localhost:3000に移動して、アプリケーションが実行されています。

フォームの作成

1. ビルダーへのアクセス：アプリが実行されたら、フォームビルダーインターフェイスに移動します。
2. 入力の追加：ツールバーを使用して、さまざまな種類の入力を追加します。
3. 入力のカスタマイズ：入力フィールドをクリックして、ラベル、プレースホルダー、必要な検証などのプロパティを構成します。
4. 保存とプレビュー：フォームが構築されたら、保存して出力をプレビューします。

コンポーネント

フォームビルダーは、さまざまな再利用可能なコンポーネントで構成されています。

• formcontainer ：フォーム要素のメインコンテナ。
• 入力フィールド：カスタマイズ可能な入力コンポーネント。
• Selectfield ：ドロップダウン選択コンポーネント。
• チェックボックスフィールド：チェックボックス入力コンポーネント。
• ボタン：フォーム提出用のスタイルのボタンコンポーネント。

検証

フォームビルダーは、入力検証に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

フォームの提出

フォームの準備ができたら、簡単な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 ) ;
  }
} ; 

貢献

貢献は大歓迎です！フォームビルダーに貢献したい場合は、次の手順に従ってください。

1. リポジトリのフォーク：リポジトリページの右上隅にある「フォーク」ボタンをクリックします。
2. ブランチを作成する：

   git checkout -b feature/YourFeatureName

3. 変更を行う：機能を実装するか、修正します。
4. 変更のコミット：

   git commit -m " Add a feature "

5. 変更のプッシュ：

   git push origin feature/YourFeatureName

6. プルリクエストを作成：元のリポジトリに移動して、プルリクエストを作成します。

ライセンス

このプロジェクトは、MITライセンスの下でライセンスされています。

謝辞

• React-ユーザーインターフェイスを構築するためのJavaScriptライブラリ。
• next.js-生産のためのReactフレームワーク。
• Tailwind CSS-カスタムデザインを作成するためのユーティリティファーストCSSフレームワーク。
• ZOD-タイプスクリプトファーストスキーマ宣言と検証。