نموذج طلبApplication form

ثلاث خطوات مع تحقق ومراجعة قبل الإرسال. تفاعل مع القالب أو استعرض كوده.

اختر طرازكاستكشف الثيمات

تقديم طلب جديد

أكمل بياناتك، ثم راجع طلبك قبل الإرسال.

  1. 1البيانات الشخصية
  2. 2تفاصيل الطلب
  3. 3المراجعة

نموذج تجريبي. تبقى البيانات داخل متصفحك لهذه الجلسة فقط.

أضفه إلى مشروعك

نفّذ الأمر داخل مشروعك لإضافة المكوّن مباشرة من الرابط. يتولى المثبّت إضافة ملفات الحزمة وعددها 19، بما فيها الثيمات والاعتماديات.

Terminal
pnpm dlx shadcn@latest add https://tirazkit.moud4477.chatgpt.site/r/application-form.json

يتطلب التثبيت المباشر رابطًا متاحًا دون تسجيل دخول، ومشروعًا مهيّأً لاستخدام المكتبة. دليل التثبيت الكامل

التثبيت من ملف محلي

إذا كانت نسختك من السجل خاصة، نزّل الحزمة إلى مجلد مشروعك ثم ثبّتها من الملف.

تنزيل حزمة المكوّن
Terminal
pnpm dlx shadcn@latest add ./application-form.json

استخدم بياناتك

استبدل البيانات التوضيحية ببيانات مشروعك. أنشئ واجهة API الخاصة بك، وتحقق من المدخلات على الخادم. ترجع onSubmit رقم الطلب عند النجاح وترمي خطأ عند الفشل.

example.tsx
"use client";
import { Theme } from "@/components/tirazkit/theme";
import { ApplicationForm } from "@/components/tirazkit/application-form";

export default function Example() {
  return (
    <Theme theme="dga" locale="ar">
      <ApplicationForm
        onSubmit={async (data) => {
          const response = await fetch("/api/requests", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
          });
          if (!response.ok) throw new Error("Request failed");
          const result = await response.json();
          return result.reference;
        }}
      />
    </Theme>
  );
}