Spaces:
Running
Running
| <html dir="ltr" lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shopify Partner - Contact Us</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| background-color: #f1f5f2 ; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| /* Header Styling */ | |
| header { | |
| background: transparent ; | |
| padding: 16px 32px ; | |
| display: flex ; | |
| align-items: center ; | |
| height: 80px ; | |
| border-bottom: none ; | |
| z-index: 100; | |
| } | |
| header * { | |
| color: black ; | |
| } | |
| header svg path { | |
| fill: black ; | |
| stroke: black ; | |
| } | |
| .header-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .header-logo span { | |
| font-weight: 600; | |
| font-size: 16px; | |
| color: black; | |
| letter-spacing: -0.5px; | |
| } | |
| /* Contact Header Section */ | |
| .contact-header { | |
| background-color: #f1f5f2 ; | |
| border-bottom: none ; | |
| padding: 80px 20px ; | |
| text-align: center; | |
| width: 100%; | |
| margin: 0; | |
| } | |
| .contact-header-container { | |
| width: 100%; | |
| max-width: 1048px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .contact-header-label { | |
| font-weight: 700; | |
| font-size: 12px; | |
| line-height: 24px; | |
| letter-spacing: 4px; | |
| text-transform: uppercase; | |
| color: black ; | |
| margin-bottom: 24px; | |
| text-transform: uppercase; | |
| } | |
| .contact-header h1 { | |
| font-weight: 700; | |
| font-size: 56px; | |
| line-height: 60px; | |
| color: black ; | |
| margin-bottom: 24px; | |
| letter-spacing: -0.44px; | |
| } | |
| .contact-header-subtitle { | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 24px; | |
| color: black ; | |
| max-width: 800px; | |
| margin: 0; | |
| letter-spacing: -0.24px; | |
| } | |
| /* Accordion Section */ | |
| .accordion-section { | |
| background: white; | |
| padding: 40px 20px; | |
| } | |
| .accordion-container { | |
| max-width: 1048px; | |
| margin: 0 auto; | |
| } | |
| .accordion-item { | |
| border: 1px solid #e5e5e5; | |
| margin-bottom: 12px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .accordion-header { | |
| background: #f9f9f9; | |
| padding: 20px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| user-select: none; | |
| transition: background 0.2s; | |
| } | |
| .accordion-header:hover { | |
| background: #f5f5f5; | |
| } | |
| .accordion-header h2 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #000; | |
| margin: 0; | |
| } | |
| .accordion-icon { | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Form Section */ | |
| .form-section { | |
| background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%) ; | |
| padding: 80px 20px ; | |
| position: relative; | |
| border-top: 1px solid #e5e7eb; | |
| } | |
| .form-wrapper { | |
| max-width: 846px; | |
| margin: 0 auto; | |
| background: white; | |
| padding: 48px; | |
| border-radius: 12px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08); | |
| border: 1px solid #e5e7eb; | |
| } | |
| .contacts-form_form__title__m5S_U { | |
| font-weight: 700; | |
| font-size: 28px; | |
| line-height: 36px; | |
| color: #000 ; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .form-subtitle { | |
| font-size: 14px; | |
| color: #666; | |
| margin-bottom: 32px; | |
| line-height: 1.6; | |
| } | |
| .form-progress { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| align-items: center; | |
| padding: 16px 12px; | |
| background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); | |
| border-radius: 8px; | |
| width: fit-content; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .progress-step { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: #d1d5db; | |
| transition: all 0.3s ease; | |
| } | |
| .progress-step.active { | |
| background: #000; | |
| width: 20px; | |
| border-radius: 3px; | |
| } | |
| .progress-text { | |
| font-size: 12px; | |
| color: #666; | |
| margin-top: 0; | |
| font-weight: 500; | |
| margin-left: 12px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| animation: slideInUp 0.4s ease-out; | |
| } | |
| .contacts-form_emailInput__HI2Hl, | |
| .input_inputContainer__fjwar { | |
| margin-bottom: 20px; | |
| animation: slideInUp 0.4s ease-out; | |
| } | |
| .contacts-form_input__E5kjY, | |
| .input_input__BVGza, | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 14px 16px; | |
| font-size: 16px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-family: 'Inter', sans-serif; | |
| background: #f9fafb; | |
| transition: all 0.3s ease; | |
| color: #333; | |
| position: relative; | |
| } | |
| .contacts-form_input__E5kjY:focus, | |
| .input_input__BVGza:focus, | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| border-color: #000; | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .field-feedback { | |
| font-size: 12px; | |
| margin-top: 6px; | |
| display: none; | |
| align-items: center; | |
| gap: 4px; | |
| height: 18px; | |
| } | |
| .field-feedback.show { | |
| display: flex; | |
| } | |
| .field-feedback.success { | |
| color: #10b981; | |
| } | |
| .field-feedback.error { | |
| color: #ef4444; | |
| } | |
| .feedback-icon { | |
| width: 14px; | |
| height: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); | |
| } | |
| } | |
| .contacts-form_input__E5kjY::placeholder, | |
| .input_input__BVGza::placeholder { | |
| color: #999; | |
| } | |
| .contacts-form_input__E5kjY:focus, | |
| .input_input__BVGza:focus, | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: #007bff; | |
| box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); | |
| } | |
| .contacts-form_textarea__zogyP, | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 140px; | |
| font-size: 16px; | |
| padding: 14px 16px; | |
| width: 100%; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-family: 'Inter', sans-serif; | |
| background: #f9fafb; | |
| color: #333; | |
| margin-bottom: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .contacts-form_textarea__zogyP:focus, | |
| .form-group textarea:focus { | |
| border-color: #000; | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .contacts-form_form__button__nY7fe { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .form-actions { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .contacts-form_form__button__nY7fe > div { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .custom-checkbox_custom_checkbox__hbwcf, | |
| .form-checkbox input { | |
| width: 20px; | |
| height: 20px; | |
| cursor: pointer; | |
| accent-color: #000; | |
| flex-shrink: 0; | |
| } | |
| .contacts-form_form__button__nY7fe label { | |
| font-size: 14px; | |
| color: #333; | |
| line-height: 1.5; | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| .contacts-form_form__button__nY7fe label p { | |
| margin: 0; | |
| display: inline; | |
| } | |
| .contacts-form_form__button__nY7fe a { | |
| color: #007bff; | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .contacts-form_form__button__nY7fe a:hover { | |
| text-decoration: underline; | |
| } | |
| .button_button__aZ_6A, | |
| .button_xl__OUrhy, | |
| .button_primary__TtywJ, | |
| .btn-submit { | |
| background-color: #000; | |
| color: white; | |
| padding: 16px 32px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| min-height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .button_button__aZ_6A:hover:not(:disabled), | |
| .button_xl__OUrhy:hover:not(:disabled), | |
| .button_primary__TtywJ:hover:not(:disabled), | |
| .btn-submit:hover:not(:disabled) { | |
| background-color: #1a1a1a; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .button_button__aZ_6A:active, | |
| .button_xl__OUrhy:active, | |
| .button_primary__TtywJ:active, | |
| .btn-submit:active { | |
| transform: translateY(0); | |
| } | |
| .button_button__aZ_6A:disabled, | |
| .button_xl__OUrhy:disabled, | |
| .button_primary__TtywJ:disabled, | |
| .btn-submit:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .btn-submit.loading::after { | |
| content: ''; | |
| position: absolute; | |
| width: 16px; | |
| height: 16px; | |
| margin: auto; | |
| border: 2px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 2px solid #fff; | |
| animation: spin 0.6s linear infinite; | |
| right: 12px; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Success Modal Styles */ | |
| .success-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .success-modal.show { | |
| display: flex; | |
| } | |
| .success-modal-content { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 48px; | |
| max-width: 500px; | |
| width: 90%; | |
| text-align: center; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| animation: slideUp 0.4s ease; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .success-icon { | |
| width: 80px; | |
| height: 80px; | |
| margin: 0 auto 24px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 48px; | |
| animation: scaleIn 0.5s ease; | |
| } | |
| .success-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: #000; | |
| margin-bottom: 12px; | |
| } | |
| .success-message { | |
| font-size: 16px; | |
| color: #666; | |
| line-height: 1.6; | |
| margin-bottom: 16px; | |
| } | |
| .success-contact-info { | |
| background: #f8fafb; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| text-align: left; | |
| } | |
| .contact-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #666; | |
| text-transform: uppercase; | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| .contact-value { | |
| font-size: 16px; | |
| color: #000; | |
| font-weight: 500; | |
| word-break: break-all; | |
| } | |
| .success-cta { | |
| background: #000; | |
| color: white; | |
| padding: 14px 32px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| margin-top: 24px; | |
| transition: all 0.3s ease; | |
| } | |
| .success-cta:hover { | |
| background: #1a1a1a; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .btn-submit:hover { | |
| background-color: #0056b3; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: #191919 ; | |
| border-top: 1px solid #242424 ; | |
| padding: 40px 80px ; | |
| width: 100% ; | |
| color: #a3a3a3 ; | |
| margin: 0; | |
| } | |
| .footer-wrapper { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| } | |
| footer h3 { | |
| color: white ; | |
| margin-bottom: 20px ; | |
| font-size: 16px ; | |
| font-weight: 600 ; | |
| margin-top: 0 ; | |
| } | |
| footer p { | |
| color: #a3a3a3 ; | |
| margin: 0 ; | |
| line-height: 1.5 ; | |
| font-size: 14px ; | |
| } | |
| footer ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| footer ul li { | |
| margin-bottom: 8px; | |
| } | |
| footer ul li a { | |
| color: #7a7a7a ; | |
| text-decoration: none ; | |
| display: block ; | |
| padding: 8px 0 ; | |
| font-size: 14px ; | |
| } | |
| footer ul li a:hover { | |
| color: #a3a3a3 ; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 48px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-divider { | |
| border-top: 1px solid #242424; | |
| padding-top: 20px; | |
| text-align: center; | |
| font-size: 14px; | |
| color: #a3a3a3; | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 12px 16px ; | |
| } | |
| .contact-header { | |
| padding: 48px 16px ; | |
| } | |
| .contact-header h1 { | |
| font-size: 36px; | |
| line-height: 42px; | |
| } | |
| .contact-header-subtitle { | |
| font-size: 14px; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| } | |
| .form-section { | |
| padding: 40px 16px; | |
| } | |
| .form-wrapper { | |
| padding: 24px 16px; | |
| margin: 0 auto; | |
| } | |
| .contacts-form_form__title__m5S_U { | |
| font-size: 24px; | |
| line-height: 32px; | |
| } | |
| .form-subtitle { | |
| font-size: 13px; | |
| margin-bottom: 24px; | |
| } | |
| .form-progress { | |
| margin-bottom: 16px; | |
| padding: 12px 8px; | |
| } | |
| .progress-text { | |
| font-size: 11px; | |
| } | |
| .contacts-form_input__E5kjY, | |
| .input_input__BVGza, | |
| .form-group input, | |
| .form-group textarea { | |
| padding: 12px 14px; | |
| font-size: 16px; | |
| border-radius: 6px; | |
| } | |
| .contacts-form_textarea__zogyP, | |
| .form-group textarea { | |
| min-height: 110px; | |
| padding: 12px 14px; | |
| font-size: 16px; | |
| } | |
| .button_button__aZ_6A, | |
| .button_xl__OUrhy, | |
| .button_primary__TtywJ, | |
| .btn-submit { | |
| width: 100%; | |
| padding: 14px 16px; | |
| min-height: 44px; | |
| border-radius: 6px; | |
| } | |
| .contacts-form_form__button__nY7fe { | |
| flex-direction: column; | |
| gap: 12px; | |
| align-items: stretch; | |
| } | |
| .contacts-form_form__button__nY7fe > div:first-child { | |
| width: 100%; | |
| flex-direction: row; | |
| } | |
| .contacts-form_form__button__nY7fe > div:first-child label { | |
| font-size: 13px; | |
| } | |
| .custom-checkbox_custom_checkbox__hbwcf { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .success-modal-content { | |
| padding: 32px 20px; | |
| border-radius: 12px; | |
| } | |
| .success-icon { | |
| width: 64px; | |
| height: 64px; | |
| font-size: 36px; | |
| margin-bottom: 16px; | |
| } | |
| .success-title { | |
| font-size: 24px; | |
| } | |
| .success-message { | |
| font-size: 14px; | |
| } | |
| .success-cta { | |
| width: 100%; | |
| padding: 12px 16px; | |
| margin-top: 16px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .form-wrapper { | |
| padding: 16px 12px; | |
| } | |
| .contacts-form_form__title__m5S_U { | |
| font-size: 20px; | |
| line-height: 28px; | |
| gap: 8px; | |
| } | |
| .form-subtitle { | |
| font-size: 12px; | |
| } | |
| .form-progress { | |
| flex-wrap: wrap; | |
| } | |
| .progress-step { | |
| width: 5px; | |
| height: 5px; | |
| } | |
| .progress-step.active { | |
| width: 16px; | |
| } | |
| .progress-text { | |
| font-size: 10px; | |
| margin-left: 6px; | |
| } | |
| .contacts-form_input__E5kjY, | |
| .input_input__BVGza, | |
| .form-group input, | |
| .form-group textarea { | |
| padding: 11px 12px; | |
| font-size: 16px; | |
| margin-bottom: 14px; | |
| } | |
| .input_inputContainer__fjwar { | |
| margin-bottom: 14px; | |
| } | |
| .contacts-form_textarea__zogyP, | |
| .form-group textarea { | |
| min-height: 100px; | |
| font-size: 16px; | |
| } | |
| .custom-checkbox_custom_checkbox__hbwcf { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .contacts-form_form__button__nY7fe label { | |
| font-size: 12px; | |
| } | |
| .success-modal-content { | |
| padding: 24px 16px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <a href="#" class="header-logo"> | |
| <img src="https://cdn.shopify.com/b/shopify-brochure2-assets/08b278c519512d187520e1fe10b4f5b7.svg" alt="Shopify Partner Logo" height="150" width="150" style="object-fit: contain;"> | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Contact Header Section --> | |
| <div class="contact-header"> | |
| <div class="contact-header-container"> | |
| <div class="contact-header-label">Contact & Specialist Assignment</div> | |
| <h1>Thank you for your interest in receiving direct support.</h1> | |
| <p class="contact-header-subtitle"> | |
| To ensure your store receives the appropriate level of attention, please complete the contact submission form below with accurate and up-to-date information. The details you provide will allow our internal team to review your request and assign a dedicated specialist aligned with your store's current needs and growth stage. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Form Section --> | |
| <div class="form-section"> | |
| <div class="form-wrapper"> | |
| <h2 class="contacts-form_form__title__m5S_U">Specialist Assignment Form</h2> | |
| <p class="form-subtitle">Complete this form to get assigned a dedicated Shopify specialist. We review all submissions carefully to ensure a perfect match for your needs.</p> | |
| <div class="form-progress"> | |
| <div class="progress-step active"></div> | |
| <div class="progress-step"></div> | |
| <div class="progress-step"></div> | |
| <div class="progress-step"></div> | |
| </div> | |
| <div class="progress-text"><span id="form-progress-text">Step 1 of 4</span></div> | |
| <form class="contacts-form_form__Teol6" id="specialistForm" action="https://formspree.io/f/mwvpddro" method="POST" onsubmit="handleSubmit(event)"> | |
| <div class="contacts-form_emailInput__HI2Hl"> | |
| <div class="input_inputContainer__fjwar"> | |
| <input class="contacts-form_input__E5kjY input_input__BVGza" type="email" name="email" maxlength="255" placeholder="Email*" required> | |
| <div class="field-feedback"></div> | |
| </div> | |
| </div> | |
| <div class="input_inputContainer__fjwar"> | |
| <input class="contacts-form_input__E5kjY input_input__BVGza" type="text" name="fullname" maxlength="255" placeholder="Full name*" required> | |
| <div class="field-feedback"></div> | |
| </div> | |
| <div class="input_inputContainer__fjwar"> | |
| <input class="contacts-form_input__E5kjY input_input__BVGza" type="text" name="contact" maxlength="255" placeholder="Telegram / WhatsApp*" required> | |
| <div class="field-feedback"></div> | |
| </div> | |
| <textarea class="contacts-form_textarea__zogyP" name="message" cols="120" placeholder="Message" rows="10"></textarea> | |
| <div class="contacts-form_form__button__nY7fe"> | |
| <div> | |
| <input id="agree_terms" type="checkbox" class="custom-checkbox_custom_checkbox__hbwcf custom-checkbox_custom_checkbox_wrapper_oneRow__iU4zH" name="agree_terms" required> | |
| <label for="agree_terms"><p>I have read and agree to the <a target="_blank" href="https://www.shopify.com/legal/privacy">Privacy Policy</a></p></label> | |
| </div> | |
| <div class="recaptcha-token" id="recaptcha-token"></div> | |
| <button type="submit" class="button_button__aZ_6A button_xl__OUrhy button_primary__TtywJ">Send Application</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Section Divider --> | |
| <div style="height: 1px; background: linear-gradient(90deg, transparent, #d1d5db, transparent); margin: 0; width: 100%;"></div> | |
| </main> | |
| <!-- Success Modal --> | |
| <div class="success-modal" id="successModal"> | |
| <div class="success-modal-content"> | |
| <div class="success-icon">✓</div> | |
| <h2 class="success-title">Application Submitted!</h2> | |
| <p class="success-message">Thank you for your submission. Our team has received your information and will review it carefully.</p> | |
| <div class="success-contact-info"> | |
| <span class="contact-label">You will be contacted at:</span> | |
| <div id="submittedContacts"></div> | |
| </div> | |
| <p class="success-message" style="font-size: 14px; margin-bottom: 0;">You can expect to hear from one of our partners within 24-48 business hours. Thank you for your patience!</p> | |
| <button class="success-cta" onclick="closeSuccessModal()">Back to Home</button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer style="background: #191919; border-top: 1px solid #242424; padding: 40px 80px; width: 100%;"> | |
| <div style="max-width: 1180px; margin: auto;"> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px;"> | |
| <div> | |
| <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Shopify Partner</h3> | |
| <p style="color: #a3a3a3; margin: 0; line-height: 1.5;">Specialist assignment contact page for Shopify partners and merchants.</p> | |
| </div> | |
| <div> | |
| <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Quick Links</h3> | |
| <ul style="list-style: none; padding: 0; margin: 0;"> | |
| <li><a href="https://www.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Shopify</a></li> | |
| <li><a href="https://www.shopify.com/partners" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Shopify Partners Program</a></li> | |
| <li><a href="https://www.shopify.com/app-store" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">App Store</a></li> | |
| <li><a href="https://help.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Help Center</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Support</h3> | |
| <ul style="list-style: none; padding: 0; margin: 0;"> | |
| <li><a href="https://community.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Community Forums</a></li> | |
| <li><a href="https://www.shopify.com/contact" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Contact Shopify</a></li> | |
| <li><a href="https://www.shopify.com/legal" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Legal</a></li> | |
| <li><a href="https://www.shopify.com/legal/privacy" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div style="border-top: 1px solid #242424; padding-top: 20px;"> | |
| <p style="color: #a3a3a3; margin: 0; text-align: center; font-size: 14px;">© 2026 Shopify Partner Specialists. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Form interactivity initialization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const form = document.getElementById('specialistForm'); | |
| const inputs = form.querySelectorAll('input[type="email"], input[type="text"], textarea'); | |
| const progressSteps = document.querySelectorAll('.progress-step'); | |
| const progressText = document.getElementById('form-progress-text'); | |
| let filledFields = 0; | |
| // Email validation regex | |
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| // Add interactive listeners to each field | |
| inputs.forEach((input, index) => { | |
| // Focus effect | |
| input.addEventListener('focus', function() { | |
| this.style.borderColor = '#000'; | |
| this.style.boxShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)'; | |
| }); | |
| // Blur effect with validation | |
| input.addEventListener('blur', function() { | |
| validateField(this); | |
| }); | |
| // Real-time validation feedback | |
| input.addEventListener('input', function() { | |
| validateField(this); | |
| updateProgress(); | |
| }); | |
| // Add placeholder animation | |
| input.addEventListener('focus', function() { | |
| this.style.backgroundColor = '#fafafa'; | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.style.backgroundColor = 'white'; | |
| }); | |
| }); | |
| function validateField(field) { | |
| const feedback = field.parentElement.querySelector('.field-feedback') || | |
| field.nextElementSibling; | |
| if (!feedback) return; | |
| let isValid = false; | |
| let message = ''; | |
| if (field.name === 'email') { | |
| isValid = field.value === '' || emailRegex.test(field.value); | |
| message = isValid ? '✓ Valid email' : '✗ Invalid email format'; | |
| } else if (field.name === 'fullname') { | |
| isValid = field.value.trim().length >= 2; | |
| message = isValid && field.value ? '✓ Name looks good' : field.value ? '✗ Name too short' : ''; | |
| } else if (field.name === 'contact') { | |
| isValid = field.value === '' || field.value.trim().length >= 5; | |
| message = isValid && field.value ? '✓ Contact added' : field.value ? '✗ Too short' : ''; | |
| } | |
| if (field.value && message) { | |
| feedback.textContent = message; | |
| feedback.className = 'field-feedback show ' + (isValid ? 'success' : 'error'); | |
| } else { | |
| feedback.className = 'field-feedback'; | |
| } | |
| } | |
| function updateProgress() { | |
| let filled = 0; | |
| inputs.forEach(input => { | |
| if (input.name !== 'contact' && input.value.trim()) filled++; | |
| if (input.name === 'contact' && input.value) filled++; | |
| }); | |
| filled += document.getElementById('agree_terms').checked ? 1 : 0; | |
| const totalSteps = 4; | |
| const progress = Math.ceil((filled / totalSteps) * 4); | |
| progressSteps.forEach((step, index) => { | |
| if (index < progress) { | |
| step.classList.add('active'); | |
| } else { | |
| step.classList.remove('active'); | |
| } | |
| }); | |
| progressText.textContent = `Step ${Math.min(progress, 4)} of 4`; | |
| } | |
| // Checkbox visual feedback | |
| const checkbox = document.getElementById('agree_terms'); | |
| checkbox.addEventListener('change', function() { | |
| updateProgress(); | |
| if (this.checked) { | |
| this.style.accentColor = '#000'; | |
| } | |
| }); | |
| }); | |
| function handleSubmit(event) { | |
| event.preventDefault(); | |
| const form = event.target; | |
| const submitBtn = form.querySelector('button[type="submit"]'); | |
| const email = form.querySelector('input[name="email"]').value; | |
| const fullname = form.querySelector('input[name="fullname"]').value; | |
| const contact = form.querySelector('input[name="contact"]').value; | |
| // Add loading state | |
| submitBtn.disabled = true; | |
| submitBtn.classList.add('loading'); | |
| submitBtn.textContent = 'Sending...'; | |
| // Submit to Formspree | |
| const formData = new FormData(form); | |
| fetch(form.action, { | |
| method: 'POST', | |
| body: formData, | |
| headers: { | |
| 'Accept': 'application/json' | |
| } | |
| }) | |
| .then(response => { | |
| if (response.ok) { | |
| // Show success modal | |
| showSuccessModal(email, contact); | |
| form.reset(); | |
| submitBtn.disabled = false; | |
| submitBtn.classList.remove('loading'); | |
| submitBtn.textContent = 'Send Application'; | |
| } else { | |
| throw new Error('Form submission failed'); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('There was an error submitting your form. Please try again.'); | |
| submitBtn.disabled = false; | |
| submitBtn.classList.remove('loading'); | |
| submitBtn.textContent = 'Send Application'; | |
| }); | |
| } | |
| function showSuccessModal(email, contact) { | |
| const modal = document.getElementById('successModal'); | |
| const contactsDiv = document.getElementById('submittedContacts'); | |
| // Display submitted contacts | |
| contactsDiv.innerHTML = ` | |
| <div class="contact-value">📧 ${email}</div> | |
| <div class="contact-value" style="margin-top: 8px;">💬 ${contact}</div> | |
| `; | |
| modal.classList.add('show'); | |
| // Scroll to top | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| function closeSuccessModal() { | |
| const modal = document.getElementById('successModal'); | |
| modal.classList.remove('show'); | |
| } | |
| // Remove "here" link text (equivalent to the modification) | |
| setInterval(() => { | |
| const links = document.querySelectorAll('a[href="/gateway"]'); | |
| links.forEach(link => { | |
| if (link.textContent.trim() === 'here') { | |
| link.textContent = ''; | |
| } | |
| }); | |
| }, 50); | |
| // Force header styling | |
| setInterval(() => { | |
| const header = document.querySelector('header'); | |
| if (header) { | |
| header.style.background = 'white !important'; | |
| header.style.backgroundColor = 'white !important'; | |
| } | |
| }, 50); | |
| </script> | |
| </body> | |
| </html> |