Multi-Step Form Main

مشروع Multi Step Form هو واجهة تفاعلية متكاملة لنموذج متعدد المراحل ينتمي إلى إحدى تحديات Frontend Mentor. يهدف إلى محاكاة تجربة اشتراك أو طلب خدمة عبر الإنترنت من خلال خطوات واضحة ومنظمة. يعتمد المشروع بشكل كامل على المتصفح دون أي خادم خلفي، مستخدماً HTML لبناء البنية، وTailwind CSS عبر CDN لتصميم احترافي ومتجاوب، بالإضافة إلى Vanilla JavaScript للتحكم في جميع التفاعلات وحساب الأسعار.

الموقع يقود المستخدم خلال أربع مراحل رئيسية:

معلومات شخصية: الاسم، البريد الإلكتروني، رقم الهاتف

اختيار الخطة: Arcade أو Advanced أو Pro مع إمكانية التبديل بين الدفع الشهري/السنوي

اختيار الإضافات: خدمات إضافية مثل مساحة تخزين أكبر وخدمة عبر الإنترنت وغير ذلك

الملخص والتأكيد: عرض تفاصيل الاشتراك المختار مع السعر الإجمالي وزر التأكيد النهائي

بعد تأكيد الطلب يظهر للمستخدم شاشة شكر أنيقة توضح اكتمال العملية.

الخدمات والوظائف المقدمة داخل الموقع

• نموذج متعدد الخطوات مع انتقالات سلسة بين الصفحات

• التحقق من صحة المدخلات للمعلومات الشخصية (الاسم، البريد، الهاتف)

• اختيار خطة بأسعار مختلفة مع تبديل فوري بين شهري/سنوي

• اختيار إضافات مدفوعة تظهر مباشرة في صفحة الملخص

• حساب تلقائي وفوري للأسعار (شهري أو سنوي)

• واجهة ملخص نهائية تؤكد اختيارات المستخدم قبل إنهاء العملية

• شاشة “تم بنجاح” بعد التأكيد النهائي

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

التقنيات المستخدمة

• HTML: لبناء الهيكل العام للواجهات

• Tailwind CSS: لتنسيق التصميم وفق دليل الألوان المعتمد بالتحدي

• JavaScript: للتحقق من المدخلات، التنقل بين المراحل، وحساب الأسعار الديناميكي

• ملفات الصور والأيقونات المستخدمة ضمن مجلد assets

لا يوجد أي إطار عمل مثل React أو Vue، ولا يوجد Backend أو قاعدة بيانات.

البيانات التي يتم جمعها ولماذا

• الاسم الكامل

• البريد الإلكتروني

• رقم الهاتف

→ بهدف محاكاة تسجيل اشتراك حقيقي

• الخطة المختارة (باسمها وفترة الدفع)

• الإضافات المختارة وأسعارها

• الأسعار الإجمالية (شهرياً أو سنوياً)

→ بهدف توفير تجربة واقعية لحساب الأسعار والعرض قبل الدفع

يتم حفظ البيانات مؤقتاً داخل الذاكرة أثناء الاستخدام فقط، ولا يتم إرسالها أو تخزينها.

Multi Step Form Project is a fully interactive multi-stage form interface based on a Frontend Mentor challenge. It simulates a subscription or service request flow on the web through clear, organized steps. The entire project runs on the browser without any backend server, using HTML for structure, Tailwind CSS via CDN for a professional and responsive UI, and Vanilla JavaScript for handling all interactions and price calculations.

The website guides the user through four main stages:

Personal Information: Name, email address, and phone number

Select Plan: Arcade, Advanced, or Pro with the ability to switch between monthly and yearly billing

Choose Add-ons: Optional services such as extra storage or online support

Summary & Confirmation: Displays all selected options with the total price and a final confirmation button

After confirming the subscription, the user is shown a clean and friendly Thank You screen.

Features and functionalities

• Multi-step form with smooth transitions between steps

• Input validation for personal information (name, email, phone)

• Plan selection with different pricing and dynamic monthly/yearly toggle

• Add-ons selection that updates instantly in the summary

• Automatic calculation of total subscription cost (monthly or yearly)

• A final summary page confirming the user’s choices before submitting

• A final “Successfully Completed” screen after confirmation

Note: All processing happens client-side only. No data is sent to any server and nothing is stored permanently.

Technologies Used

• HTML for structuring the layout

• Tailwind CSS via CDN for styling based on the challenge’s design system

• JavaScript for input validation, step navigation, and dynamic price updates

• Image and icon assets stored in the assets folder

No frameworks such as React or Vue are used, and there is no backend or database included.

What data is collected and why

• Full name

• Email address

• Phone number

→ Used to simulate a real-world subscription form

• Selected plan (name + billing period)

• Optional add-ons and their prices

• Calculated total price (monthly or yearly)

→ To provide a realistic checkout experience before payment

All data is stored temporarily in memory during usage only. It is not submitted or saved anywhere.