Client Discovery Questionnaire: Onboarding-to-Employment Training Program<\/title>\r\n <style>\r\n :root {\r\n --magenta: #FF2B8A;\r\n --purple: #7A3EF2;\r\n --indigo: #0B3D91;\r\n --gradient: linear-gradient(135deg, var(--magenta) 0%, #BF4CFF 35%, var(--purple) 60%, #3E5AD8 80%, var(--indigo) 100%);\r\n --ink: #0F172A;\r\n --muted: #475569;\r\n --border: #E2E8F0;\r\n --bg: #FFFFFF;\r\n --bg-alt: #F8FAFC;\r\n --success: #10B981;\r\n --error: #EF4444;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\r\n color: var(--ink);\r\n background-color: var(--bg-alt);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Progress Bar *\/\r\n .progress-container {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background-color: var(--bg);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .progress-bar {\r\n display: flex;\r\n height: 4px;\r\n background-color: var(--border);\r\n }\r\n\r\n .progress-segment {\r\n flex: 1;\r\n height: 100%;\r\n background-color: transparent;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .progress-segment.active {\r\n background: var(--gradient);\r\n }\r\n\r\n \/* Header *\/\r\n header {\r\n background-color: var(--bg);\r\n padding: 2rem 1rem;\r\n text-align: center;\r\n }\r\n\r\n .brand-name {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--ink);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .header-underline {\r\n width: 100px;\r\n height: 4px;\r\n background: var(--gradient);\r\n margin: 0 auto 1rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .page-subtitle {\r\n color: var(--muted);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Main Content *\/\r\n main {\r\n max-width: 800px;\r\n margin: 2rem auto;\r\n padding: 0 1rem;\r\n }\r\n\r\n .form-section {\r\n background-color: var(--bg);\r\n border-radius: 8px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 2rem;\r\n overflow: hidden;\r\n }\r\n\r\n .section-header {\r\n border-top: 4px solid;\r\n border-image: var(--gradient) 1;\r\n padding: 1.5rem;\r\n background-color: var(--bg-alt);\r\n }\r\n\r\n .section-title {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n color: var(--ink);\r\n }\r\n\r\n .section-content {\r\n padding: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-weight: 500;\r\n margin-bottom: 0.5rem;\r\n color: var(--ink);\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n input[type=\"tel\"],\r\n input[type=\"number\"],\r\n select,\r\n textarea {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n min-height: 44px;\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n font-size: 1rem;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n background-color: var(--bg);\r\n }\r\n\r\n input:focus,\r\n select:focus,\r\n textarea:focus {\r\n outline: none;\r\n border-color: transparent;\r\n box-shadow: 0 0 0 3px rgba(255, 43, 138, 0.2);\r\n }\r\n\r\n textarea {\r\n min-height: 100px;\r\n resize: vertical;\r\n }\r\n\r\n .radio-group,\r\n .checkbox-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n }\r\n\r\n .radio-option,\r\n .checkbox-option {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n margin-right: 0.5rem;\r\n }\r\n\r\n .conditional-field {\r\n margin-top: 1rem;\r\n margin-left: 1.5rem;\r\n display: none;\r\n }\r\n\r\n .conditional-field.show {\r\n display: block;\r\n }\r\n\r\n \/* Buttons *\/\r\n .button-group {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin: 2rem 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button {\r\n padding: 0.75rem 1.5rem;\r\n border: none;\r\n border-radius: 6px;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--gradient);\r\n color: white;\r\n }\r\n\r\n .btn-primary:hover {\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .btn-secondary {\r\n background-color: white;\r\n color: var(--ink);\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background-color: var(--bg-alt);\r\n }\r\n\r\n .btn-consultation {\r\n background-color: var(--bg);\r\n color: var(--ink);\r\n border: 2px solid var(--magenta);\r\n border-radius: 50px;\r\n padding: 0.75rem 2rem;\r\n font-weight: 600;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n display: none;\r\n }\r\n\r\n .btn-consultation::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 100%;\r\n background: var(--gradient);\r\n transition: width 0.3s ease;\r\n z-index: -1;\r\n }\r\n\r\n .btn-consultation:hover {\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(255, 43, 138, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-consultation:hover::before {\r\n width: 100%;\r\n }\r\n\r\n .btn-consultation.show {\r\n display: inline-flex;\r\n }\r\n\r\n \/* Toast Notification *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 2rem;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(100px);\r\n background-color: var(--success);\r\n color: white;\r\n padding: 1rem 1.5rem;\r\n border-radius: 6px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n z-index: 1000;\r\n }\r\n\r\n .toast.show {\r\n transform: translateX(-50%) translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n \/* Modal *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .modal.show {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .modal-content {\r\n background-color: var(--bg);\r\n border-radius: 8px;\r\n width: 90%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n transform: scale(0.9);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .modal.show .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .modal-header {\r\n padding: 1.5rem;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .modal-title {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n .modal-body {\r\n padding: 1.5rem;\r\n }\r\n\r\n .modal-footer {\r\n padding: 1.5rem;\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .summary-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .summary-section-title {\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n color: var(--purple);\r\n }\r\n\r\n .summary-item {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .summary-label {\r\n font-weight: 500;\r\n margin-right: 0.5rem;\r\n }\r\n\r\n .summary-value {\r\n color: var(--muted);\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background-color: var(--bg);\r\n padding: 2rem 1rem;\r\n text-align: center;\r\n margin-top: 3rem;\r\n }\r\n\r\n .footer-divider {\r\n width: 100%;\r\n height: 2px;\r\n background: var(--gradient);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .copyright {\r\n color: var(--muted);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (min-width: 768px) {\r\n .page-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .section-content {\r\n padding: 2rem;\r\n }\r\n\r\n .button-group {\r\n justify-content: flex-end;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-segment active\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header>\r\n <h1 class=\"brand-name\">\u0645\u0639\u0647\u062f \u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0644\u0644\u062a\u062f\u0631\u064a\u0628<\/h1>\r\n <div class=\"header-underline\"><\/div>\r\n <h2 class=\"page-title\">Client Discovery Questionnaire: Onboarding-to-Employment Training Program<\/h2>\r\n <p class=\"page-subtitle\">We'll use this to tailor an onboarding-to-employment program that makes trainees job-ready.<\/p>\r\n <\/header>\r\n\r\n \r\n <main>\r\n <form id=\"intake-form\" action=\"https:\/\/formspree.io\/f\/xzzvwwvr\" method=\"POST\">\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Company Information<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"company-name\">Company Name<\/label>\r\n <input type=\"text\" id=\"company-name\" name=\"company-name\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"industry\">Industry<\/label>\r\n <input type=\"text\" id=\"industry\" name=\"industry\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"company-size\">Company Size<\/label>\r\n <select id=\"company-size\" name=\"company-size\">\r\n <option value=\"\">Select size<\/option>\r\n <option value=\"1-10\">1-10 employees<\/option>\r\n <option value=\"11-50\">11-50 employees<\/option>\r\n <option value=\"51-200\">51-200 employees<\/option>\r\n <option value=\"201-1000\">201-1000 employees<\/option>\r\n <option value=\"1000+\">1000+ employees<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-person\">Contact Person<\/label>\r\n <input type=\"text\" id=\"contact-person\" name=\"contact-person\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-email\">\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\r\n <input type=\"email\" id=\"contact-email\" name=\"contact-email\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-phone\">Phone<\/label>\r\n <input type=\"tel\" id=\"contact-phone\" name=\"contact-phone\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Hiring & Onboarding Context<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"positions\">Positions you typically hire for<\/label>\r\n <input type=\"text\" id=\"positions\" name=\"positions\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"hire-frequency\">How often do you hire for these positions?<\/label>\r\n <select id=\"hire-frequency\" name=\"hire-frequency\">\r\n <option value=\"\">Select frequency<\/option>\r\n <option value=\"ongoing\">Ongoing (multiple positions per month)<\/option>\r\n <option value=\"quarterly\">Quarterly<\/option>\r\n <option value=\"semi-annually\">Semi-annually<\/option>\r\n <option value=\"annually\">Annually<\/option>\r\n <option value=\"as-needed\">As needed<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Do you have an existing onboarding program?<\/label>\r\n <div class=\"radio-group\">\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"existing-program-yes\" name=\"existing-program\" value=\"yes\">\r\n <label for=\"existing-program-yes\">\u0646\u0639\u0645<\/label>\r\n <\/div>\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"existing-program-no\" name=\"existing-program\" value=\"no\">\r\n <label for=\"existing-program-no\">\u0644\u0627<\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"conditional-field\" id=\"existing-program-details\">\r\n <label for=\"program-description\">Please describe your current onboarding program<\/label>\r\n <textarea id=\"program-description\" name=\"program-description\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>What challenges have you faced with onboarding new hires?<\/label>\r\n <textarea id=\"onboarding-challenges\" name=\"onboarding-challenges\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Training Objectives<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>What are the primary skills you want new hires to develop? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"technical-skills\" name=\"skills\" value=\"technical\">\r\n <label for=\"technical-skills\">Technical skills<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"soft-skills\" name=\"skills\" value=\"soft\">\r\n <label for=\"soft-skills\">Soft skills<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"company-culture\" name=\"skills\" value=\"culture\">\r\n <label for=\"company-culture\">Company culture\/values<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"compliance\" name=\"skills\" value=\"compliance\">\r\n <label for=\"compliance\">Compliance\/regulatory knowledge<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"product-knowledge\" name=\"skills\" value=\"product\">\r\n <label for=\"product-knowledge\">Product\/service knowledge<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"timeline\">What is your ideal timeline for new hires to become fully productive?<\/label>\r\n <select id=\"timeline\" name=\"timeline\">\r\n <option value=\"\">Select timeline<\/option>\r\n <option value=\"1-week\">1 week<\/option>\r\n <option value=\"2-weeks\">2 weeks<\/option>\r\n <option value=\"1-month\">1 month<\/option>\r\n <option value=\"3-months\">3 months<\/option>\r\n <option value=\"6-months\">6 months<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"specific-objectives\">Are there any specific objectives or outcomes you want to achieve?<\/label>\r\n <textarea id=\"specific-objectives\" name=\"specific-objectives\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Delivery Preferences<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>What training delivery methods do you prefer? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"in-person\" name=\"delivery-methods\" value=\"in-person\">\r\n <label for=\"in-person\">In-person training<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"virtual-live\" name=\"delivery-methods\" value=\"virtual-live\">\r\n <label for=\"virtual-live\">Virtual live training<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"self-paced\" name=\"delivery-methods\" value=\"self-paced\">\r\n <label for=\"self-paced\">Self-paced online modules<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"hybrid\" name=\"delivery-methods\" value=\"hybrid\">\r\n <label for=\"hybrid\">Hybrid approach<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"training-duration\">What is your preferred duration for the training program?<\/label>\r\n <select id=\"training-duration\" name=\"training-duration\">\r\n <option value=\"\">Select duration<\/option>\r\n <option value=\"1-day\">1 day<\/option>\r\n <option value=\"2-3-days\">2-3 days<\/option>\r\n <option value=\"1-week\">1 week<\/option>\r\n <option value=\"2-4-weeks\">2-4 weeks<\/option>\r\n <option value=\"1-3-months\">1-3 months<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Do you have any specific technology requirements or constraints?<\/label>\r\n <textarea id=\"tech-requirements\" name=\"tech-requirements\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Program Logistics & Support<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"trainee-count\">Approximately how many trainees will go through this program per cycle?<\/label>\r\n <input type=\"number\" id=\"trainee-count\" name=\"trainee-count\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"training-location\">Where would the training take place?<\/label>\r\n <select id=\"training-location\" name=\"training-location\">\r\n <option value=\"\">Select location<\/option>\r\n <option value=\"company-premises\">Company premises<\/option>\r\n <option value=\"offsite\">Offsite location<\/option>\r\n <option value=\"virtual\">Virtual\/remote<\/option>\r\n <option value=\"hybrid\">\u0647\u062c\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Will you provide internal staff to support the training program?<\/label>\r\n <div class=\"radio-group\">\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"internal-support-yes\" name=\"internal-support\" value=\"yes\">\r\n <label for=\"internal-support-yes\">\u0646\u0639\u0645<\/label>\r\n <\/div>\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"internal-support-no\" name=\"internal-support\" value=\"no\">\r\n <label for=\"internal-support-no\">\u0644\u0627<\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"conditional-field\" id=\"internal-support-details\">\r\n <label for=\"support-description\">Please describe the type of support you can provide<\/label>\r\n <textarea id=\"support-description\" name=\"support-description\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Success Criteria & KPIs<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>How will you measure the success of this training program? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"retention-rate\" name=\"success-metrics\" value=\"retention\">\r\n <label for=\"retention-rate\">Employee retention rate<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"time-productivity\" name=\"success-metrics\" value=\"time-to-productivity\">\r\n <label for=\"time-productivity\">Time to full productivity<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"performance-reviews\" name=\"success-metrics\" value=\"performance\">\r\n <label for=\"performance-reviews\">Performance review scores<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"feedback\" name=\"success-metrics\" value=\"feedback\">\r\n <label for=\"feedback\">Trainee feedback\/satisfaction<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"manager-feedback\" name=\"success-metrics\" value=\"manager-feedback\">\r\n <label for=\"manager-feedback\">Manager feedback<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"target-metrics\">What are your target metrics for each of the selected success criteria?<\/label>\r\n <textarea id=\"target-metrics\" name=\"target-metrics\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"reporting-needs\">What are your reporting needs?<\/label>\r\n <select id=\"reporting-needs\" name=\"reporting-needs\">\r\n <option value=\"\">Select reporting needs<\/option>\r\n <option value=\"basic\">Basic completion reports<\/option>\r\n <option value=\"detailed\">Detailed progress tracking<\/option>\r\n <option value=\"analytics\">Advanced analytics and insights<\/option>\r\n <option value=\"custom\">Custom reporting requirements<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Budget & Investment<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"budget-range\">What is your approximate budget range for this training program?<\/label>\r\n <select id=\"budget-range\" name=\"budget-range\">\r\n <option value=\"\">Select budget range<\/option>\r\n <option value=\"under-5k\">Under $5,000<\/option>\r\n <option value=\"5k-10k\">$5,000 - $10,000<\/option>\r\n <option value=\"10k-25k\">$10,000 - $25,000<\/option>\r\n <option value=\"25k-50k\">$25,000 - $50,000<\/option>\r\n <option value=\"50k-100k\">$50,000 - $100,000<\/option>\r\n <option value=\"over-100k\">Over $100,000<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"budget-considerations\">Are there any budget considerations or constraints we should be aware of?<\/label>\r\n <textarea id=\"budget-considerations\" name=\"budget-considerations\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"roi-expectations\">What are your expectations for return on investment (ROI)?<\/label>\r\n <textarea id=\"roi-expectations\" name=\"roi-expectations\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Additional Notes & Special Requests<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"additional-notes\">Is there anything else you'd like us to know about your training needs?<\/label>\r\n <textarea id=\"additional-notes\" name=\"additional-notes\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"timeline-start\">When would you like to begin this training program?<\/label>\r\n <input type=\"text\" id=\"timeline-start\" name=\"timeline-start\" placeholder=\"e.g., Immediately, Q3 2023, etc.\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"decision-makers\">Who are the key decision-makers for this program?<\/label>\r\n <input type=\"text\" id=\"decision-makers\" name=\"decision-makers\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"button-group\">\r\n <button type=\"button\" class=\"btn-secondary\" id=\"save-later\">Save & Continue Later<\/button>\r\n <button type=\"submit\" class=\"btn-primary\">Submit<\/button>\r\n <a href=\"https:\/\/calendly.com\/turningpoint-xyz\/30min\" target=\"_blank\" class=\"btn-consultation\" id=\"schedule-consultation\">Schedule a Consultation<\/a>\r\n <\/div>\r\n <\/form>\r\n <\/main>\r\n\r\n \r\n <footer>\r\n <div class=\"footer-divider\"><\/div>\r\n <p class=\"copyright\">\u00a9 Turning Point Training Institute<\/p>\r\n <\/footer>\r\n\r\n \r\n <div class=\"toast\" id=\"toast\">Thank you \u2014 your responses have been recorded.<\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"summary-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3 class=\"modal-title\">Form Submission Summary<\/h3>\r\n <\/div>\r\n <div class=\"modal-body\" id=\"summary-content\">\r\n \r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn-secondary\" id=\"download-json\">Download JSON<\/button>\r\n <button type=\"button\" class=\"btn-secondary\" id=\"print-pdf\">Print PDF<\/button>\r\n <a href=\"https:\/\/calendly.com\/turningpoint-xyz\/30min\" target=\"_blank\" class=\"btn-consultation\" id=\"modal-schedule-consultation\">Schedule a Consultation<\/a>\r\n <button type=\"button\" class=\"btn-primary\" id=\"close-modal\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Form data object\r\n let formData = {};\r\n\r\n \/\/ DOM elements\r\n const form = document.getElementById('intake-form');\r\n const saveButton = document.getElementById('save-later');\r\n const toast = document.getElementById('toast');\r\n const modal = document.getElementById('summary-modal');\r\n const summaryContent = document.getElementById('summary-content');\r\n const closeModalButton = document.getElementById('close-modal');\r\n const downloadJsonButton = document.getElementById('download-json');\r\n const printPdfButton = document.getElementById('print-pdf');\r\n const progressSegments = document.querySelectorAll('.progress-segment');\r\n const scheduleConsultationButton = document.getElementById('schedule-consultation');\r\n const modalScheduleConsultationButton = document.getElementById('modal-schedule-consultation');\r\n\r\n \/\/ Conditional field handling\r\n document.getElementById('existing-program-yes').addEventListener('change', function() {\r\n document.getElementById('existing-program-details').classList.toggle('show', this.checked);\r\n });\r\n\r\n document.getElementById('internal-support-yes').addEventListener('change', function() {\r\n document.getElementById('internal-support-details').classList.toggle('show', this.checked);\r\n });\r\n\r\n \/\/ Progress bar update on scroll\r\n function updateProgressBar() {\r\n const sections = document.querySelectorAll('.form-section');\r\n const scrollPosition = window.scrollY + 200;\r\n \r\n sections.forEach((section, index) => {\r\n const sectionTop = section.offsetTop;\r\n if (scrollPosition >= sectionTop) {\r\n progressSegments.forEach((segment, i) => {\r\n segment.classList.toggle('active', i <= index);\r\n });\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener('scroll', updateProgressBar);\r\n\r\n \/\/ Save data to localStorage\r\n function saveToLocalStorage() {\r\n const formData = new FormData(form);\r\n const data = {};\r\n \r\n \/\/ Process regular form fields\r\n for (let [key, value] of formData.entries()) {\r\n if (data[key]) {\r\n if (Array.isArray(data[key])) {\r\n data[key].push(value);\r\n } else {\r\n data[key] = [data[key], value];\r\n }\r\n } else {\r\n data[key] = value;\r\n }\r\n }\r\n \r\n \/\/ Process checkboxes\r\n const checkboxes = form.querySelectorAll('input[type=\"checkbox\"]:checked');\r\n checkboxes.forEach(checkbox => {\r\n const name = checkbox.name;\r\n if (data[name]) {\r\n if (Array.isArray(data[name])) {\r\n data[name].push(checkbox.value);\r\n } else {\r\n data[name] = [data[name], checkbox.value];\r\n }\r\n } else {\r\n data[name] = checkbox.value;\r\n }\r\n });\r\n \r\n localStorage.setItem('tp-onboarding-intake-v1', JSON.stringify(data));\r\n showToast('Your progress has been saved.');\r\n }\r\n\r\n \/\/ Show toast notification\r\n function showToast(message) {\r\n toast.textContent = message;\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 3000);\r\n }\r\n\r\n \/\/ Collect form data\r\n function collectFormData() {\r\n const data = {};\r\n \r\n \/\/ Process text inputs, selects, and textareas\r\n const textInputs = form.querySelectorAll('input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"number\"], select, textarea');\r\n textInputs.forEach(input => {\r\n if (input.value.trim() !== '') {\r\n data[input.name] = input.value;\r\n }\r\n });\r\n \r\n \/\/ Process radio buttons\r\n const radioGroups = {};\r\n const radioButtons = form.querySelectorAll('input[type=\"radio\"]:checked');\r\n radioButtons.forEach(radio => {\r\n radioGroups[radio.name] = radio.value;\r\n });\r\n Object.assign(data, radioGroups);\r\n \r\n \/\/ Process checkboxes\r\n const checkboxGroups = {};\r\n const checkboxes = form.querySelectorAll('input[type=\"checkbox\"]:checked');\r\n checkboxes.forEach(checkbox => {\r\n if (checkboxGroups[checkbox.name]) {\r\n if (Array.isArray(checkboxGroups[checkbox.name])) {\r\n checkboxGroups[checkbox.name].push(checkbox.value);\r\n } else {\r\n checkboxGroups[checkbox.name] = [checkboxGroups[checkbox.name], checkbox.value];\r\n }\r\n } else {\r\n checkboxGroups[checkbox.name] = checkbox.value;\r\n }\r\n });\r\n Object.assign(data, checkboxGroups);\r\n \r\n return data;\r\n }\r\n\r\n \/\/ Generate summary HTML\r\n function generateSummaryHTML(data) {\r\n let html = '';\r\n \r\n \/\/ Company Information\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Company Information<\/h4>';\r\n if (data['company-name']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Company Name:<\/span> <span class=\"summary-value\">${data['company-name']}<\/span><\/div>`;\r\n if (data.industry) html += `<div class=\"summary-item\"><span class=\"summary-label\">Industry:<\/span> <span class=\"summary-value\">${data.industry}<\/span><\/div>`;\r\n if (data['company-size']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Company Size:<\/span> <span class=\"summary-value\">${data['company-size']}<\/span><\/div>`;\r\n if (data['contact-person']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Contact Person:<\/span> <span class=\"summary-value\">${data['contact-person']}<\/span><\/div>`;\r\n if (data['contact-email']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Email:<\/span> <span class=\"summary-value\">${data['contact-email']}<\/span><\/div>`;\r\n if (data['contact-phone']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Phone:<\/span> <span class=\"summary-value\">${data['contact-phone']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Hiring & Onboarding Context\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Hiring & Onboarding Context<\/h4>';\r\n if (data.positions) html += `<div class=\"summary-item\"><span class=\"summary-label\">Positions:<\/span> <span class=\"summary-value\">${data.positions}<\/span><\/div>`;\r\n if (data['hire-frequency']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Hiring Frequency:<\/span> <span class=\"summary-value\">${data['hire-frequency']}<\/span><\/div>`;\r\n if (data['existing-program']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Existing Program:<\/span> <span class=\"summary-value\">${data['existing-program']}<\/span><\/div>`;\r\n if (data['program-description']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Program Description:<\/span> <span class=\"summary-value\">${data['program-description']}<\/span><\/div>`;\r\n if (data['onboarding-challenges']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Challenges:<\/span> <span class=\"summary-value\">${data['onboarding-challenges']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Training Objectives\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Training Objectives<\/h4>';\r\n if (data.skills) {\r\n const skills = Array.isArray(data.skills) ? data.skills.join(', ') : data.skills;\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Skills:<\/span> <span class=\"summary-value\">${skills}<\/span><\/div>`;\r\n }\r\n if (data.timeline) html += `<div class=\"summary-item\"><span class=\"summary-label\">Timeline:<\/span> <span class=\"summary-value\">${data.timeline}<\/span><\/div>`;\r\n if (data['specific-objectives']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Specific Objectives:<\/span> <span class=\"summary-value\">${data['specific-objectives']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Delivery Preferences\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Delivery Preferences<\/h4>';\r\n if (data['delivery-methods']) {\r\n const methods = Array.isArray(data['delivery-methods']) ? data['delivery-methods'].join(', ') : data['delivery-methods'];\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Delivery Methods:<\/span> <span class=\"summary-value\">${methods}<\/span><\/div>`;\r\n }\r\n if (data['training-duration']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Duration:<\/span> <span class=\"summary-value\">${data['training-duration']}<\/span><\/div>`;\r\n if (data['tech-requirements']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Tech Requirements:<\/span> <span class=\"summary-value\">${data['tech-requirements']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Program Logistics & Support\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Program Logistics & Support<\/h4>';\r\n if (data['trainee-count']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Trainee Count:<\/span> <span class=\"summary-value\">${data['trainee-count']}<\/span><\/div>`;\r\n if (data['training-location']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Location:<\/span> <span class=\"summary-value\">${data['training-location']}<\/span><\/div>`;\r\n if (data['internal-support']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Internal Support:<\/span> <span class=\"summary-value\">${data['internal-support']}<\/span><\/div>`;\r\n if (data['support-description']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Support Description:<\/span> <span class=\"summary-value\">${data['support-description']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Success Criteria & KPIs\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Success Criteria & KPIs<\/h4>';\r\n if (data['success-metrics']) {\r\n const metrics = Array.isArray(data['success-metrics']) ? data['success-metrics'].join(', ') : data['success-metrics'];\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Success Metrics:<\/span> <span class=\"summary-value\">${metrics}<\/span><\/div>`;\r\n }\r\n if (data['target-metrics']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Target Metrics:<\/span> <span class=\"summary-value\">${data['target-metrics']}<\/span><\/div>`;\r\n if (data['reporting-needs']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Reporting Needs:<\/span> <span class=\"summary-value\">${data['reporting-needs']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Budget & Investment\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Budget & Investment<\/h4>';\r\n if (data['budget-range']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Budget Range:<\/span> <span class=\"summary-value\">${data['budget-range']}<\/span><\/div>`;\r\n if (data['budget-considerations']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Budget Considerations:<\/span> <span class=\"summary-value\">${data['budget-considerations']}<\/span><\/div>`;\r\n if (data['roi-expectations']) html += `<div class=\"summary-item\"><span class=\"summary-label\">ROI Expectations:<\/span> <span class=\"summary-value\">${data['roi-expectations']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Additional Notes & Special Requests\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Additional Notes & Special Requests<\/h4>';\r\n if (data['additional-notes']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Additional Notes:<\/span> <span class=\"summary-value\">${data['additional-notes']}<\/span><\/div>`;\r\n if (data['timeline-start']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Timeline Start:<\/span> <span class=\"summary-value\">${data['timeline-start']}<\/span><\/div>`;\r\n if (data['decision-makers']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Decision Makers:<\/span> <span class=\"summary-value\">${data['decision-makers']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n return html;\r\n }\r\n\r\n \/\/ Download data as JSON\r\n function downloadJson() {\r\n const dataStr = JSON.stringify(formData, null, 2);\r\n const dataUri = 'data:application\/json;charset=utf-8,'+ encodeURIComponent(dataStr);\r\n \r\n const exportFileDefaultName = 'client-discovery-questionnaire.json';\r\n \r\n const linkElement = document.createElement('a');\r\n linkElement.setAttribute('href', dataUri);\r\n linkElement.setAttribute('download', exportFileDefaultName);\r\n linkElement.click();\r\n }\r\n\r\n \/\/ Print as PDF\r\n function printPdf() {\r\n window.print();\r\n }\r\n\r\n \/\/ Event listeners\r\n saveButton.addEventListener('click', saveToLocalStorage);\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ Collect form data\r\n formData = collectFormData();\r\n \r\n \/\/ Show toast notification\r\n showToast('Thank you \u2014 your responses have been recorded.');\r\n \r\n \/\/ Generate and show summary\r\n summaryContent.innerHTML = generateSummaryHTML(formData);\r\n modal.classList.add('show');\r\n \r\n \/\/ Show the schedule consultation button\r\n scheduleConsultationButton.classList.add('show');\r\n modalScheduleConsultationButton.classList.add('show');\r\n \r\n \/\/ Submit the form to Formspree\r\n fetch(form.action, {\r\n method: 'POST',\r\n body: new FormData(form),\r\n headers: {\r\n 'Accept': 'application\/json'\r\n }\r\n })\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok');\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n console.log('Form submitted successfully:', data);\r\n })\r\n .catch(error => {\r\n console.error('Error submitting form:', error);\r\n });\r\n });\r\n\r\n closeModalButton.addEventListener('click', function() {\r\n modal.classList.remove('show');\r\n });\r\n\r\n downloadJsonButton.addEventListener('click', downloadJson);\r\n printPdfButton.addEventListener('click', printPdf);\r\n\r\n \/\/ Load saved data on page load\r\n window.addEventListener('DOMContentLoaded', function() {\r\n const savedData = localStorage.getItem('tp-onboarding-intake-v1');\r\n if (savedData) {\r\n const data = JSON.parse(savedData);\r\n \r\n \/\/ Restore text inputs, selects, and textareas\r\n Object.keys(data).forEach(key => {\r\n const input = form.querySelector(`[name=\"${key}\"]`);\r\n if (input && (input.type === 'text' || input.type === 'email' || input.type === 'tel' || input.type === 'number' || input.tagName === 'SELECT' || input.tagName === 'TEXTAREA')) {\r\n input.value = data[key];\r\n }\r\n });\r\n \r\n \/\/ Restore radio buttons\r\n Object.keys(data).forEach(key => {\r\n const radio = form.querySelector(`input[type=\"radio\"][name=\"${key}\"][value=\"${data[key]}\"]`);\r\n if (radio) {\r\n radio.checked = true;\r\n \/\/ Trigger change event for conditional fields\r\n radio.dispatchEvent(new Event('change'));\r\n }\r\n });\r\n \r\n \/\/ Restore checkboxes\r\n Object.keys(data).forEach(key => {\r\n if (Array.isArray(data[key])) {\r\n data[key].forEach(value => {\r\n const checkbox = form.querySelector(`input[type=\"checkbox\"][name=\"${key}\"][value=\"${value}\"]`);\r\n if (checkbox) {\r\n checkbox.checked = true;\r\n }\r\n });\r\n } else {\r\n const checkbox = form.querySelector(`input[type=\"checkbox\"][name=\"${key}\"][value=\"${data[key]}\"]`);\r\n if (checkbox) {\r\n checkbox.checked = true;\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n \/\/ Close modal when clicking outside\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n modal.classList.remove('show');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Client Discovery Questionnaire: Onboarding-to-Employment Training Program Turning Point Training Institute Client Discovery Questionnaire: Onboarding-to-Employment Training Program We’ll use this to tailor an onboarding-to-employment program that makes trainees job-ready. Company Information Company Name Industry Company Size Select size1-10 employees11-50 employees51-200 employees201-1000 employees1000+ employees Contact Person Email Phone Hiring & Onboarding Context Positions you typically hire for…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-16643","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages\/16643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/comments?post=16643"}],"version-history":[{"count":0,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages\/16643\/revisions"}],"wp:attachment":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/media?parent=16643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Client Discovery Questionnaire: Onboarding-to-Employment Training Program<\/title>\r\n <style>\r\n :root {\r\n --magenta: #FF2B8A;\r\n --purple: #7A3EF2;\r\n --indigo: #0B3D91;\r\n --gradient: linear-gradient(135deg, var(--magenta) 0%, #BF4CFF 35%, var(--purple) 60%, #3E5AD8 80%, var(--indigo) 100%);\r\n --ink: #0F172A;\r\n --muted: #475569;\r\n --border: #E2E8F0;\r\n --bg: #FFFFFF;\r\n --bg-alt: #F8FAFC;\r\n --success: #10B981;\r\n --error: #EF4444;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\r\n color: var(--ink);\r\n background-color: var(--bg-alt);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Progress Bar *\/\r\n .progress-container {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background-color: var(--bg);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .progress-bar {\r\n display: flex;\r\n height: 4px;\r\n background-color: var(--border);\r\n }\r\n\r\n .progress-segment {\r\n flex: 1;\r\n height: 100%;\r\n background-color: transparent;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .progress-segment.active {\r\n background: var(--gradient);\r\n }\r\n\r\n \/* Header *\/\r\n header {\r\n background-color: var(--bg);\r\n padding: 2rem 1rem;\r\n text-align: center;\r\n }\r\n\r\n .brand-name {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--ink);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .header-underline {\r\n width: 100px;\r\n height: 4px;\r\n background: var(--gradient);\r\n margin: 0 auto 1rem;\r\n }\r\n\r\n .page-title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .page-subtitle {\r\n color: var(--muted);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Main Content *\/\r\n main {\r\n max-width: 800px;\r\n margin: 2rem auto;\r\n padding: 0 1rem;\r\n }\r\n\r\n .form-section {\r\n background-color: var(--bg);\r\n border-radius: 8px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 2rem;\r\n overflow: hidden;\r\n }\r\n\r\n .section-header {\r\n border-top: 4px solid;\r\n border-image: var(--gradient) 1;\r\n padding: 1.5rem;\r\n background-color: var(--bg-alt);\r\n }\r\n\r\n .section-title {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n color: var(--ink);\r\n }\r\n\r\n .section-content {\r\n padding: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-weight: 500;\r\n margin-bottom: 0.5rem;\r\n color: var(--ink);\r\n }\r\n\r\n input[type=\"text\"],\r\n input[type=\"email\"],\r\n input[type=\"tel\"],\r\n input[type=\"number\"],\r\n select,\r\n textarea {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n min-height: 44px;\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n font-size: 1rem;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n background-color: var(--bg);\r\n }\r\n\r\n input:focus,\r\n select:focus,\r\n textarea:focus {\r\n outline: none;\r\n border-color: transparent;\r\n box-shadow: 0 0 0 3px rgba(255, 43, 138, 0.2);\r\n }\r\n\r\n textarea {\r\n min-height: 100px;\r\n resize: vertical;\r\n }\r\n\r\n .radio-group,\r\n .checkbox-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n }\r\n\r\n .radio-option,\r\n .checkbox-option {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n margin-right: 0.5rem;\r\n }\r\n\r\n .conditional-field {\r\n margin-top: 1rem;\r\n margin-left: 1.5rem;\r\n display: none;\r\n }\r\n\r\n .conditional-field.show {\r\n display: block;\r\n }\r\n\r\n \/* Buttons *\/\r\n .button-group {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin: 2rem 0;\r\n flex-wrap: wrap;\r\n }\r\n\r\n button {\r\n padding: 0.75rem 1.5rem;\r\n border: none;\r\n border-radius: 6px;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--gradient);\r\n color: white;\r\n }\r\n\r\n .btn-primary:hover {\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .btn-secondary {\r\n background-color: white;\r\n color: var(--ink);\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background-color: var(--bg-alt);\r\n }\r\n\r\n .btn-consultation {\r\n background-color: var(--bg);\r\n color: var(--ink);\r\n border: 2px solid var(--magenta);\r\n border-radius: 50px;\r\n padding: 0.75rem 2rem;\r\n font-weight: 600;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n display: none;\r\n }\r\n\r\n .btn-consultation::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 100%;\r\n background: var(--gradient);\r\n transition: width 0.3s ease;\r\n z-index: -1;\r\n }\r\n\r\n .btn-consultation:hover {\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(255, 43, 138, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-consultation:hover::before {\r\n width: 100%;\r\n }\r\n\r\n .btn-consultation.show {\r\n display: inline-flex;\r\n }\r\n\r\n \/* Toast Notification *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 2rem;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(100px);\r\n background-color: var(--success);\r\n color: white;\r\n padding: 1rem 1.5rem;\r\n border-radius: 6px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n z-index: 1000;\r\n }\r\n\r\n .toast.show {\r\n transform: translateX(-50%) translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n \/* Modal *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .modal.show {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .modal-content {\r\n background-color: var(--bg);\r\n border-radius: 8px;\r\n width: 90%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n transform: scale(0.9);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .modal.show .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .modal-header {\r\n padding: 1.5rem;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .modal-title {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n .modal-body {\r\n padding: 1.5rem;\r\n }\r\n\r\n .modal-footer {\r\n padding: 1.5rem;\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .summary-section {\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .summary-section-title {\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n color: var(--purple);\r\n }\r\n\r\n .summary-item {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .summary-label {\r\n font-weight: 500;\r\n margin-right: 0.5rem;\r\n }\r\n\r\n .summary-value {\r\n color: var(--muted);\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background-color: var(--bg);\r\n padding: 2rem 1rem;\r\n text-align: center;\r\n margin-top: 3rem;\r\n }\r\n\r\n .footer-divider {\r\n width: 100%;\r\n height: 2px;\r\n background: var(--gradient);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .copyright {\r\n color: var(--muted);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (min-width: 768px) {\r\n .page-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .section-content {\r\n padding: 2rem;\r\n }\r\n\r\n .button-group {\r\n justify-content: flex-end;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-segment active\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <div class=\"progress-segment\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header>\r\n <h1 class=\"brand-name\">\u0645\u0639\u0647\u062f \u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u062d\u0648\u0644 \u0644\u0644\u062a\u062f\u0631\u064a\u0628<\/h1>\r\n <div class=\"header-underline\"><\/div>\r\n <h2 class=\"page-title\">Client Discovery Questionnaire: Onboarding-to-Employment Training Program<\/h2>\r\n <p class=\"page-subtitle\">We'll use this to tailor an onboarding-to-employment program that makes trainees job-ready.<\/p>\r\n <\/header>\r\n\r\n \r\n <main>\r\n <form id=\"intake-form\" action=\"https:\/\/formspree.io\/f\/xzzvwwvr\" method=\"POST\">\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Company Information<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"company-name\">Company Name<\/label>\r\n <input type=\"text\" id=\"company-name\" name=\"company-name\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"industry\">Industry<\/label>\r\n <input type=\"text\" id=\"industry\" name=\"industry\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"company-size\">Company Size<\/label>\r\n <select id=\"company-size\" name=\"company-size\">\r\n <option value=\"\">Select size<\/option>\r\n <option value=\"1-10\">1-10 employees<\/option>\r\n <option value=\"11-50\">11-50 employees<\/option>\r\n <option value=\"51-200\">51-200 employees<\/option>\r\n <option value=\"201-1000\">201-1000 employees<\/option>\r\n <option value=\"1000+\">1000+ employees<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-person\">Contact Person<\/label>\r\n <input type=\"text\" id=\"contact-person\" name=\"contact-person\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-email\">\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\r\n <input type=\"email\" id=\"contact-email\" name=\"contact-email\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"contact-phone\">Phone<\/label>\r\n <input type=\"tel\" id=\"contact-phone\" name=\"contact-phone\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Hiring & Onboarding Context<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"positions\">Positions you typically hire for<\/label>\r\n <input type=\"text\" id=\"positions\" name=\"positions\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"hire-frequency\">How often do you hire for these positions?<\/label>\r\n <select id=\"hire-frequency\" name=\"hire-frequency\">\r\n <option value=\"\">Select frequency<\/option>\r\n <option value=\"ongoing\">Ongoing (multiple positions per month)<\/option>\r\n <option value=\"quarterly\">Quarterly<\/option>\r\n <option value=\"semi-annually\">Semi-annually<\/option>\r\n <option value=\"annually\">Annually<\/option>\r\n <option value=\"as-needed\">As needed<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Do you have an existing onboarding program?<\/label>\r\n <div class=\"radio-group\">\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"existing-program-yes\" name=\"existing-program\" value=\"yes\">\r\n <label for=\"existing-program-yes\">\u0646\u0639\u0645<\/label>\r\n <\/div>\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"existing-program-no\" name=\"existing-program\" value=\"no\">\r\n <label for=\"existing-program-no\">\u0644\u0627<\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"conditional-field\" id=\"existing-program-details\">\r\n <label for=\"program-description\">Please describe your current onboarding program<\/label>\r\n <textarea id=\"program-description\" name=\"program-description\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>What challenges have you faced with onboarding new hires?<\/label>\r\n <textarea id=\"onboarding-challenges\" name=\"onboarding-challenges\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Training Objectives<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>What are the primary skills you want new hires to develop? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"technical-skills\" name=\"skills\" value=\"technical\">\r\n <label for=\"technical-skills\">Technical skills<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"soft-skills\" name=\"skills\" value=\"soft\">\r\n <label for=\"soft-skills\">Soft skills<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"company-culture\" name=\"skills\" value=\"culture\">\r\n <label for=\"company-culture\">Company culture\/values<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"compliance\" name=\"skills\" value=\"compliance\">\r\n <label for=\"compliance\">Compliance\/regulatory knowledge<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"product-knowledge\" name=\"skills\" value=\"product\">\r\n <label for=\"product-knowledge\">Product\/service knowledge<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"timeline\">What is your ideal timeline for new hires to become fully productive?<\/label>\r\n <select id=\"timeline\" name=\"timeline\">\r\n <option value=\"\">Select timeline<\/option>\r\n <option value=\"1-week\">1 week<\/option>\r\n <option value=\"2-weeks\">2 weeks<\/option>\r\n <option value=\"1-month\">1 month<\/option>\r\n <option value=\"3-months\">3 months<\/option>\r\n <option value=\"6-months\">6 months<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"specific-objectives\">Are there any specific objectives or outcomes you want to achieve?<\/label>\r\n <textarea id=\"specific-objectives\" name=\"specific-objectives\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Delivery Preferences<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>What training delivery methods do you prefer? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"in-person\" name=\"delivery-methods\" value=\"in-person\">\r\n <label for=\"in-person\">In-person training<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"virtual-live\" name=\"delivery-methods\" value=\"virtual-live\">\r\n <label for=\"virtual-live\">Virtual live training<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"self-paced\" name=\"delivery-methods\" value=\"self-paced\">\r\n <label for=\"self-paced\">Self-paced online modules<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"hybrid\" name=\"delivery-methods\" value=\"hybrid\">\r\n <label for=\"hybrid\">Hybrid approach<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"training-duration\">What is your preferred duration for the training program?<\/label>\r\n <select id=\"training-duration\" name=\"training-duration\">\r\n <option value=\"\">Select duration<\/option>\r\n <option value=\"1-day\">1 day<\/option>\r\n <option value=\"2-3-days\">2-3 days<\/option>\r\n <option value=\"1-week\">1 week<\/option>\r\n <option value=\"2-4-weeks\">2-4 weeks<\/option>\r\n <option value=\"1-3-months\">1-3 months<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Do you have any specific technology requirements or constraints?<\/label>\r\n <textarea id=\"tech-requirements\" name=\"tech-requirements\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Program Logistics & Support<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"trainee-count\">Approximately how many trainees will go through this program per cycle?<\/label>\r\n <input type=\"number\" id=\"trainee-count\" name=\"trainee-count\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"training-location\">Where would the training take place?<\/label>\r\n <select id=\"training-location\" name=\"training-location\">\r\n <option value=\"\">Select location<\/option>\r\n <option value=\"company-premises\">Company premises<\/option>\r\n <option value=\"offsite\">Offsite location<\/option>\r\n <option value=\"virtual\">Virtual\/remote<\/option>\r\n <option value=\"hybrid\">\u0647\u062c\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Will you provide internal staff to support the training program?<\/label>\r\n <div class=\"radio-group\">\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"internal-support-yes\" name=\"internal-support\" value=\"yes\">\r\n <label for=\"internal-support-yes\">\u0646\u0639\u0645<\/label>\r\n <\/div>\r\n <div class=\"radio-option\">\r\n <input type=\"radio\" id=\"internal-support-no\" name=\"internal-support\" value=\"no\">\r\n <label for=\"internal-support-no\">\u0644\u0627<\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"conditional-field\" id=\"internal-support-details\">\r\n <label for=\"support-description\">Please describe the type of support you can provide<\/label>\r\n <textarea id=\"support-description\" name=\"support-description\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Success Criteria & KPIs<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label>How will you measure the success of this training program? (Select all that apply)<\/label>\r\n <div class=\"checkbox-group\">\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"retention-rate\" name=\"success-metrics\" value=\"retention\">\r\n <label for=\"retention-rate\">Employee retention rate<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"time-productivity\" name=\"success-metrics\" value=\"time-to-productivity\">\r\n <label for=\"time-productivity\">Time to full productivity<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"performance-reviews\" name=\"success-metrics\" value=\"performance\">\r\n <label for=\"performance-reviews\">Performance review scores<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"feedback\" name=\"success-metrics\" value=\"feedback\">\r\n <label for=\"feedback\">Trainee feedback\/satisfaction<\/label>\r\n <\/div>\r\n <div class=\"checkbox-option\">\r\n <input type=\"checkbox\" id=\"manager-feedback\" name=\"success-metrics\" value=\"manager-feedback\">\r\n <label for=\"manager-feedback\">Manager feedback<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"target-metrics\">What are your target metrics for each of the selected success criteria?<\/label>\r\n <textarea id=\"target-metrics\" name=\"target-metrics\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"reporting-needs\">What are your reporting needs?<\/label>\r\n <select id=\"reporting-needs\" name=\"reporting-needs\">\r\n <option value=\"\">Select reporting needs<\/option>\r\n <option value=\"basic\">Basic completion reports<\/option>\r\n <option value=\"detailed\">Detailed progress tracking<\/option>\r\n <option value=\"analytics\">Advanced analytics and insights<\/option>\r\n <option value=\"custom\">Custom reporting requirements<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Budget & Investment<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"budget-range\">What is your approximate budget range for this training program?<\/label>\r\n <select id=\"budget-range\" name=\"budget-range\">\r\n <option value=\"\">Select budget range<\/option>\r\n <option value=\"under-5k\">Under $5,000<\/option>\r\n <option value=\"5k-10k\">$5,000 - $10,000<\/option>\r\n <option value=\"10k-25k\">$10,000 - $25,000<\/option>\r\n <option value=\"25k-50k\">$25,000 - $50,000<\/option>\r\n <option value=\"50k-100k\">$50,000 - $100,000<\/option>\r\n <option value=\"over-100k\">Over $100,000<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"budget-considerations\">Are there any budget considerations or constraints we should be aware of?<\/label>\r\n <textarea id=\"budget-considerations\" name=\"budget-considerations\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"roi-expectations\">What are your expectations for return on investment (ROI)?<\/label>\r\n <textarea id=\"roi-expectations\" name=\"roi-expectations\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-section\">\r\n <div class=\"section-header\">\r\n <h3 class=\"section-title\">Additional Notes & Special Requests<\/h3>\r\n <\/div>\r\n <div class=\"section-content\">\r\n <div class=\"form-group\">\r\n <label for=\"additional-notes\">Is there anything else you'd like us to know about your training needs?<\/label>\r\n <textarea id=\"additional-notes\" name=\"additional-notes\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"timeline-start\">When would you like to begin this training program?<\/label>\r\n <input type=\"text\" id=\"timeline-start\" name=\"timeline-start\" placeholder=\"e.g., Immediately, Q3 2023, etc.\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"decision-makers\">Who are the key decision-makers for this program?<\/label>\r\n <input type=\"text\" id=\"decision-makers\" name=\"decision-makers\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"button-group\">\r\n <button type=\"button\" class=\"btn-secondary\" id=\"save-later\">Save & Continue Later<\/button>\r\n <button type=\"submit\" class=\"btn-primary\">Submit<\/button>\r\n <a href=\"https:\/\/calendly.com\/turningpoint-xyz\/30min\" target=\"_blank\" class=\"btn-consultation\" id=\"schedule-consultation\">Schedule a Consultation<\/a>\r\n <\/div>\r\n <\/form>\r\n <\/main>\r\n\r\n \r\n <footer>\r\n <div class=\"footer-divider\"><\/div>\r\n <p class=\"copyright\">\u00a9 Turning Point Training Institute<\/p>\r\n <\/footer>\r\n\r\n \r\n <div class=\"toast\" id=\"toast\">Thank you \u2014 your responses have been recorded.<\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"summary-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3 class=\"modal-title\">Form Submission Summary<\/h3>\r\n <\/div>\r\n <div class=\"modal-body\" id=\"summary-content\">\r\n \r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn-secondary\" id=\"download-json\">Download JSON<\/button>\r\n <button type=\"button\" class=\"btn-secondary\" id=\"print-pdf\">Print PDF<\/button>\r\n <a href=\"https:\/\/calendly.com\/turningpoint-xyz\/30min\" target=\"_blank\" class=\"btn-consultation\" id=\"modal-schedule-consultation\">Schedule a Consultation<\/a>\r\n <button type=\"button\" class=\"btn-primary\" id=\"close-modal\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Form data object\r\n let formData = {};\r\n\r\n \/\/ DOM elements\r\n const form = document.getElementById('intake-form');\r\n const saveButton = document.getElementById('save-later');\r\n const toast = document.getElementById('toast');\r\n const modal = document.getElementById('summary-modal');\r\n const summaryContent = document.getElementById('summary-content');\r\n const closeModalButton = document.getElementById('close-modal');\r\n const downloadJsonButton = document.getElementById('download-json');\r\n const printPdfButton = document.getElementById('print-pdf');\r\n const progressSegments = document.querySelectorAll('.progress-segment');\r\n const scheduleConsultationButton = document.getElementById('schedule-consultation');\r\n const modalScheduleConsultationButton = document.getElementById('modal-schedule-consultation');\r\n\r\n \/\/ Conditional field handling\r\n document.getElementById('existing-program-yes').addEventListener('change', function() {\r\n document.getElementById('existing-program-details').classList.toggle('show', this.checked);\r\n });\r\n\r\n document.getElementById('internal-support-yes').addEventListener('change', function() {\r\n document.getElementById('internal-support-details').classList.toggle('show', this.checked);\r\n });\r\n\r\n \/\/ Progress bar update on scroll\r\n function updateProgressBar() {\r\n const sections = document.querySelectorAll('.form-section');\r\n const scrollPosition = window.scrollY + 200;\r\n \r\n sections.forEach((section, index) => {\r\n const sectionTop = section.offsetTop;\r\n if (scrollPosition >= sectionTop) {\r\n progressSegments.forEach((segment, i) => {\r\n segment.classList.toggle('active', i <= index);\r\n });\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener('scroll', updateProgressBar);\r\n\r\n \/\/ Save data to localStorage\r\n function saveToLocalStorage() {\r\n const formData = new FormData(form);\r\n const data = {};\r\n \r\n \/\/ Process regular form fields\r\n for (let [key, value] of formData.entries()) {\r\n if (data[key]) {\r\n if (Array.isArray(data[key])) {\r\n data[key].push(value);\r\n } else {\r\n data[key] = [data[key], value];\r\n }\r\n } else {\r\n data[key] = value;\r\n }\r\n }\r\n \r\n \/\/ Process checkboxes\r\n const checkboxes = form.querySelectorAll('input[type=\"checkbox\"]:checked');\r\n checkboxes.forEach(checkbox => {\r\n const name = checkbox.name;\r\n if (data[name]) {\r\n if (Array.isArray(data[name])) {\r\n data[name].push(checkbox.value);\r\n } else {\r\n data[name] = [data[name], checkbox.value];\r\n }\r\n } else {\r\n data[name] = checkbox.value;\r\n }\r\n });\r\n \r\n localStorage.setItem('tp-onboarding-intake-v1', JSON.stringify(data));\r\n showToast('Your progress has been saved.');\r\n }\r\n\r\n \/\/ Show toast notification\r\n function showToast(message) {\r\n toast.textContent = message;\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 3000);\r\n }\r\n\r\n \/\/ Collect form data\r\n function collectFormData() {\r\n const data = {};\r\n \r\n \/\/ Process text inputs, selects, and textareas\r\n const textInputs = form.querySelectorAll('input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"number\"], select, textarea');\r\n textInputs.forEach(input => {\r\n if (input.value.trim() !== '') {\r\n data[input.name] = input.value;\r\n }\r\n });\r\n \r\n \/\/ Process radio buttons\r\n const radioGroups = {};\r\n const radioButtons = form.querySelectorAll('input[type=\"radio\"]:checked');\r\n radioButtons.forEach(radio => {\r\n radioGroups[radio.name] = radio.value;\r\n });\r\n Object.assign(data, radioGroups);\r\n \r\n \/\/ Process checkboxes\r\n const checkboxGroups = {};\r\n const checkboxes = form.querySelectorAll('input[type=\"checkbox\"]:checked');\r\n checkboxes.forEach(checkbox => {\r\n if (checkboxGroups[checkbox.name]) {\r\n if (Array.isArray(checkboxGroups[checkbox.name])) {\r\n checkboxGroups[checkbox.name].push(checkbox.value);\r\n } else {\r\n checkboxGroups[checkbox.name] = [checkboxGroups[checkbox.name], checkbox.value];\r\n }\r\n } else {\r\n checkboxGroups[checkbox.name] = checkbox.value;\r\n }\r\n });\r\n Object.assign(data, checkboxGroups);\r\n \r\n return data;\r\n }\r\n\r\n \/\/ Generate summary HTML\r\n function generateSummaryHTML(data) {\r\n let html = '';\r\n \r\n \/\/ Company Information\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Company Information<\/h4>';\r\n if (data['company-name']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Company Name:<\/span> <span class=\"summary-value\">${data['company-name']}<\/span><\/div>`;\r\n if (data.industry) html += `<div class=\"summary-item\"><span class=\"summary-label\">Industry:<\/span> <span class=\"summary-value\">${data.industry}<\/span><\/div>`;\r\n if (data['company-size']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Company Size:<\/span> <span class=\"summary-value\">${data['company-size']}<\/span><\/div>`;\r\n if (data['contact-person']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Contact Person:<\/span> <span class=\"summary-value\">${data['contact-person']}<\/span><\/div>`;\r\n if (data['contact-email']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Email:<\/span> <span class=\"summary-value\">${data['contact-email']}<\/span><\/div>`;\r\n if (data['contact-phone']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Phone:<\/span> <span class=\"summary-value\">${data['contact-phone']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Hiring & Onboarding Context\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Hiring & Onboarding Context<\/h4>';\r\n if (data.positions) html += `<div class=\"summary-item\"><span class=\"summary-label\">Positions:<\/span> <span class=\"summary-value\">${data.positions}<\/span><\/div>`;\r\n if (data['hire-frequency']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Hiring Frequency:<\/span> <span class=\"summary-value\">${data['hire-frequency']}<\/span><\/div>`;\r\n if (data['existing-program']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Existing Program:<\/span> <span class=\"summary-value\">${data['existing-program']}<\/span><\/div>`;\r\n if (data['program-description']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Program Description:<\/span> <span class=\"summary-value\">${data['program-description']}<\/span><\/div>`;\r\n if (data['onboarding-challenges']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Challenges:<\/span> <span class=\"summary-value\">${data['onboarding-challenges']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Training Objectives\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Training Objectives<\/h4>';\r\n if (data.skills) {\r\n const skills = Array.isArray(data.skills) ? data.skills.join(', ') : data.skills;\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Skills:<\/span> <span class=\"summary-value\">${skills}<\/span><\/div>`;\r\n }\r\n if (data.timeline) html += `<div class=\"summary-item\"><span class=\"summary-label\">Timeline:<\/span> <span class=\"summary-value\">${data.timeline}<\/span><\/div>`;\r\n if (data['specific-objectives']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Specific Objectives:<\/span> <span class=\"summary-value\">${data['specific-objectives']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Delivery Preferences\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Delivery Preferences<\/h4>';\r\n if (data['delivery-methods']) {\r\n const methods = Array.isArray(data['delivery-methods']) ? data['delivery-methods'].join(', ') : data['delivery-methods'];\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Delivery Methods:<\/span> <span class=\"summary-value\">${methods}<\/span><\/div>`;\r\n }\r\n if (data['training-duration']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Duration:<\/span> <span class=\"summary-value\">${data['training-duration']}<\/span><\/div>`;\r\n if (data['tech-requirements']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Tech Requirements:<\/span> <span class=\"summary-value\">${data['tech-requirements']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Program Logistics & Support\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Program Logistics & Support<\/h4>';\r\n if (data['trainee-count']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Trainee Count:<\/span> <span class=\"summary-value\">${data['trainee-count']}<\/span><\/div>`;\r\n if (data['training-location']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Location:<\/span> <span class=\"summary-value\">${data['training-location']}<\/span><\/div>`;\r\n if (data['internal-support']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Internal Support:<\/span> <span class=\"summary-value\">${data['internal-support']}<\/span><\/div>`;\r\n if (data['support-description']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Support Description:<\/span> <span class=\"summary-value\">${data['support-description']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Success Criteria & KPIs\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Success Criteria & KPIs<\/h4>';\r\n if (data['success-metrics']) {\r\n const metrics = Array.isArray(data['success-metrics']) ? data['success-metrics'].join(', ') : data['success-metrics'];\r\n html += `<div class=\"summary-item\"><span class=\"summary-label\">Success Metrics:<\/span> <span class=\"summary-value\">${metrics}<\/span><\/div>`;\r\n }\r\n if (data['target-metrics']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Target Metrics:<\/span> <span class=\"summary-value\">${data['target-metrics']}<\/span><\/div>`;\r\n if (data['reporting-needs']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Reporting Needs:<\/span> <span class=\"summary-value\">${data['reporting-needs']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Budget & Investment\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Budget & Investment<\/h4>';\r\n if (data['budget-range']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Budget Range:<\/span> <span class=\"summary-value\">${data['budget-range']}<\/span><\/div>`;\r\n if (data['budget-considerations']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Budget Considerations:<\/span> <span class=\"summary-value\">${data['budget-considerations']}<\/span><\/div>`;\r\n if (data['roi-expectations']) html += `<div class=\"summary-item\"><span class=\"summary-label\">ROI Expectations:<\/span> <span class=\"summary-value\">${data['roi-expectations']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n \/\/ Additional Notes & Special Requests\r\n html += '<div class=\"summary-section\">';\r\n html += '<h4 class=\"summary-section-title\">Additional Notes & Special Requests<\/h4>';\r\n if (data['additional-notes']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Additional Notes:<\/span> <span class=\"summary-value\">${data['additional-notes']}<\/span><\/div>`;\r\n if (data['timeline-start']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Timeline Start:<\/span> <span class=\"summary-value\">${data['timeline-start']}<\/span><\/div>`;\r\n if (data['decision-makers']) html += `<div class=\"summary-item\"><span class=\"summary-label\">Decision Makers:<\/span> <span class=\"summary-value\">${data['decision-makers']}<\/span><\/div>`;\r\n html += '<\/div>';\r\n \r\n return html;\r\n }\r\n\r\n \/\/ Download data as JSON\r\n function downloadJson() {\r\n const dataStr = JSON.stringify(formData, null, 2);\r\n const dataUri = 'data:application\/json;charset=utf-8,'+ encodeURIComponent(dataStr);\r\n \r\n const exportFileDefaultName = 'client-discovery-questionnaire.json';\r\n \r\n const linkElement = document.createElement('a');\r\n linkElement.setAttribute('href', dataUri);\r\n linkElement.setAttribute('download', exportFileDefaultName);\r\n linkElement.click();\r\n }\r\n\r\n \/\/ Print as PDF\r\n function printPdf() {\r\n window.print();\r\n }\r\n\r\n \/\/ Event listeners\r\n saveButton.addEventListener('click', saveToLocalStorage);\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ Collect form data\r\n formData = collectFormData();\r\n \r\n \/\/ Show toast notification\r\n showToast('Thank you \u2014 your responses have been recorded.');\r\n \r\n \/\/ Generate and show summary\r\n summaryContent.innerHTML = generateSummaryHTML(formData);\r\n modal.classList.add('show');\r\n \r\n \/\/ Show the schedule consultation button\r\n scheduleConsultationButton.classList.add('show');\r\n modalScheduleConsultationButton.classList.add('show');\r\n \r\n \/\/ Submit the form to Formspree\r\n fetch(form.action, {\r\n method: 'POST',\r\n body: new FormData(form),\r\n headers: {\r\n 'Accept': 'application\/json'\r\n }\r\n })\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok');\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n console.log('Form submitted successfully:', data);\r\n })\r\n .catch(error => {\r\n console.error('Error submitting form:', error);\r\n });\r\n });\r\n\r\n closeModalButton.addEventListener('click', function() {\r\n modal.classList.remove('show');\r\n });\r\n\r\n downloadJsonButton.addEventListener('click', downloadJson);\r\n printPdfButton.addEventListener('click', printPdf);\r\n\r\n \/\/ Load saved data on page load\r\n window.addEventListener('DOMContentLoaded', function() {\r\n const savedData = localStorage.getItem('tp-onboarding-intake-v1');\r\n if (savedData) {\r\n const data = JSON.parse(savedData);\r\n \r\n \/\/ Restore text inputs, selects, and textareas\r\n Object.keys(data).forEach(key => {\r\n const input = form.querySelector(`[name=\"${key}\"]`);\r\n if (input && (input.type === 'text' || input.type === 'email' || input.type === 'tel' || input.type === 'number' || input.tagName === 'SELECT' || input.tagName === 'TEXTAREA')) {\r\n input.value = data[key];\r\n }\r\n });\r\n \r\n \/\/ Restore radio buttons\r\n Object.keys(data).forEach(key => {\r\n const radio = form.querySelector(`input[type=\"radio\"][name=\"${key}\"][value=\"${data[key]}\"]`);\r\n if (radio) {\r\n radio.checked = true;\r\n \/\/ Trigger change event for conditional fields\r\n radio.dispatchEvent(new Event('change'));\r\n }\r\n });\r\n \r\n \/\/ Restore checkboxes\r\n Object.keys(data).forEach(key => {\r\n if (Array.isArray(data[key])) {\r\n data[key].forEach(value => {\r\n const checkbox = form.querySelector(`input[type=\"checkbox\"][name=\"${key}\"][value=\"${value}\"]`);\r\n if (checkbox) {\r\n checkbox.checked = true;\r\n }\r\n });\r\n } else {\r\n const checkbox = form.querySelector(`input[type=\"checkbox\"][name=\"${key}\"][value=\"${data[key]}\"]`);\r\n if (checkbox) {\r\n checkbox.checked = true;\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n \/\/ Close modal when clicking outside\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n modal.classList.remove('show');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Client Discovery Questionnaire: Onboarding-to-Employment Training Program Turning Point Training Institute Client Discovery Questionnaire: Onboarding-to-Employment Training Program We’ll use this to tailor an onboarding-to-employment program that makes trainees job-ready. Company Information Company Name Industry Company Size Select size1-10 employees11-50 employees51-200 employees201-1000 employees1000+ employees Contact Person Email Phone Hiring & Onboarding Context Positions you typically hire for…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-16643","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages\/16643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/comments?post=16643"}],"version-history":[{"count":0,"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/pages\/16643\/revisions"}],"wp:attachment":[{"href":"https:\/\/turning-point.ae\/ar\/wp-json\/wp\/v2\/media?parent=16643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}