/* Global Resets & Font */ #iTechVistaSuperAdvancedFormContainer * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #iTechVistaSuperAdvancedFormContainer { background-color: #121212; /* Very dark background */ color: #e0e0e0; padding: 20px 0px; /* REDUCED side padding, kept top/bottom for overall page */ min-height: 100vh; display: flex; flex-direction: column; align-items: center; } /* Form Wrapper */ .iv-form-wrapper { background-color: #1e1e1e; padding: 35px 45px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 850px; border: 1px solid #333; overflow: hidden; line-height: 1.65; } /* Header */ .iv-header { text-align: center; margin-bottom: 50px !important; padding-bottom: 25px !important; border-bottom: 1px solid #ff6600; } .iv-header img#itechvista-logo { max-width: 160px; margin-bottom: 20px !important; border-radius: 8px; display: inline-block; } .iv-header h1 { color: #ffffff; font-size: 2.2em; margin-bottom: 10px !important; } .iv-header p { color: #a0a0a0; font-size: 1em; line-height: 1.65; margin-bottom: 5px !important; } .iv-header a { color: #3399ff; text-decoration: none; } .iv-header a:hover { color: #66ccff; text-decoration: underline; } /* Progress Bar */ .iv-progress-bar { display: flex; justify-content: space-between; margin-bottom: 50px !important; list-style: none; padding-top: 15px !important; } .iv-progress-step { text-align: center; flex-grow: 1; position: relative; color: #777; font-size: 0.9em; } .iv-progress-step .iv-step-number { width: 32px; height: 32px; border-radius: 50%; background-color: #333; color: #777; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #444; font-weight: bold; margin-bottom: 10px !important; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .iv-progress-step .iv-step-label { display: block; transition: color 0.3s; line-height: 1.35; } .iv-progress-step.active .iv-step-number { background-color: #3399ff; border-color: #3399ff; color: #fff; } .iv-progress-step.active .iv-step-label { color: #3399ff; font-weight: bold; } .iv-progress-step.completed .iv-step-number { background-color: #ff6600; border-color: #ff6600; color: #fff; } .iv-progress-step.completed .iv-step-label { color: #ff6600; } .iv-progress-step:not(:last-child)::after { content: ''; position: absolute; top: 23px; /* Adjusted for step number height and progress-bar padding-top */ left: 50%; width: calc(100% - 32px); height: 2px; background-color: #444; transform: translateX(16px); z-index: -1; } .iv-progress-step.completed:not(:last-child)::after { background-color: #ff6600; } /* Form Steps */ .iv-form-step { display: none; animation: ivFadeInStep 0.5s ease-out; } .iv-form-step.active { display: block; } @keyframes ivFadeInStep { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .iv-form-step.exiting { animation: ivFadeOutStep 0.3s ease-in forwards; } @keyframes ivFadeOutStep { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } } /* Fieldsets and Legends */ .iv-form-step fieldset { border: 1px solid #444; padding: 35px 30px !important; border-radius: 8px; margin-bottom: 40px !important; } .iv-form-step legend { font-weight: bold; font-size: 1.25em; color: #ff6600; padding: 0 10px !important; margin-left: 5px !important; margin-bottom: 25px !important; } /* Labels and Inputs */ .iv-input-group { margin-bottom: 30px !important; } .iv-input-group label { display: block; margin-bottom: 12px !important; font-weight: 500; color: #b0b0b0; font-size: 0.95em; line-height: 1.5; } .iv-input-group input[type="text"], .iv-input-group input[type="email"], .iv-input-group input[type="tel"], .iv-input-group input[type="url"], .iv-input-group select, .iv-input-group textarea { width: 100%; padding: 15px 18px !important; border: 1px solid #555; border-radius: 6px; background-color: #2c2c2c; color: #e0e0e0; font-size: 1em; transition: border-color 0.3s, box-shadow 0.3s; } .iv-input-group input:focus, .iv-input-group select:focus, .iv-input-group textarea:focus { border-color: #3399ff; outline: none; box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2); } .iv-input-group select { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 0.7em; padding-right: 3rem !important; } .iv-input-group textarea { min-height: 120px !important; resize: vertical; } .iv-radio-group div, .iv-checkbox-group div { margin-bottom: 15px !important; } .iv-radio-group label, .iv-checkbox-group label { font-weight: normal; margin-left: 8px; color: #b0b0b0; cursor: pointer; display: inline-flex; align-items: center; } .iv-radio-group input[type="radio"], .iv-checkbox-group input[type="checkbox"] { margin-right: 10px !important; vertical-align: middle; cursor: pointer; accent-color: #ff6600; width: 1.1em; height: 1.1em; } .iv-input-group small { font-size: 0.85em; color: #888; margin-top: -8px !important; display: block; margin-bottom: 10px !important;} .iv-input-group .rr-guidance { /* Specific class for guidance paragraph */ font-size: 0.9em; color: #a0a0a0; line-height: 1.5; margin-top: 5px !important; /* Override default input group margin */ margin-bottom: 0 !important; } .iv-input-group .rr-guidance strong { color: #ffaa00; /* Softer orange for highlight within guidance */ } .iv-dynamic-fieldset-content { display: none; } .iv-dynamic-fieldset-content.active { display: block; animation: ivFadeInStep 0.4s ease-out; } /* Navigation Buttons */ .iv-nav-buttons { display: flex; justify-content: space-between; margin-top: 45px !important; padding-top: 30px !important; border-top: 1px solid #333; } .iv-nav-buttons button { padding: 15px 32px !important; border-radius: 8px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s, border-color 0.3s; border-width: 2px; border-style: solid; } .iv-nav-buttons button.iv-btn-prev { background-color: #4a4a4a; color: #e0e0e0; border-color: #666666; } .iv-nav-buttons button.iv-btn-prev:hover { background-color: #5a5a5a; border-color: #777777; transform: translateX(-2px); } .iv-nav-buttons button.iv-btn-next { background-color: #3399ff; color: #fff; border-color: #1f80e0; } .iv-nav-buttons button.iv-btn-next:hover { background-color: #2088ee; border-color: #106dbf; transform: translateX(2px); } .iv-nav-buttons button.iv-btn-submit { background-color: #ff6600; color: #fff; border-color: #cc5200; } .iv-nav-buttons button.iv-btn-submit:hover { background-color: #e65c00; border-color: #b34700; transform: scale(1.05); } .iv-nav-buttons button:disabled { background-color: #383838; color: #777; cursor: not-allowed; transform: none; box-shadow: none; border-color: #4a4a4a; } /* Review Step Styling */ #ivStepReview .iv-review-summary { background-color: #282828; padding: 30px !important; border-radius: 8px; border: 1px solid #444; } #ivStepReview .iv-review-summary h3 { color: #ff6600; margin-bottom: 25px !important; border-bottom: 1px solid #555; padding-bottom: 18px !important; font-size: 1.3em; } #ivStepReview .iv-review-item { margin-bottom: 15px !important; padding: 12px 0 !important; border-bottom: 1px dotted #4a4a4a; display: flex; flex-wrap: wrap; line-height: 1.6; } #ivStepReview .iv-review-item:last-child { border-bottom: none; } #ivStepReview .iv-review-item strong { color: #b8b8b8; min-width: 220px; display: inline-block; margin-right: 15px !important; font-weight: 500; } #ivStepReview .iv-review-item span { color: #e8e8e8; flex-grow: 1; } /* Validation Error Styling */ .iv-input-group input.iv-invalid, .iv-input-group select.iv-invalid, .iv-input-group textarea.iv-invalid { border-color: #e74c3c !important; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important; } .iv-error-message { color: #e74c3c; font-size: 0.9em; margin-top: 35px !important; text-align: center; display: none; font-weight: 500; } /* Submission Message */ #iTechVistaFormSubmissionMessageGlobal { margin: 35px auto 0 auto !important; padding: 18px !important; border-radius: 6px; font-weight: bold; text-align: center; display: none; width: 100%; max-width: 850px; } #iTechVistaFormSubmissionMessageGlobal.success { background-color: #28a745; color: #fff; border: 1px solid #1e7e34; display: block; } #iTechVistaFormSubmissionMessageGlobal.error { background-color: #dc3545; color: #fff; border: 1px solid #b02a37; display: block; } #iTechVistaFormSubmissionMessageGlobal.info { background-color: #17a2b8; color: #fff; border: 1px solid #117a8b; display: block; } /* Footer */ .iv-footer { text-align: center; padding: 30px 0px !important; color: #8892b0; font-size: 0.9em; margin-top: 45px !important; width: 100%; } .iv-footer a { color: #3399ff; text-decoration: none; } .iv-footer a:hover { color: #66ccff; text-decoration: underline; } .iv-hidden { display: none !important; } /* === CSS TO FORCE INTERACTIVITY IN ACTIVE STEP (Typing Fix Attempt) === */ .iv-form-step.active .iv-input-group, .iv-form-step.active .iv-input-group input, .iv-form-step.active .iv-input-group select, .iv-form-step.active .iv-input-group textarea { pointer-events: auto !important; user-select: auto !important; opacity: 1 !important; visibility: visible !important; } #ivDynamicContentHost, #ivDynamicContentHost * { pointer-events: auto !important; user-select: auto !important; } /* === END OF CSS FOR INTERACTIVITY === */ document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('iTechVistaMailToForm_MultiStep'); const steps = Array.from(form.querySelectorAll('.iv-form-step')); const progressSteps = Array.from(document.querySelectorAll('.iv-progress-step')); const nextButtons = form.querySelectorAll('.iv-btn-next'); const prevButtons = form.querySelectorAll('.iv-btn-prev'); const primaryIssueSelect = document.getElementById('primaryIssue'); const dynamicContentHost = document.getElementById('ivDynamicContentHost'); const dynamicContentLegend = dynamicContentHost.querySelector('legend'); const reviewSummaryOutput = document.getElementById('ivReviewSummaryOutput'); const recipientEmail = 'Support@iTechVista.com'; const formErrorMessage = document.getElementById('ivFormErrorMessage'); const globalSubmissionMessage = document.getElementById('iTechVistaFormSubmissionMessageGlobal'); let currentStep = 0; const fieldTemplates = { pc_optimization: { legend: "PC Optimization & Repair Details", templateId: "template-pc_optimization" }, shopify_services: { legend: "Shopify Service Details", templateId: "template-shopify_services" }, grapheneos_install: { legend: "GrapheneOS Installation Details", templateId: "template-grapheneos_install" }, davinci_training: { legend: "DaVinci Resolve Training Details", templateId: "template-davinci_training" }, pc_parts: { legend: "PC Parts & Accessories Inquiry", templateId: "template-pc_parts" }, other_electronics: { legend: "Other Electronics Inquiry", templateId: "template-other_electronics" }, returns_replacements: { legend: "Return or Replacement Details", templateId: "template-returns_replacements" }, // ADDED THIS general_inquiry: { legend: "General Inquiry Details", templateId: "template-general_inquiry" } }; function updateStepView() { // ... (JavaScript identical to V8/previous version for this function) ... const currentFormStep = steps[currentStep]; steps.forEach((step, index) => { if (index === currentStep) { step.classList.remove('exiting'); step.classList.add('active'); } else { step.classList.remove('active'); } }); progressSteps.forEach((pStep, index) => { pStep.classList.remove('active', 'completed'); if (index < currentStep) { pStep.classList.add('completed'); } else if (index === currentStep) { pStep.classList.add('active'); } }); formErrorMessage.style.display = 'none'; } function animateAndChangeStep(newStepIndex) { // ... (JavaScript identical to V8/previous version for this function) ... const currentFormStep = steps[currentStep]; if (newStepIndex > currentStep) { currentFormStep.classList.add('exiting'); setTimeout(() => { currentFormStep.classList.remove('active'); currentStep = newStepIndex; updateStepView(); }, 250); } else { currentFormStep.classList.remove('active'); currentStep = newStepIndex; updateStepView(); } } function validateStep(stepIndex) { // ... (JavaScript identical to V8/previous version for this function) ... formErrorMessage.style.display = 'none'; const currentFields = steps[stepIndex].querySelectorAll('[required]'); let allValid = true; currentFields.forEach(field => { field.classList.remove('iv-invalid'); let fieldValid = true; if (field.type === 'checkbox' ) { if (!field.checked && field.hasAttribute('required')) { fieldValid = false; } } else if (field.type === 'radio') { const radioGroupName = field.name; if (field.hasAttribute('required') && !form.querySelector(`input[name="${radioGroupName}"]:checked`)) { // Validation for radio groups } } else if (!field.value.trim()) { fieldValid = false; } if (!fieldValid) { allValid = false; field.classList.add('iv-invalid'); } }); if (!allValid) { formErrorMessage.textContent = 'Please fill in all highlighted required fields for this step.'; formErrorMessage.style.display = 'block'; } return allValid; } primaryIssueSelect.addEventListener('change', function() { // ... (JavaScript identical to V8/previous version for this function) ... const selectedValue = this.value; const childrenToRemove = []; for(let i = 0; i < dynamicContentHost.childNodes.length; i++) { if(dynamicContentHost.childNodes[i] !== dynamicContentLegend) { childrenToRemove.push(dynamicContentHost.childNodes[i]); } } childrenToRemove.forEach(child => dynamicContentHost.removeChild(child)); if (selectedValue && fieldTemplates[selectedValue]) { const templateInfo = fieldTemplates[selectedValue]; dynamicContentLegend.textContent = templateInfo.legend; const template = document.getElementById(templateInfo.templateId); if (template) { const clone = template.content.cloneNode(true); dynamicContentHost.appendChild(clone); } else { dynamicContentLegend.textContent = "Specific Needs"; } } else { dynamicContentLegend.textContent = "Specific Needs"; } }); nextButtons.forEach(button => { // ... (JavaScript identical to V8/previous version for this function) ... button.addEventListener('click', () => { if (validateStep(currentStep)) { const nextStepIndex = parseInt(button.dataset.next) - 1; if (nextStepIndex === 3) { populateReviewSummary(); } animateAndChangeStep(nextStepIndex); } }); }); prevButtons.forEach(button => { // ... (JavaScript identical to V8/previous version for this function) ... button.addEventListener('click', () => { const prevStepIndex = parseInt(button.dataset.prev) - 1; animateAndChangeStep(prevStepIndex); }); }); function formatFieldNameForReview(name, fieldElement) { // ... (JavaScript identical to V8/previous version for this function) ... if (fieldElement && fieldElement.id) { const label = form.querySelector(`label[for='${fieldElement.id}']`); if (label) { return label.textContent.replace(':', ''); } } const result = name.replace(/([A-Z])/g, " $1").replace(/\[\]/g, ""); return result.charAt(0).toUpperCase() + result.slice(1); } function populateReviewSummary() { // ... (JavaScript identical to V8/previous version for this function, // it's designed to pick up new fields based on template structure) ... reviewSummaryOutput.innerHTML = '<h3>Your Inquiry Details:</h3>'; const formData = new FormData(form); let summaryHtml = ''; const primaryIssueValue = formData.get('primaryIssue'); if (primaryIssueValue) { summaryHtml += `<div class="iv-review-item"><strong>Selected Service:</strong> <span>${primaryIssueSelect.options[primaryIssueSelect.selectedIndex].text}</span></div>`; } if (primaryIssueValue && fieldTemplates[primaryIssueValue]) { const templateId = fieldTemplates[primaryIssueValue].templateId; const templateNode = document.getElementById(templateId); if (templateNode) { summaryHtml += `<div class="iv-review-item" style="margin-top:15px; padding-top:15px; border-top:1px solid #555;"><strong>${fieldTemplates[primaryIssueValue].legend}:</strong></div>`; templateNode.content.querySelectorAll('input, select, textarea, p.rr-guidance').forEach(fieldInTemplate => { // Added p.rr-guidance to potentially skip it if needed, but FormData won't pick it up anyway if (fieldInTemplate.tagName === 'P' && fieldInTemplate.classList.contains('rr-guidance')) return; // Skip p guidance tag const fieldName = fieldInTemplate.name; if (!fieldName) return; // Skip elements without a name (like the guidance paragraph) const fieldElement = dynamicContentHost.querySelector(`[name="${fieldName}"]`); let value; const labelText = formatFieldNameForReview(fieldName, fieldElement); if (fieldInTemplate.type === 'checkbox') { const checkedValues = Array.from(dynamicContentHost.querySelectorAll(`input[name='${fieldName}']:checked`)).map(cb => cb.value); value = checkedValues.length > 0 ? checkedValues.join(', ') : "Not specified"; if(fieldName.includes("[]")) { if(!summaryHtml.includes(`<strong>${labelText}:`)){ summaryHtml += `<div class="iv-review-item"><strong>${labelText}:</strong> <span>${value}</span></div>`; } } } else if (fieldInTemplate.type === 'radio') { const checkedRadio = dynamicContentHost.querySelector(`input[name='${fieldName}']:checked`); value = checkedRadio ? checkedRadio.value : "Not specified"; if(!summaryHtml.includes(`<strong>${labelText}:`)){ summaryHtml += `<div class="iv-review-item"><strong>${labelText}:</strong> <span>${value}</span></div>`; } } else { value = fieldElement ? (fieldElement.tagName === 'SELECT' ? fieldElement.options[fieldElement.selectedIndex].text : fieldElement.value) : "Not specified"; if (value && value.trim() !== "" && value !== "-- Select a Reason --" && value !== "-- Select --") { // Check if value is meaningful summaryHtml += `<div class="iv-review-item"><strong>${labelText}:</strong> <span>${value}</span></div>`; } } }); } } summaryHtml += `<div class="iv-review-item" style="margin-top:15px; padding-top:15px; border-top:1px solid #555;"><strong>Your Contact Information:</strong></div>`; summaryHtml += `<div class="iv-review-item"><strong>Full Name:</strong> <span>${formData.get('fullName') || 'N/A'}</span></div>`; summaryHtml += `<div class="iv-review-item"><strong>Email:</strong> <span>${formData.get('email') || 'N/A'}</span></div>`; const phoneValue = formData.get('phone'); summaryHtml += `<div class="iv-review-item"><strong>Phone:</strong> <span>${phoneValue ? phoneValue : 'Not provided'}</span></div>`; reviewSummaryOutput.innerHTML += summaryHtml; } form.addEventListener('submit', function(event) { // ... (JavaScript for mailto body construction identical to V8, // it's designed to pick up new fields based on template structure and FormData) ... event.preventDefault(); if (!validateStep(currentStep)) return; const submitButton = form.querySelector('.iv-btn-submit'); submitButton.disabled = true; submitButton.textContent = 'Processing...'; globalSubmissionMessage.style.display = 'none'; const formData = new FormData(form); let mailtoBody = []; const fullName = formData.get('fullName'); const userEmail = formData.get('email'); mailtoBody.push("==============================================\n"); const primaryIssueText = primaryIssueSelect.options[primaryIssueSelect.selectedIndex].text; mailtoBody.push(`Service/Topic: ${primaryIssueText}\n`); const selectedIssueKey = formData.get('primaryIssue'); if (selectedIssueKey && fieldTemplates[selectedIssueKey]) { const templateId = fieldTemplates[selectedIssueKey].templateId; const templateNode = document.getElementById(templateId); if (templateNode) { mailtoBody.push("\n--- " + fieldTemplates[selectedIssueKey].legend + " ---\n"); templateNode.content.querySelectorAll('input, select, textarea').forEach(fieldInTemplate => { // Iterate over template fields to maintain order and labels const fieldName = fieldInTemplate.name; if (!fieldName) return; // Skip elements without a name const fieldElement = dynamicContentHost.querySelector(`[name="${fieldName}"]`); const fieldLabel = formatFieldNameForReview(fieldName, fieldElement); let value; if (fieldInTemplate.type === 'checkbox') { const checkedValues = Array.from(dynamicContentHost.querySelectorAll(`input[name='${fieldName}']:checked`)).map(cb => cb.value); if (checkedValues.length > 0 && !mailtoBody.find(line => line.startsWith(`${fieldLabel}:`))) { mailtoBody.push(`${fieldLabel}: ${checkedValues.join(', ')}`); } } else if (fieldInTemplate.type === 'radio') { const checkedRadio = dynamicContentHost.querySelector(`input[name='${fieldName}']:checked`); if (checkedRadio && !mailtoBody.find(line => line.startsWith(`${fieldLabel}:`))) { mailtoBody.push(`${fieldLabel}: ${checkedRadio.value}`); } } else if (fieldInTemplate.tagName === 'SELECT') { value = fieldElement && fieldElement.value ? fieldElement.options[fieldElement.selectedIndex].text : ""; if (value && value.trim() !== "" && value !== "-- Select a Reason --" && value !== "-- Select --") { mailtoBody.push(`${fieldLabel}: ${value}`); } } else { value = fieldElement ? fieldElement.value : formData.get(fieldName); if (value && value.trim() !== "") { mailtoBody.push(`${fieldLabel}: ${value}`); } } }); } } mailtoBody.push("\n--- Contact Information ---\n"); mailtoBody.push(`Full Name: ${fullName}`); mailtoBody.push(`Reply-to Email: ${userEmail}`); if (formData.get('phone')) mailtoBody.push(`Phone: ${formData.get('phone')}`); mailtoBody.push("\n=============================================="); const subject = encodeURIComponent(`iTechVista Inquiry: ${primaryIssueText} - ${fullName}`); const body = encodeURIComponent(mailtoBody.join('\n')); const mailtoLink = `mailto:${recipientEmail}?subject=${subject}&body=${body}`; if (mailtoLink.length > 2000) { globalSubmissionMessage.textContent = 'The inquiry is too long for standard email. Please shorten your descriptions or contact us directly via email.'; globalSubmissionMessage.className = 'error'; } else { globalSubmissionMessage.textContent = 'Your email client should open shortly to send the inquiry. If not, please ensure your browser is configured to handle mailto links or copy the details manually. Thank you!'; globalSubmissionMessage.className = 'info'; window.location.href = mailtoLink; } globalSubmissionMessage.style.display = 'block'; setTimeout(() => { submitButton.disabled = false; submitButton.textContent = 'Prepare Email &raquo;'; }, 4000); }); updateStepView(); document.getElementById('iTechVistaCurrentYearSA').textContent = new Date().getFullYear(); if(primaryIssueSelect.value) primaryIssueSelect.dispatchEvent(new Event('change')); });