{"id":1467,"date":"2026-02-19T20:17:29","date_gmt":"2026-02-19T20:17:29","guid":{"rendered":"https:\/\/gophineservices.co.ug\/?page_id=1467"},"modified":"2026-02-20T18:34:45","modified_gmt":"2026-02-20T18:34:45","slug":"submit","status":"publish","type":"page","link":"https:\/\/gophineservices.co.ug\/index.php\/submit\/","title":{"rendered":"submit"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Gophine Services \u00b7 application form<\/title>\r\n <style>\r\n \/* ----- COLOR PALETTE (matching careers page) ----- *\/\r\n :root {\r\n --primary: #004d99;\r\n --primary-light: #3366aa;\r\n --secondary: #4CAF50;\r\n --secondary-light: #6fbf73;\r\n --accent: #FF6B35;\r\n --accent-light: #ff8c5a;\r\n --light: #ffffff;\r\n --light-gray: #f8f9fa;\r\n --medium-gray: #e9ecef;\r\n --dark: #2c3e50;\r\n --text: #333333;\r\n --error: #dc3545;\r\n --success: #28a745;\r\n --success-light: #d4edda;\r\n --border-radius: 1.5rem;\r\n --transition: all 0.2s ease;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n line-height: 1.5;\r\n color: var(--text);\r\n min-height: 100vh;\r\n position: relative;\r\n \r\n background-image: url('https:\/\/gophineservices.co.ug\/wp-content\/uploads\/2026\/02\/career-background.png');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-color: var(--light-gray);\r\n }\r\n\r\n \/* Light overlay *\/\r\n body::before {\r\n content: '';\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(255, 255, 255, 0.85);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .application-container {\r\n max-width: 800px;\r\n width: 100%;\r\n margin: 2rem auto;\r\n padding: 1.5rem;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Header *\/\r\n .form-header {\r\n background: var(--light);\r\n border-radius: var(--border-radius);\r\n padding: 2rem;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 15px 30px -12px rgba(0,77,153,0.2);\r\n border-left: 6px solid var(--accent);\r\n }\r\n\r\n .form-header h1 {\r\n font-size: 2.2rem;\r\n font-weight: 600;\r\n color: var(--primary);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .form-header p {\r\n color: var(--dark);\r\n font-size: 1rem;\r\n opacity: 0.9;\r\n }\r\n\r\n .form-header .job-badge {\r\n display: inline-block;\r\n background: var(--primary-light);\r\n color: white;\r\n padding: 0.3rem 1.2rem;\r\n border-radius: 30px;\r\n font-size: 0.9rem;\r\n margin-top: 1rem;\r\n }\r\n\r\n \/* Form card *\/\r\n .form-card {\r\n background: var(--light);\r\n border-radius: var(--border-radius);\r\n padding: 2.5rem;\r\n box-shadow: 0 20px 40px -15px rgba(0,77,153,0.25);\r\n border: 1px solid var(--medium-gray);\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 1.8rem;\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n label {\r\n display: block;\r\n margin-bottom: 0.5rem;\r\n font-weight: 500;\r\n color: var(--dark);\r\n font-size: 0.95rem;\r\n }\r\n\r\n label span {\r\n color: var(--accent);\r\n margin-left: 2px;\r\n }\r\n\r\n .required-note {\r\n font-size: 0.85rem;\r\n color: var(--dark);\r\n opacity: 0.7;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n input, select, textarea {\r\n width: 100%;\r\n padding: 0.9rem 1.2rem;\r\n border: 1.5px solid var(--medium-gray);\r\n border-radius: 1rem;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n background: var(--light-gray);\r\n }\r\n\r\n input:focus, select:focus, textarea:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(0,77,153,0.1);\r\n }\r\n\r\n input.error, select.error, textarea.error {\r\n border-color: var(--error);\r\n }\r\n\r\n .error-message {\r\n color: var(--error);\r\n font-size: 0.85rem;\r\n margin-top: 0.3rem;\r\n display: none;\r\n }\r\n\r\n .error-message.show {\r\n display: block;\r\n }\r\n\r\n \/* File upload area *\/\r\n .file-upload-area {\r\n border: 2px dashed var(--primary-light);\r\n border-radius: 1.5rem;\r\n padding: 2rem;\r\n text-align: center;\r\n background: var(--light-gray);\r\n cursor: pointer;\r\n transition: var(--transition);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .file-upload-area:hover {\r\n border-color: var(--primary);\r\n background: white;\r\n }\r\n\r\n .file-upload-area.dragover {\r\n border-color: var(--accent);\r\n background: rgba(255,107,53,0.05);\r\n }\r\n\r\n .file-upload-area svg {\r\n width: 48px;\r\n height: 48px;\r\n stroke: var(--primary);\r\n stroke-width: 1.5;\r\n fill: none;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .file-upload-area p {\r\n color: var(--dark);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .file-upload-area small {\r\n color: var(--dark);\r\n opacity: 0.7;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .file-list {\r\n margin-top: 1rem;\r\n }\r\n\r\n .file-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: var(--light-gray);\r\n padding: 0.8rem 1.2rem;\r\n border-radius: 2rem;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .file-item span {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .file-item button {\r\n background: none;\r\n border: none;\r\n color: var(--error);\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n padding: 0 0.5rem;\r\n }\r\n\r\n .file-item button:hover {\r\n color: #ff0000;\r\n }\r\n\r\n \/* Position selection chips *\/\r\n .position-chips {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .position-chip {\r\n padding: 0.8rem 1.5rem;\r\n border: 1.5px solid var(--medium-gray);\r\n border-radius: 2rem;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-weight: 500;\r\n user-select: none;\r\n }\r\n\r\n .position-chip:hover {\r\n border-color: var(--primary-light);\r\n background: var(--light-gray);\r\n }\r\n\r\n .position-chip.selected {\r\n background: var(--primary);\r\n color: white;\r\n border-color: var(--primary);\r\n }\r\n\r\n \/* Submit button *\/\r\n .submit-btn {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 1.2rem 2rem;\r\n border-radius: 3rem;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n margin-top: 2rem;\r\n }\r\n\r\n .submit-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: white;\r\n stroke-width: 2;\r\n fill: none;\r\n }\r\n\r\n .submit-btn:hover {\r\n background: var(--primary-light);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px -8px var(--primary);\r\n }\r\n\r\n .submit-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* Enhanced Success message *\/\r\n .success-message {\r\n background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n color: white;\r\n padding: 2.5rem 2rem;\r\n border-radius: 2rem;\r\n text-align: center;\r\n margin-bottom: 1.5rem;\r\n display: none;\r\n box-shadow: 0 20px 40px rgba(40, 167, 69, 0.3);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n backdrop-filter: blur(5px);\r\n position: relative;\r\n animation: slideIn 0.5s ease;\r\n }\r\n\r\n @keyframes slideIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .success-message.show {\r\n display: block;\r\n }\r\n\r\n .success-message svg {\r\n width: 80px;\r\n height: 80px;\r\n stroke: white;\r\n stroke-width: 1.5;\r\n fill: none;\r\n margin-bottom: 1.5rem;\r\n background: rgba(255,255,255,0.2);\r\n padding: 1rem;\r\n border-radius: 50%;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .success-message h3 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n }\r\n\r\n .success-message p {\r\n font-size: 1.1rem;\r\n margin-bottom: 2rem;\r\n opacity: 0.95;\r\n line-height: 1.6;\r\n max-width: 400px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .success-actions {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .close-success {\r\n background: rgba(255,255,255,0.25);\r\n color: white;\r\n border: 2px solid rgba(255,255,255,0.5);\r\n padding: 0.8rem 2rem;\r\n border-radius: 3rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n backdrop-filter: blur(5px);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .close-success:hover {\r\n background: rgba(255,255,255,0.4);\r\n border-color: white;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .redirect-btn {\r\n background: white;\r\n color: var(--success);\r\n border: none;\r\n padding: 0.8rem 2rem;\r\n border-radius: 3rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n text-decoration: none;\r\n }\r\n\r\n .redirect-btn:hover {\r\n background: var(--light-gray);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .redirect-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke: var(--success);\r\n stroke-width: 2;\r\n fill: none;\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n box-shadow: none;\r\n }\r\n\r\n \/* Loading spinner *\/\r\n .spinner {\r\n display: none;\r\n width: 20px;\r\n height: 20px;\r\n border: 3px solid rgba(255,255,255,0.3);\r\n border-radius: 50%;\r\n border-top-color: white;\r\n animation: spin 1s ease-in-out infinite;\r\n }\r\n\r\n .submit-btn.loading .spinner {\r\n display: inline-block;\r\n }\r\n\r\n .submit-btn.loading span {\r\n display: none;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 600px) {\r\n .application-container { padding: 1rem; }\r\n .form-card { padding: 1.5rem; }\r\n .form-row { grid-template-columns: 1fr; gap: 1rem; }\r\n .position-chips { flex-direction: column; }\r\n .position-chip { text-align: center; }\r\n .success-message h3 { font-size: 1.5rem; }\r\n .success-message svg { width: 60px; height: 60px; }\r\n .success-actions { flex-direction: column; }\r\n .close-success, .redirect-btn { width: 100%; justify-content: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"application-container\">\r\n <!-- Header -->\r\n <div class=\"form-header\">\r\n <h1>Submit your application<\/h1>\r\n <p>Join the Gophine Services creative team. Fill out the form below and upload your portfolio\/resume.<\/p>\r\n <div class=\"job-badge\" id=\"selectedJobDisplay\">Select a position below<\/div>\r\n <\/div>\r\n\r\n <!-- Enhanced Success message with close button and redirect -->\r\n <div class=\"success-message\" id=\"successMessage\">\r\n <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\r\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n <\/svg>\r\n <h3>Application Submitted!<\/h3>\r\n <p>Thank you for applying to Gophine Services. We'll review your application and get back to you within 3-5 business days.<\/p>\r\n <div class=\"success-actions\">\r\n <button class=\"close-success\" id=\"closeSuccessBtn\">\r\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\r\n <\/svg>\r\n Close\r\n <\/button>\r\n <a href=\"https:\/\/gophineservices.co.ug\" class=\"redirect-btn\" id=\"redirectBtn\">\r\n <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\r\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\r\n <polyline points=\"15 3 21 3 21 9\"\/>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\r\n <\/svg>\r\n Visit Gophine Services\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Main form -->\r\n <div class=\"form-card\" id=\"applicationForm\">\r\n <div class=\"required-note\">* Required fields<\/div>\r\n\r\n <!-- Position selection -->\r\n <div class=\"form-group\">\r\n <label>Position applying for <span>*<\/span><\/label>\r\n <div class=\"position-chips\" id=\"positionChips\">\r\n <div class=\"position-chip\" data-position=\"Graphics Designer\">Graphics Designer<\/div>\r\n <div class=\"position-chip\" data-position=\"Photo & Video Editor\">Photo & Video Editor<\/div>\r\n <div class=\"position-chip\" data-position=\"Printing Assistant\">Printing Assistant<\/div>\r\n <\/div>\r\n <div class=\"error-message\" id=\"positionError\">Please select a position<\/div>\r\n <\/div>\r\n\r\n <!-- Name -->\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label>First name <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"firstName\" placeholder=\"Enter your first name\">\r\n <div class=\"error-message\" id=\"firstNameError\">First name is required<\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Last name <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"lastName\" placeholder=\"Enter your last name\">\r\n <div class=\"error-message\" id=\"lastNameError\">Last name is required<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Email & Phone -->\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label>Email address <span>*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"you@example.com\">\r\n <div class=\"error-message\" id=\"emailError\">Valid email is required<\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Phone number<\/label>\r\n <input type=\"tel\" id=\"phone\" placeholder=\"+256 ...\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Portfolio\/LinkedIn -->\r\n <div class=\"form-group\">\r\n <label>Portfolio \/ LinkedIn \/ Website<\/label>\r\n <input type=\"url\" id=\"portfolio\" placeholder=\"https:\/\/...\">\r\n <\/div>\r\n\r\n <!-- Cover letter -->\r\n <div class=\"form-group\">\r\n <label>Cover letter \/ Application letter to express your interest <span>*<\/span><\/label>\r\n <textarea id=\"coverLetter\" rows=\"5\" placeholder=\"Tell us why you're interested in this role and what you'd bring to the team...\"><\/textarea>\r\n <div class=\"error-message\" id=\"coverLetterError\">Cover letter is required<\/div>\r\n <\/div>\r\n\r\n <!-- File upload -->\r\n <div class=\"form-group\">\r\n <label>Resume \/ CV <span>*<\/span><\/label>\r\n <div class=\"file-upload-area\" id=\"fileUploadArea\">\r\n <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\r\n <polyline points=\"17 8 12 3 7 8\"\/>\r\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/>\r\n <\/svg>\r\n <p>Drag & drop your file here or click to browse<\/p>\r\n <small>Supports PDF, DOC, DOCX (max 10MB)<\/small>\r\n <\/div>\r\n <input type=\"file\" id=\"fileInput\" accept=\".pdf,.doc,.docx\" style=\"display: none;\">\r\n <div class=\"file-list\" id=\"fileList\"><\/div>\r\n <div class=\"error-message\" id=\"fileError\">Please upload your resume\/CV<\/div>\r\n <\/div>\r\n\r\n <!-- Portfolio file upload (optional) -->\r\n <div class=\"form-group\">\r\n <label>Portfolio \/ Work samples (optional)<\/label>\r\n <div class=\"file-upload-area\" id=\"portfolioUploadArea\">\r\n <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\r\n <polyline points=\"17 8 12 3 7 8\"\/>\r\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/>\r\n <\/svg>\r\n <p>Upload portfolio samples (optional)<\/p>\r\n <small>ZIP or PDF, max 25MB<\/small>\r\n <\/div>\r\n <input type=\"file\" id=\"portfolioFileInput\" accept=\".pdf,.doc,.docx,.zip\" style=\"display: none;\">\r\n <div class=\"file-list\" id=\"portfolioFileList\"><\/div>\r\n <\/div>\r\n\r\n <!-- Submit button -->\r\n <button class=\"submit-btn\" id=\"submitBtn\">\r\n <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/>\r\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/>\r\n <\/svg>\r\n <span>Submit application<\/span>\r\n <div class=\"spinner\"><\/div>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ---------- ANTI-DEV TOOLS (unchanged) ----------\r\n document.addEventListener('contextmenu', e => e.preventDefault());\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'F12' || e.keyCode === 123) e.preventDefault();\r\n if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i' || e.key === 'J' || e.key === 'j' || e.key === 'C' || e.key === 'c')) e.preventDefault();\r\n if (e.ctrlKey && (e.key === 'u' || e.key === 'U')) e.preventDefault();\r\n });\r\n\r\n \/\/ ---------- CONFIG ----------\r\n const GOOGLE_SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzs4Bd5SIbdNO8zHW0xQ8xfze4oCoq6FCOTzrvhOPsg4e_Yr26gU-Vch9GlLFeavcrh\/exec';\r\n\r\n \/\/ ---------- STATE ----------\r\n let selectedPosition = '';\r\n let resumeFile = null;\r\n let portfolioFile = null;\r\n\r\n \/\/ ---------- DOM ELEMENTS ----------\r\n const positionChips = document.querySelectorAll('.position-chip');\r\n const selectedJobDisplay = document.getElementById('selectedJobDisplay');\r\n const fileUploadArea = document.getElementById('fileUploadArea');\r\n const fileInput = document.getElementById('fileInput');\r\n const fileList = document.getElementById('fileList');\r\n const portfolioUploadArea = document.getElementById('portfolioUploadArea');\r\n const portfolioFileInput = document.getElementById('portfolioFileInput');\r\n const portfolioFileList = document.getElementById('portfolioFileList');\r\n const submitBtn = document.getElementById('submitBtn');\r\n const successMessage = document.getElementById('successMessage');\r\n const applicationForm = document.getElementById('applicationForm');\r\n const closeSuccessBtn = document.getElementById('closeSuccessBtn');\r\n const redirectBtn = document.getElementById('redirectBtn');\r\n\r\n \/\/ ---------- POSITION CHIPS ----------\r\n positionChips.forEach(chip => {\r\n chip.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n positionChips.forEach(c => c.classList.remove('selected'));\r\n chip.classList.add('selected');\r\n selectedPosition = chip.dataset.position;\r\n selectedJobDisplay.textContent = selectedPosition;\r\n document.getElementById('positionError').classList.remove('show');\r\n });\r\n });\r\n\r\n \/\/ ---------- RESUME UPLOAD ----------\r\n fileUploadArea.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n fileInput.click();\r\n });\r\n fileUploadArea.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n fileUploadArea.classList.add('dragover');\r\n });\r\n fileUploadArea.addEventListener('dragleave', () => {\r\n fileUploadArea.classList.remove('dragover');\r\n });\r\n fileUploadArea.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n fileUploadArea.classList.remove('dragover');\r\n const file = e.dataTransfer.files[0];\r\n if (file) handleResumeFile(file);\r\n });\r\n fileInput.addEventListener('change', (e) => {\r\n if (e.target.files[0]) handleResumeFile(e.target.files[0]);\r\n });\r\n\r\n \/\/ ---------- PORTFOLIO UPLOAD ----------\r\n portfolioUploadArea.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n portfolioFileInput.click();\r\n });\r\n portfolioUploadArea.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n portfolioUploadArea.classList.add('dragover');\r\n });\r\n portfolioUploadArea.addEventListener('dragleave', () => {\r\n portfolioUploadArea.classList.remove('dragover');\r\n });\r\n portfolioUploadArea.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n portfolioUploadArea.classList.remove('dragover');\r\n const file = e.dataTransfer.files[0];\r\n if (file) handlePortfolioFile(file);\r\n });\r\n portfolioFileInput.addEventListener('change', (e) => {\r\n if (e.target.files[0]) handlePortfolioFile(e.target.files[0]);\r\n });\r\n\r\n \/\/ ---------- FILE HANDLERS ----------\r\n function handleResumeFile(file) {\r\n if (file.size > 10 * 1024 * 1024) {\r\n alert('File too large. Maximum size is 10MB.');\r\n return;\r\n }\r\n resumeFile = file;\r\n displayFile(file, fileList, 'resume');\r\n document.getElementById('fileError').classList.remove('show');\r\n }\r\n\r\n function handlePortfolioFile(file) {\r\n if (file.size > 25 * 1024 * 1024) {\r\n alert('File too large. Maximum size is 25MB.');\r\n return;\r\n }\r\n portfolioFile = file;\r\n displayFile(file, portfolioFileList, 'portfolio');\r\n }\r\n\r\n function displayFile(file, container, type) {\r\n const fileItem = document.createElement('div');\r\n fileItem.className = 'file-item';\r\n fileItem.innerHTML = `\r\n <span>\ud83d\udcc4 ${file.name} (${(file.size \/ 1024).toFixed(1)} KB)<\/span>\r\n <button class=\"remove-file-btn\" data-type=\"${type}\">\u00d7<\/button>\r\n `;\r\n container.innerHTML = '';\r\n container.appendChild(fileItem);\r\n const removeBtn = fileItem.querySelector('.remove-file-btn');\r\n removeBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n if (type === 'resume') {\r\n resumeFile = null;\r\n fileInput.value = '';\r\n } else {\r\n portfolioFile = null;\r\n portfolioFileInput.value = '';\r\n }\r\n container.innerHTML = '';\r\n });\r\n }\r\n\r\n \/\/ ---------- VALIDATION ----------\r\n function validateForm() {\r\n let isValid = true;\r\n\r\n if (!selectedPosition) {\r\n document.getElementById('positionError').classList.add('show');\r\n isValid = false;\r\n } else {\r\n document.getElementById('positionError').classList.remove('show');\r\n }\r\n\r\n const firstName = document.getElementById('firstName').value.trim();\r\n if (!firstName) {\r\n document.getElementById('firstNameError').classList.add('show');\r\n document.getElementById('firstName').classList.add('error');\r\n isValid = false;\r\n } else {\r\n document.getElementById('firstNameError').classList.remove('show');\r\n document.getElementById('firstName').classList.remove('error');\r\n }\r\n\r\n const lastName = document.getElementById('lastName').value.trim();\r\n if (!lastName) {\r\n document.getElementById('lastNameError').classList.add('show');\r\n document.getElementById('lastName').classList.add('error');\r\n isValid = false;\r\n } else {\r\n document.getElementById('lastNameError').classList.remove('show');\r\n document.getElementById('lastName').classList.remove('error');\r\n }\r\n\r\n const email = document.getElementById('email').value.trim();\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!email || !emailRegex.test(email)) {\r\n document.getElementById('emailError').classList.add('show');\r\n document.getElementById('email').classList.add('error');\r\n isValid = false;\r\n } else {\r\n document.getElementById('emailError').classList.remove('show');\r\n document.getElementById('email').classList.remove('error');\r\n }\r\n\r\n const coverLetter = document.getElementById('coverLetter').value.trim();\r\n if (!coverLetter) {\r\n document.getElementById('coverLetterError').classList.add('show');\r\n document.getElementById('coverLetter').classList.add('error');\r\n isValid = false;\r\n } else {\r\n document.getElementById('coverLetterError').classList.remove('show');\r\n document.getElementById('coverLetter').classList.remove('error');\r\n }\r\n\r\n if (!resumeFile) {\r\n document.getElementById('fileError').classList.add('show');\r\n isValid = false;\r\n } else {\r\n document.getElementById('fileError').classList.remove('show');\r\n }\r\n\r\n return isValid;\r\n }\r\n\r\n \/\/ ---------- LIVE ERROR CLEAR ----------\r\n ['firstName', 'lastName', 'email', 'coverLetter'].forEach(id => {\r\n document.getElementById(id).addEventListener('input', function() {\r\n this.classList.remove('error');\r\n document.getElementById(id + 'Error').classList.remove('show');\r\n });\r\n });\r\n\r\n \/\/ ---------- FORM SUBMISSION ----------\r\n submitBtn.addEventListener('click', async (e) => {\r\n e.preventDefault();\r\n if (!validateForm()) {\r\n const firstError = document.querySelector('.error-message.show');\r\n if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n return;\r\n }\r\n\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n const toBase64 = file => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result.split(',')[1]);\r\n reader.onerror = error => reject(error);\r\n });\r\n\r\n const payload = {\r\n position: selectedPosition,\r\n firstName: document.getElementById('firstName').value.trim(),\r\n lastName: document.getElementById('lastName').value.trim(),\r\n email: document.getElementById('email').value.trim(),\r\n phone: document.getElementById('phone').value.trim(),\r\n portfolio: document.getElementById('portfolio').value.trim(),\r\n coverLetter: document.getElementById('coverLetter').value.trim(),\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n if (resumeFile) {\r\n payload.resumeData = await toBase64(resumeFile);\r\n payload.resumeName = resumeFile.name;\r\n }\r\n if (portfolioFile) {\r\n payload.portfolioData = await toBase64(portfolioFile);\r\n payload.portfolioName = portfolioFile.name;\r\n }\r\n\r\n await fetch(GOOGLE_SCRIPT_URL, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload)\r\n });\r\n\r\n \/\/ Show enhanced success message\r\n applicationForm.style.display = 'none';\r\n successMessage.classList.add('show');\r\n successMessage.scrollIntoView({ behavior: 'smooth' });\r\n\r\n } catch (error) {\r\n console.error(error);\r\n alert('Submission failed. Please check your file size and try again.');\r\n } finally {\r\n submitBtn.classList.remove('loading');\r\n submitBtn.disabled = false;\r\n }\r\n });\r\n\r\n \/\/ ---------- SUCCESS MESSAGE CONTROLS ----------\r\n \/\/ Close button - just hide the message and optionally show form again\r\n closeSuccessBtn.addEventListener('click', () => {\r\n successMessage.classList.remove('show');\r\n \/\/ Option to show form again, but we'll just keep success hidden\r\n \/\/ Could redirect or do nothing\r\n });\r\n\r\n \/\/ Redirect button - goes to gophineservices.co.ug\r\n redirectBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n window.location.href = 'https:\/\/gophineservices.co.ug';\r\n });\r\n\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gophine Services \u00b7 application form Submit your application Join the Gophine Services creative team. Fill out the form below and upload your portfolio\/resume. Select a position below Application Submitted! Thank you for applying to Gophine Services. We’ll review your application and get back to you within 3-5 business days. Close Visit Gophine Services * Required […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1467","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/comments?post=1467"}],"version-history":[{"count":16,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1467\/revisions"}],"predecessor-version":[{"id":1495,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1467\/revisions\/1495"}],"wp:attachment":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/media?parent=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}