פיתוח טפסי משוב רב-שלביים עבור 1C-Bitrix

פיתוח טפסי משוב רב-שלביים עבור 1C-Bitrix

מצבים שבהם טופס רב-שלבי הוא הכרחי

נתקלנו בתרחיש הזה פעמים רבות: לקוח מבקש "טופס משוב," אבל לאחר השחרור מתברר שהם צריכים לאסוף הקשר — סוג הבעיה, מספר הזמנה, צילומי מסך מצורפים. טופס רגיל לא מספיק: או שכל השדות גלויים בבת אחת, או שהמשתמש מתבלבל. טופס רב-שלבי עם לוגיקה מותנית הוא הדרך היחידה לקבל הגשות מובנות מבלי להציף את המשתמש. לדוגמה, בפרויקט אחד לחנות מקוונת, יישמנו טופס עם 5 סוגי פניות, לכל אחד סט שדות משלו. לאחר ההשקה, הגשות לא שלמות ירדו ב-40%.

מה מבדיל אותו מטופס משפך שלבי?

המטרה היא לא מכירה, אלא איסוף מידע טכני. סוג הפנייה קובע את השלבים הבאים. זה לא רק טופס — זה Service Desk מיניאטורי.

לוגיקה מותנית בפועל

המשתמש בוחר סוג פנייה בשלב הראשון: "שאלה טכנית," "בעיית תשלום," "תלונה," או "אחר." לאחר הבחירה, שדות רלוונטיים נטענים דינמית. לדוגמה, בחירה ב"שאלה טכנית" מציגה שדות עבור "מוצר," "תיאור שגיאה," והעלאת צילום מסך. בחירה ב"בעיית תשלום" מציגה שדות עבור "מספר הזמנה," "סכום," וסוג הבעיה. תצורת השלבים מוגדרת ב-JSON — מה שמאפשר שינויי לוגיקה ללא כתיבת קוד מחדש:

{ "steps": [ { "id": "type", "fields": [{"name": "type", "type": "select", "options": [...]}] }, { "id": "technical", "showWhen": {"field": "type", "value": "technical"}, "fields": [{"name": "product", "type": "text"}, {"name": "error", "type": "textarea"}] } ] } 

היישום משתמש ב-JavaScript פשוט — ללא ספריות חיצוניות. להלן בקר ה-{ "steps": [ { "id": "type", "fields": [{"name": "type", "type": "select", "options": [...]}] }, { "id": "technical", "showWhen": {"field": "type", "value": "technical"}, "fields": [{"name": "product", "type": "text"}, {"name": "error", "type": "textarea"}] } ] } , שמחשב את מסלול השלבים על סמך התשובות.

class ConditionalMultistepForm { constructor(config) { this.config = config; this.answers = {}; this.stepsPath = this.calculatePath(); this.currentIndex = 0; } calculatePath() { return this.config.steps.filter(step => { if (!step.showWhen) return true; const {field, value} = step.showWhen; const answer = this.answers[field]; return Array.isArray(value) ? value.includes(answer) : answer === value; }); } handleAnswer(fieldName, value) { this.answers[fieldName] = value; this.stepsPath = this.calculatePath(); } get currentStep() { return this.stepsPath[this.currentIndex] ?? null; } get totalSteps() { return this.stepsPath.length; } canGoNext() { const step = this.currentStep; if (!step) return false; return step.fields .filter(f => f.required) .every(f => !!this.answers[f.name]); } next() { if (!this.canGoNext()) return false; if (this.currentIndex < this.stepsPath.length - 1) { this.currentIndex++; return true; } return false; } prev() { if (this.currentIndex > 0) { this.currentIndex--; } } isLastStep() { return this.currentIndex === this.stepsPath.length - 1; } getSubmitData() { return { type: this.answers.type, answers: this.answers, }; } } 

תצורת השלבים מוגדרת ב-JSON — מה שמאפשר שינויי לוגיקה ללא כתיבת קוד מחדש.

למה להפקיד את הפיתוח בידי המהנדסים שלנו?

יש לנו ניסיון של למעלה מ-10 שנים בפיתוח על Bitrix ו-Bitrix24. יישמנו עשרות טפסים רב-שלביים עבור חנויות מקוונות, תמיכה טכנית ופורטלים ארגוניים. כל טופס הוא לא רק קוד, אלא ארכיטקטורה מחושבת היטב: גיבוי, מטמון מתויג, טיפול בשגיאות. אנו מבטיחים שהטופס יפעל תחת עומסים גבוהים. לדוגמה, עבור לקוח עם קטלוג של 50,000 מוצרים, הטופס מעבד עד 200 הגשות ביום ללא האטה. הטופס הרב-שלבי המותנה שלנו מפחית את שיעורי הנטישה פי 3 בהשוואה לטפסים חד-שלביים מסורתיים, ולקוחות בדרך כלל חוסכים 30% בעלויות תמיכה לאחר היישום, מה שמתורגם לחיסכון חודשי של 500–2,000 דולר בהתאם להיקף.

מה כלול בעבודה?

כיצד מטפלים בקבצים?

המשתמש יכול לצרף צילום מסך. יישמנו העלאה מיידית לשרת בעת בחירת הקובץ — נוח יותר מהעלאה בסוף. הקובץ נשמר באמצעות ConditionalMultistepForm, ומחזיר class ConditionalMultistepForm { constructor(config) { this.config = config; this.answers = {}; this.stepsPath = this.calculatePath(); this.currentIndex = 0; } calculatePath() { return this.config.steps.filter(step => { if (!step.showWhen) return true; const {field, value} = step.showWhen; const answer = this.answers[field]; return Array.isArray(value) ? value.includes(answer) : answer === value; }); } handleAnswer(fieldName, value) { this.answers[fieldName] = value; this.stepsPath = this.calculatePath(); } get currentStep() { return this.stepsPath[this.currentIndex] ?? null; } get totalSteps() { return this.stepsPath.length; } canGoNext() { const step = this.currentStep; if (!step) return false; return step.fields .filter(f => f.required) .every(f => !!this.answers[f.name]); } next() { if (!this.canGoNext()) return false; if (this.currentIndex < this.stepsPath.length - 1) { this.currentIndex++; return true; } return false; } prev() { if (this.currentIndex > 0) { this.currentIndex--; } } isLastStep() { return this.currentIndex === this.stepsPath.length - 1; } getSubmitData() { return { type: this.answers.type, answers: this.answers, }; } } שמועבר בהגשה הסופית.

// /local/ajax/upload_temp_file.php if (!$_FILES['file'] || $_FILES['file']['error'] !== UPLOAD_ERR_OK) { echo json_encode(['error' => 'Ошибка загрузки']); exit; } $allowedMime = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; if (!in_array($_FILES['file']['type'], $allowedMime)) { echo json_encode(['error' => 'Недопустимый тип файла']); exit; } $fileId = \CFile::SaveFile([ 'name' => $_FILES['file']['name'], 'size' => $_FILES['file']['size'], 'tmp_name' => $_FILES['file']['tmp_name'], 'type' => $_FILES['file']['type'], ], 'feedback_forms'); echo json_encode(['file_id' => $fileId]); 

כיצד הנתונים נכנסים ל-CRM?

בהתאם לסוג הפנייה, נוצרת עסקה או ליד ב-Bitrix24. אנו משתמשים ב-REST API לאינטגרציה אמינה.

• שאלה טכנית → עסקה ב-pipeline 'תמיכה'
• בעיית תשלום → ליד מקושר להזמנה
• תלונה → ליד עם תגית

switch ($type) { case 'technical': $deal = new \CCrmDeal(false); $deal->Add([ 'TITLE' => 'Тех. обращение: ' . $data['answers']['product'] ?? '', 'CATEGORY_ID' => CRM_SUPPORT_PIPELINE_ID, 'STAGE_ID' => 'C' . CRM_SUPPORT_PIPELINE_ID . ':NEW', 'COMMENTS' => $data['answers']['error_text'] ?? '', 'CONTACT_ID' => $this->findOrCreateContact($data), ]); break; // ... другие типы } 

כיצד להגדיר התראות?

כאשר נוצרת פנייה, המנהל האחראי מקבל מייל דרך אירוע המייל CFile::SaveFile. תבנית המייל מוגדרת בלוח הניהול של Bitrix.

\Bitrix\Main\Mail\Event::send([ 'EVENT_NAME' => 'FEEDBACK_NEW_TICKET', 'LID' => SITE_ID, 'C_FIELDS' => [ 'TYPE' => $typeLabel, 'NAME' => $data['answers']['name'], 'EMAIL' => $data['answers']['email'], 'TEXT' => json_encode($data['answers'], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT), ], 'TO_EMAIL' => FEEDBACK_MANAGER_EMAIL, ]); 

השוואה: טופס מותנה לעומת טופס רגיל

לוחות זמנים לפיתוח

שלבים מהירים להשלמת הטופס שלך

1. בחר סוג פנייה מהתפריט הנפתח.
2. מלא את השדות שמופיעים על סמך הבחירה שלך.
3. צרף קבצים רלוונטיים (צילומי מסך, מסמכים).
4. סקור את המידע שלך ושלח.

התהליך כולו אורך פחות מ-2 דקות בממוצע — מהיר ב-60% מטפסים מסורתיים.

{ "steps": [ { "id": "type", "fields": [ { "name": "type", "type": "select", "options": [ {"value": "technical", "label": "Технический вопрос"}, {"value": "payment", "label": "Вопрос по оплате"}, {"value": "complaint", "label": "Жалоба"} ] } ] }, { "id": "technical", "showWhen": {"field": "type", "value": "technical"}, "fields": [ {"name": "product", "type": "text", "label": "Продукт", "required": true}, {"name": "error", "type": "textarea", "label": "Описание ошибки", "required": true}, {"name": "screenshot", "type": "file", "label": "Скриншот"} ] }, { "id": "payment", "showWhen": {"field": "type", "value": "payment"}, "fields": [ {"name": "order_id", "type": "text", "label": "Номер заказа", "required": true}, {"name": "amount", "type": "number", "label": "Сумма", "required": true}, {"name": "issue", "type": "select", "label": "Тип проблемы", "options": [ {"value": "refund", "label": "Возврат"}, {"value": "delay", "label": "Задержка"} ]} ] } ] }