تخطَّ إلى المحتوى
FormFlow

حوّل نموذجاً طويلاً إلى خطوات دون تغيير نقطة النهاية

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

تُرجم هذا المقال آليًا. اقرأ النص الأصلي بالإنجليزية

A dark FormFlow plate showing a multi-step Form folding into one flat Form and one POST.

النموذج الطويل صفحة واحدة من الأسئلة، والصفحة الواحدة هي حيث يغادر الناس. تقسمها الخطوات إلى شاشات. وما لا تفعله هو تغيير نقطة النهاية: لا يزال النموذج يُرسل مرة واحدة، بكل حقل، إلى العنوان الذي يذكره ترميزك أصلاً.

الخطوة قرار عرض

الخطوة مجموعة مُسمّاة من حقول النموذج تُعرض للمُرسِل شاشةً واحدة في كل مرة. لا يتغيّر شيء في الاستقبال أو الحصة أو تقييم الإزعاج أو الاحتفاظ حين يُقسَّم النموذج إلى عدة خطوات: يتلقى الحاكم الجسم نفسه الذي كان يتلقاه، ويبقى الإرسال الواحد إرسالاً محتسباً واحداً.

هذا هو العقد كله، ولهذا فإن إضافة خطوة تغيير في العرض لا في تكاملك. العنوان في صفحتك، وأسماء الحقول في ترميزك، وعدد الإرسالات في خطتك، كلها تبقى في مكانها. الخطوات متاحة في الخطط المدفوعة.

الفاصل يخص الحقل الذي يليه

في المُنشئ، فاصل الخطوة علامة على الحقل الذي يفتح الخطوة التالية — وهو الشيء نفسه كقاعدة تُرسم فوق ذلك الحقل. إنه ينتقل مع الحقل، فسحب الحقل ينقل الفاصل معه. فاصل الخطوة ليس فاصلاً تسقطه بين سؤالين؛ إنه خاصية حقل واحد، وقراءة قائمة الحقول من الأعلى هي قراءة ترتيب الخطوات.

وينتج عن ذلك أمران. إعادة ترتيب الحقول تعيد ترتيب الخطوات، فقد تُدمج خطوة أعجبتك في التي فوقها. والخطوة الفارغة تُغلق: لا يحتفظ FormFlow بشاشة لا شيء فيها.

طلب POST واحد يحمل كل حقل

يرسم النموذج خطوة واحدة في كل مرة، لكن المتصفح لا يزال يرسل طلباً واحداً. كل ما أجاب عنه المُرسِل يصل معاً، بمفاتيح أسماء الحقول في مخطط النموذج. مرجع نقطة النهاية في /docs/api: طلب POST واحد، وجسم واحد، وجواب واحد.

curl -X POST https://formflow.digital/api/v1/f/ff_live_example \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "Lena Ortiz",
    "email": "lena@example.com",
    "company": "Ortiz Studio",
    "budget": "5000",
    "brief": "A one-page site, live in June."
  }'

خمسة حقول وثلاث خطوات وطلب واحد. لا يوجد إرسال جزئي تُوفّق بين شاشاته، ولا طلب ثانٍ تُعاد محاولته، ولا إشعار لكل خطوة. إذا فشل الطلب فقد فشلت المحاولة؛ وإذا نجح، يحتفظ FormFlow بإرسال واحد ويحكم عليه مرة واحدة.

حين يُرسم النموذج مسطّحاً

يُرسم النموذج بكل حقوله في صفحة واحدة تحت زر إرسال واحد في ثلاث حالات: ألا يعلن أي خطوات، أو ألا تسمح خطة الفريق بها بعد، أو ألا يشغّل متصفح المُرسِل جافاسكربت. العرض المسطّح ليس بديلاً أُضيف لاحقاً؛ إنه الشيء الذي تُعدّ الخطوات واجهةً حوله.

الزائر الذي أوقف السكربتات يحصل على الحقول نفسها والأسماء نفسها وزر الإرسال نفسه — مسطّحة. النموذج ليس معطوباً، إنه ببساطة صفحة واحدة. وفقدان الخطوات بسبب تغيير الخطة ليس ترحيلاً أيضاً: يحتفظ النموذج بخطواته في مخططه، ويُرسم مسطّحاً ما دام السماح غائباً، ويعود إلى رسمها إذا عاد.

أين تكون الخطوات فجّة

والخطوات لا تخفي المخطط أيضاً. كل ما تعلنه داخل العقد سواء أظهرته شاشة أم لم تُظهره، ورأي المتصفح في أي الحقول ظاهرة ليس أبداً ما يقرر ما يُقبل. وإذا كان يجب أن يكون الحقل غائباً لا مجرد غير مرئي، فلا تعلنه.

ويسجّل إدخال سجل التغييرات للإصدار v1.0.0 الجملة التي يستند إليها كل هذا: وجّه أي نموذج HTML إلى FormFlow، أو استخدم صفحة مستضافة أو تضميناً، فيستقبل كل إرسال ويصفّيه ويخزّنه ويعيد توجيهه. تعيد الخطوات ترتيب وسط تلك الجملة. ولا تطيلها.