{"id":2423,"date":"2025-06-14T01:52:39","date_gmt":"2025-06-14T01:52:39","guid":{"rendered":"https:\/\/acclaimlogix.com\/wpalpress\/?page_id=2423"},"modified":"2025-06-17T20:11:29","modified_gmt":"2025-06-17T20:11:29","slug":"get-in-touch-page","status":"publish","type":"page","link":"https:\/\/acclaimlogix.com\/wpalpress\/get-in-touch-page\/","title":{"rendered":"Get in Touch page"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Connect With Us \u2013 AcclaimLogix<\/title>\n <!-- Inter font from Google Fonts -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\">\n <!-- Tailwind CSS CDN -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom CSS variables for consistent design across the site *\/\n :root {\n --primary-gradient: linear-gradient(90deg, #6EE7B7, #3B82F6); \/* Teal to Blue *\/\n --secondary-gradient: linear-gradient(90deg, #FDBA74, #FB923C); \/* Orange *\/\n --bg-dark-gradient: linear-gradient(to bottom right, #000000, #0A0A0A, #1A1A1A); \/* Deep black *\/\n --card-bg: rgba(10, 10, 10, 0.9);\n --card-border: rgba(50, 50, 50, 0.3);\n --card-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);\n --card-hover-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.5);\n --form-field-bg: #0F0F0F;\n --form-border: #4B5563; \/* Initial gray border *\/\n --form-border-focus: #6EE7B7; \/* Teal on focus *\/\n --text-light: #E2E8F0;\n --text-muted: #9CA3AF;\n --error-color: #EF4444; \/* Red for errors *\/\n }\n\n \/* Base styles for body *\/\n body {\n font-family: 'Inter', sans-serif;\n background: var(--bg-dark-gradient);\n color: var(--text-light);\n min-height: 100vh;\n line-height: 1.6;\n overflow-x: hidden;\n scroll-behavior: smooth;\n }\n\n \/* Generic gradient text style for headers *\/\n .text-gradient-main {\n background: var(--primary-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .text-gradient-secondary {\n background: var(--secondary-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n \/* Section header styling *\/\n .section-header {\n font-size: clamp(2.5rem, 6vw, 3.5rem);\n font-weight: 800;\n text-align: center;\n margin-bottom: 3rem;\n }\n\n \/* Card base for general content blocks *\/\n .card-base {\n background: var(--card-bg);\n border-radius: 1.5rem;\n padding: 1.75rem;\n box-shadow: var(--card-shadow);\n transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);\n border: 1px solid var(--card-border);\n }\n\n .card-base:hover {\n transform: translateY(-0.75rem) scale(1.02);\n box-shadow: var(--card-hover-shadow);\n }\n\n \/* Form-specific container styling to make it stand out *\/\n .form-container-highlight {\n background: rgba(10, 10, 10, 0.95);\n border-radius: 2rem;\n padding: 2.5rem;\n box-shadow: 0 0 40px rgba(59, 130, 246, 0.2), 0 0 80px rgba(59, 130, 246, 0.1); \/* Strong blue glow *\/\n border: 2px solid #3B82F6; \/* Solid blue border *\/\n position: relative;\n z-index: 10; \/* Ensure it stays on top *\/\n }\n\n \/* Form field styling with modern floating labels and validation feedback *\/\n .form-group {\n position: relative;\n margin-bottom: 2.25rem; \/* Increased margin for error messages *\/\n }\n\n .form-group input,\n .form-group select,\n .form-group textarea {\n width: 100%;\n padding: 1rem 1.25rem;\n border: 1px solid var(--form-border);\n background: var(--form-field-bg);\n color: var(--text-light);\n border-radius: 0.75rem;\n font-size: 1rem;\n outline: none;\n transition: all 0.3s ease;\n appearance: none; \/* Remove default select arrow *\/\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n \n \/* Custom arrow for select fields *\/\n .form-group select {\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 20' fill='none' stroke='%239CA3AF'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'\/%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.5em;\n padding-right: 2.5rem;\n }\n\n \/* Focus state for form fields *\/\n .form-group input:focus,\n .form-group select:focus,\n .form-group textarea:focus {\n border-color: var(--form-border-focus);\n box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.3); \/* Teal ring on focus *\/\n }\n\n \/* Floating label animation *\/\n .form-group label {\n position: absolute;\n top: 1rem;\n left: 1.25rem;\n color: var(--text-muted);\n font-size: 1rem;\n pointer-events: none;\n transition: all 0.2s ease-out;\n background-color: transparent;\n z-index: 1;\n }\n\n .form-group input:not(:placeholder-shown) + label,\n .form-group input:focus + label,\n .form-group textarea:not(:placeholder-shown) + label,\n .form-group textarea:focus + label,\n .form-group select:focus + label,\n .form-group select:not([value=\"\"]) + label {\n top: -0.75rem;\n left: 0.75rem;\n font-size: 0.8rem;\n color: var(--form-label-active);\n background: var(--form-field-bg);\n padding: 0 0.5rem;\n z-index: 20; \/* Ensure label is above input when floating *\/\n }\n\n \/* Validation error styling *\/\n .form-group .error-message {\n color: var(--error-color);\n font-size: 0.8rem;\n margin-top: 0.25rem;\n position: absolute;\n left: 0;\n bottom: -1.5rem; \/* Position below input *\/\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n }\n\n .form-group input:invalid:not(:placeholder-shown):not(:focus) + label + .error-message,\n .form-group textarea:invalid:not(:placeholder-shown):not(:focus) + label + .error-message,\n .form-group input:invalid:not(:focus) ~ .error-message, \/* For fields that aren't filled yet *\/\n .form-group textarea:invalid:not(:focus) ~ .error-message {\n visibility: visible;\n opacity: 1;\n }\n\n .form-group input:invalid:not(:placeholder-shown),\n .form-group textarea:invalid:not(:placeholder-shown) {\n border-color: var(--error-color);\n }\n\n \/* Select option styling *\/\n select option {\n background: #1F2937;\n color: #E2E8F0;\n }\n\n \/* Toggle buttons for form type *\/\n .form-toggle button {\n padding: 0.75rem 1.5rem;\n background: #1C1C1C;\n border: 2px solid #3B82F6; \/* Blue border for toggle *\/\n color: #3B82F6;\n border-radius: 9999px; \/* Pill shape *\/\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0,0,0,0.3);\n }\n .form-toggle button.active {\n background: #3B82F6; \/* Active blue fill *\/\n color: #000;\n box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);\n }\n .form-toggle button:hover:not(.active) {\n background: rgba(59, 130, 246, 0.1);\n color: #6EE7B7;\n }\n\n \/* Submit button styling *\/\n .submit-btn-styled {\n width: 100%;\n padding: 1rem;\n border: none;\n font-weight: 700;\n font-size: 1.125rem;\n border-radius: 0.75rem;\n background: var(--primary-gradient);\n color: #1F2937;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .submit-btn-styled:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(110, 231, 183, 0.5);\n }\n\n \/* Loading spinner for submit button *\/\n .submit-loading-spinner {\n border: 4px solid rgba(255,255,255,0.3);\n border-top: 4px solid #6EE7B7;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n margin-right: 8px;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* NDA checkbox styling *\/\n .nda-checkbox-group {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 0.95rem;\n color: var(--text-muted);\n margin-top: 1rem;\n }\n .nda-checkbox-group input[type=\"checkbox\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n border: 2px solid #6EE7B7; \/* Teal border *\/\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n position: relative;\n flex-shrink: 0; \/* Prevent shrinking in flex container *\/\n transition: all 0.2s ease;\n }\n .nda-checkbox-group input[type=\"checkbox\"]:checked {\n background: #6EE7B7; \/* Teal fill when checked *\/\n border-color: #6EE7B7;\n }\n .nda-checkbox-group input[type=\"checkbox\"]:checked::after {\n content: \"\u2714\";\n color: #000;\n font-size: 14px;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .nda-checkbox-group input[type=\"checkbox\"]:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.3);\n }\n\n \/* Success Modal Styles (similar to the Thank You modal but enhanced) *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n backdrop-filter: blur(5px);\n }\n\n .modal-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .modal-content-styled {\n background: #1A1A1A;\n padding: 3rem;\n border-radius: 1.5rem;\n text-align: center;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);\n max-width: 500px;\n width: 90%;\n transform: translateY(-50px);\n opacity: 0;\n transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;\n border: 2px solid #6EE7B7; \/* Teal border for success *\/\n }\n\n .modal-overlay.active .modal-content-styled {\n transform: translateY(0);\n opacity: 1;\n }\n\n .modal-content-styled .icon-circle {\n background: #6EE7B7; \/* Teal circle *\/\n border-radius: 50%;\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: -60px auto 2rem; \/* Pulls it up from the top *\/\n box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 20px #6EE7B7;\n animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); \/* Pop-in animation *\/\n }\n\n @keyframes popIn {\n 0% { transform: scale(0.5); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .modal-content-styled .icon-circle svg {\n color: #000;\n width: 40px;\n height: 40px;\n }\n\n .modal-content-styled h3 {\n font-size: 2.5rem;\n font-weight: 800;\n background: var(--primary-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 1rem;\n }\n\n .modal-content-styled p {\n color: #CBD5E1;\n margin-bottom: 2rem;\n font-size: 1.1rem;\n }\n\n .modal-close-btn-styled {\n background: var(--secondary-gradient);\n color: #1F2937;\n font-weight: 700;\n padding: 0.85rem 2rem;\n border-radius: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n }\n\n .modal-close-btn-styled:hover {\n transform: translateY(-2px);\n opacity: 0.9;\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n <div class=\"mx-auto px-4 py-16 md:py-24 max-w-7xl\">\n\n <!-- Hero Section -->\n <section class=\"text-center mb-20\">\n <h1 class=\"text-6xl md:text-8xl font-extrabold text-gradient-main leading-tight mb-6 drop-shadow-lg animate-fade-in-up\">\n Let's Build Something Intelligent Together.\n <\/h1>\n <h2 class=\"text-2xl md:text-3xl text-gradient-secondary font-bold mb-8 animate-fade-in-up delay-200\">\n Your Vision. Our Expertise. Real Impact.\n <\/h2>\n <p class=\"text-lg md:text-xl text-gray-300 max-w-5xl mx-auto leading-relaxed animate-fade-in-up delay-400\">\n Whether you're exploring new opportunities, seeking strategic guidance, or expanding your team, AcclaimLogix is your dedicated partner. Fill out the form below to initiate a transformative conversation.\n <\/p>\n <\/section>\n\n <!-- What to Expect Section -->\n <section class=\"mb-20\">\n <h2 class=\"section-header text-gradient-main\">What to Expect From Your Consultation<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto\">\n <div class=\"card-base text-center\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/128\/9167\/9167448.png\" alt=\"Discovery Call Icon\" class=\"w-16 h-16 mx-auto mb-4 card-icon\" \/>\n <h3 class=\"text-2xl font-bold text-pink-300 mb-2\">Discovery Call<\/h3>\n <p class=\"text-gray-400 text-base\">\n A brief chat to understand your high-level objectives and how we can add value.\n <\/p>\n <\/div>\n <div class=\"card-base text-center\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/128\/3421\/3421711.png\" alt=\"Tailored Proposal Icon\" class=\"w-16 h-16 mx-auto mb-4 card-icon\" \/>\n <h3 class=\"text-2xl font-bold text-pink-300 mb-2\">Tailored Proposal<\/h3>\n <p class=\"text-gray-400 text-base\">\n We'll craft a customized plan outlining strategy, timelines, and expected outcomes.\n <\/p>\n <\/div>\n <div class=\"card-base text-center\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/128\/1042\/1042571.png\" alt=\"Partnership Kick-off Icon\" class=\"w-16 h-16 mx-auto mb-4 card-icon\" \/>\n <h3 class=\"text-2xl font-bold text-pink-300 mb-2\">Partnership Kick-off<\/h3>\n <p class=\"text-gray-400 text-base\">\n Begin our collaborative journey, integrating seamlessly with your team to deliver results.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Main Contact Form Section -->\n <section id=\"contact-form-section\" class=\"mb-20\">\n <h2 class=\"section-header text-gradient-main\">Let's Connect: Your Project Starts Here<\/h2>\n <p class=\"text-lg md:text-xl text-gray-300 max-w-4xl mx-auto text-center mb-12\">\n Whether you need expert consultation, specialized talent, or simply want to explore possibilities, our team is ready to listen.\n <\/p>\n\n <div class=\"form-container-highlight max-w-4xl mx-auto\">\n <h3 class=\"text-3xl font-extrabold text-gradient-secondary mb-8 text-center\">Tell Us About Your Needs<\/h3>\n\n <div class=\"form-toggle flex justify-center gap-4 mb-8\">\n <button type=\"button\" class=\"toggle-btn active\" data-form-type=\"general\">General Inquiry<\/button>\n <button type=\"button\" class=\"toggle-btn\" data-form-type=\"talent\">Talent Request<\/button>\n <\/div>\n\n <form id=\"connectForm\" onsubmit=\"return handleSubmit(event)\" novalidate>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-8\">\n <!-- Name Fields -->\n <div class=\"form-group\">\n <input type=\"text\" id=\"fname\" name=\"firstName\" placeholder=\" \" required minlength=\"2\" aria-describedby=\"fname-error\" autocomplete=\"given-name\">\n <label for=\"fname\">First Name *<\/label>\n <span class=\"error-message\" id=\"fname-error\">Please enter your first name (min 2 chars).<\/span>\n <\/div>\n <div class=\"form-group\">\n <input type=\"text\" id=\"lname\" name=\"lastName\" placeholder=\" \" required minlength=\"2\" aria-describedby=\"lname-error\" autocomplete=\"family-name\">\n <label for=\"lname\">Last Name *<\/label>\n <span class=\"error-message\" id=\"lname-error\">Please enter your last name (min 2 chars).<\/span>\n <\/div>\n\n <!-- Email Fields (Toggled) -->\n <div class=\"form-group col-span-1 md:col-span-2\" id=\"general-email-group\">\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\" \" required pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$\" aria-describedby=\"email-error\" autocomplete=\"email\">\n <label for=\"email\">Email *<\/label>\n <span class=\"error-message\" id=\"email-error\">Please enter a valid email address.<\/span>\n <\/div>\n <div class=\"form-group col-span-1 md:col-span-2 hidden\" id=\"work-email-group\">\n <input type=\"email\" id=\"work-email\" name=\"workEmail\" placeholder=\" \" pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$\" aria-describedby=\"work-email-error\" autocomplete=\"email\">\n <label for=\"work-email\">Work Email *<\/label>\n <span class=\"error-message\" id=\"work-email-error\">Please enter a valid work email address.<\/span>\n <\/div>\n \n <!-- Company Field (Toggled) -->\n <div class=\"form-group col-span-1 md:col-span-2 hidden\" id=\"company-name-group\">\n <input type=\"text\" id=\"company\" name=\"companyName\" placeholder=\" \" minlength=\"2\" aria-describedby=\"company-error\" autocomplete=\"organization\">\n <label for=\"company\">Company Name *<\/label>\n <span class=\"error-message\" id=\"company-error\">Please enter your company name (min 2 chars).<\/span>\n <\/div>\n\n <!-- Phone Number -->\n <div class=\"form-group col-span-1 md:col-span-2\">\n <input type=\"tel\" id=\"phone\" name=\"phoneNumber\" placeholder=\" \" pattern=\"^[+]?[0-9]{1,3}[-. ]?[(]?[0-9]{3}[)]?[-. ]?[0-9]{3}[-. ]?[0-9]{4}$\" aria-describedby=\"phone-error\" autocomplete=\"tel\">\n <label for=\"phone\">Phone Number<\/label>\n <span class=\"error-message\" id=\"phone-error\">Please enter a valid phone number (e.g., +1-555-123-4567).<\/span>\n <\/div>\n\n <!-- How did you hear about us? -->\n <div class=\"form-group col-span-1 md:col-span-2\">\n <select id=\"referral\" name=\"referralSource\" required aria-describedby=\"referral-error\">\n <option value=\"\" disabled selected hidden>Select an option<\/option>\n <option value=\"Search Engine\">Search Engine<\/option>\n <option value=\"Social Media\">Social Media<\/option>\n <option value=\"Referral\">Referral<\/option>\n <option value=\"Event\">Event<\/option>\n <option value=\"Other\">Other<\/option>\n <\/select>\n <label for=\"referral\">How did you hear about us? *<\/label>\n <span class=\"error-message\" id=\"referral-error\">Please select how you heard about us.<\/span>\n <\/div>\n\n <!-- Project Details \/ Skills (Toggled based on form type) -->\n <div class=\"form-group col-span-1 md:col-span-2\" id=\"project-details-group\">\n <textarea id=\"project\" name=\"projectDetails\" rows=\"5\" placeholder=\" \" required minlength=\"20\" aria-describedby=\"project-error\"><\/textarea>\n <label for=\"project\">Tell us more about your project *<\/label>\n <span class=\"error-message\" id=\"project-error\">Please provide details about your project (min 20 chars).<\/span>\n <\/div>\n\n <div class=\"form-group col-span-1 md:col-span-2 hidden\" id=\"talent-skills-group\">\n <textarea id=\"talent-skills\" name=\"talentSkills\" rows=\"5\" placeholder=\" \" minlength=\"20\" aria-describedby=\"talent-skills-error\"><\/textarea>\n <label for=\"talent-skills\">Describe Required Talent Skills\/Roles *<\/label>\n <span class=\"error-message\" id=\"talent-skills-error\">Please describe the skills or roles you require (min 20 chars).<\/span>\n <\/div>\n\n <!-- NDA Checkbox -->\n <div class=\"col-span-1 md:col-span-2\">\n <label class=\"nda-checkbox-group\">\n <input type=\"checkbox\" name=\"requireNDA\" id=\"require-nda\" \/>\n Require NDA before discussion\n <\/label>\n <\/div>\n\n <!-- Submit Button -->\n <div class=\"col-span-1 md:col-span-2 flex justify-center\">\n <button type=\"submit\" class=\"submit-btn-styled\">\n <span id=\"submit-loading\" class=\"submit-loading-spinner hidden\"><\/span>\n <span id=\"submit-text\">Submit Inquiry<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <\/section>\n\n <!-- Final Call to Action -->\n <section class=\"mb-20 text-center\">\n <h2 class=\"section-header text-gradient-main\">Ready for a Human Connection?<\/h2>\n <p class=\"text-lg md:text-xl text-gray-300 max-w-4xl mx-auto mb-8\">\n Still have questions or prefer a direct conversation? We're here to help.\n <\/p>\n <a href=\"https:\/\/acclaimlogix.com\/wpalpress\/get-in-touch-page\/\" class=\"btn-custom\">Speak with an Expert<\/a>\n <\/section>\n\n <\/div>\n\n <!-- Thank You Modal Structure -->\n <div id=\"thankYouModal\" class=\"modal-overlay\">\n <div class=\"modal-content-styled\">\n <div class=\"icon-circle\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\" class=\"w-10 h-10\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div>\n <h3>Thank You!<\/h3>\n <p>Your message has been successfully received. We appreciate you reaching out and will be in touch shortly to discuss your needs.<\/p>\n <button class=\"modal-close-btn-styled\" onclick=\"closeThankYouModal()\">Close<\/button>\n <\/div>\n <\/div>\n\n <script>\n const connectForm = document.getElementById('connectForm');\n const toggleButtons = document.querySelectorAll('.toggle-btn');\n const generalEmailGroup = document.getElementById('general-email-group');\n const workEmailGroup = document.getElementById('work-email-group');\n const companyNameGroup = document.getElementById('company-name-group');\n const projectDetailsGroup = document.getElementById('project-details-group');\n const talentSkillsGroup = document.getElementById('talent-skills-group');\n const emailInput = document.getElementById('email');\n const workEmailInput = document.getElementById('work-email');\n const companyInput = document.getElementById('company');\n const projectTextarea = document.getElementById('project');\n const talentSkillsTextarea = document.getElementById('talent-skills');\n const submitButton = connectForm.querySelector('button[type=\"submit\"]');\n const submitLoadingSpinner = document.getElementById('submit-loading');\n const submitText = document.getElementById('submit-text');\n \n \/\/ --- Form Toggle Logic ---\n function toggleFormFields(type) {\n toggleButtons.forEach(btn => {\n if (btn.dataset.formType === type) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n\n const isGeneral = type === 'general';\n\n \/\/ Toggle email fields visibility and required attribute\n generalEmailGroup.classList.toggle('hidden', !isGeneral);\n emailInput.required = isGeneral;\n emailInput.value = ''; \/\/ Clear value on toggle\n\n workEmailGroup.classList.toggle('hidden', isGeneral);\n workEmailInput.required = !isGeneral;\n workEmailInput.value = ''; \/\/ Clear value on toggle\n\n \/\/ Toggle company name visibility and required attribute\n companyNameGroup.classList.toggle('hidden', isGeneral);\n companyInput.required = !isGeneral;\n companyInput.value = ''; \/\/ Clear value on toggle\n\n \/\/ Toggle project vs talent fields\n projectDetailsGroup.classList.toggle('hidden', !isGeneral);\n projectTextarea.required = isGeneral;\n projectTextarea.value = ''; \/\/ Clear value on toggle\n\n talentSkillsGroup.classList.toggle('hidden', isGeneral);\n talentSkillsTextarea.required = !isGeneral;\n talentSkillsTextarea.value = ''; \/\/ Clear value on toggle\n\n \/\/ Reset validation messages when fields are hidden\/shown\n clearValidationMessages(connectForm);\n }\n\n toggleButtons.forEach(button => {\n button.addEventListener('click', () => {\n toggleFormFields(button.dataset.formType);\n });\n });\n\n \/\/ Initialize form state on load\n window.addEventListener('load', () => toggleFormFields('general'));\n\n \/\/ --- Real-time Validation Feedback ---\n const inputsAndTextareas = connectForm.querySelectorAll('input:not([type=\"checkbox\"]), textarea, select');\n\n inputsAndTextareas.forEach(element => {\n element.addEventListener('input', () => {\n validateField(element);\n });\n element.addEventListener('blur', () => { \/\/ Validate on blur for immediate feedback\n validateField(element);\n });\n });\n\n function validateField(field) {\n const errorMessageElement = document.getElementById(field.id + '-error');\n if (errorMessageElement) { \/\/ Check if an error message span exists\n if (field.checkValidity()) {\n errorMessageElement.style.visibility = 'hidden';\n errorMessageElement.style.opacity = '0';\n field.classList.remove('border-red-500'); \/\/ Remove red border\n field.classList.add('border-gray-600'); \/\/ Add default border\n } else {\n errorMessageElement.style.visibility = 'visible';\n errorMessageElement.style.opacity = '1';\n field.classList.add('border-red-500'); \/\/ Add red border\n field.classList.remove('border-gray-600'); \/\/ Remove default border\n \/\/ Set specific message for pattern mismatch if needed\n if (field.validity.patternMismatch && field.id === 'phone') {\n errorMessageElement.textContent = \"Please enter a valid phone number (e.g., +1-555-123-4567).\";\n } else if (field.validity.patternMismatch && (field.id === 'email' || field.id === 'work-email')) {\n errorMessageElement.textContent = \"Please enter a valid email address.\";\n } else if (field.validity.tooShort) {\n errorMessageElement.textContent = `Please enter at least ${field.minLength} characters.`;\n } else if (field.validity.valueMissing) {\n errorMessageElement.textContent = \"This field is required.\";\n } else {\n errorMessageElement.textContent = \"This field is invalid.\"; \/\/ Generic fallback\n }\n }\n }\n }\n\n function clearValidationMessages(form) {\n form.querySelectorAll('.error-message').forEach(span => {\n span.style.visibility = 'hidden';\n span.style.opacity = '0';\n });\n form.querySelectorAll('input, textarea, select').forEach(field => {\n field.classList.remove('border-red-500');\n field.classList.add('border-gray-600');\n });\n }\n\n\n \/\/ --- Form Submission Handler ---\n async function handleSubmit(event) {\n event.preventDefault(); \/\/ Prevent default form submission\n\n \/\/ Validate all currently visible required fields\n let allFieldsValid = true;\n inputsAndTextareas.forEach(field => {\n if (!field.closest('.hidden')) { \/\/ Only validate visible fields\n validateField(field);\n if (!field.checkValidity()) {\n allFieldsValid = false;\n }\n }\n });\n\n if (!allFieldsValid) {\n \/\/ Scroll to the first invalid field if form is not valid\n const firstInvalidField = connectForm.querySelector('input:invalid:not(.hidden), textarea:invalid:not(.hidden), select:invalid:not(.hidden)');\n if (firstInvalidField) {\n firstInvalidField.focus();\n firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n return false; \/\/ Stop submission if validation fails\n }\n\n \/\/ Show loading state\n submitButton.disabled = true;\n submitLoadingSpinner.classList.remove('hidden');\n submitText.textContent = 'Submitting...';\n\n \/\/ Simulate API call delay for \"advanced\" feel\n await new Promise(resolve => setTimeout(resolve, 1500)); \n\n \/\/ Prepare data for mailto (for fallback\/logging purposes, though actual submission\n \/\/ would go to a backend API)\n const formData = new FormData(connectForm);\n let emailBody = \"New Inquiry from AcclaimLogix Website:\\n\\n\";\n let formType = connectForm.querySelector('.toggle-btn.active').dataset.formType;\n emailBody += `Form Type: ${formType === 'general' ? 'General Inquiry' : 'Talent Request'}\\n\\n`;\n\n for (let [key, value] of formData.entries()) {\n if (key === 'requireNDA') {\n emailBody += `Require NDA: ${value === 'on' ? 'Yes' : 'No'}\\n`;\n } else if (!document.getElementById(key) || !document.getElementById(key).closest('.hidden')) { \/\/ Only add visible fields\n \/\/ Improve readability of keys\n let readableKey = key.replace(\/([A-Z])\/g, ' $1').replace(\/^.\/, str => str.toUpperCase());\n emailBody += `${readableKey}: ${value}\\n`;\n }\n }\n \n \/\/ Construct mailto link\n const mailtoLink = `mailto:connect@acclaimlogix.com?subject=New%20${formType === 'general' ? 'General%20Inquiry' : 'Talent%20Request'}%20from%20Website&body=${encodeURIComponent(emailBody)}`;\n\n \/\/ For a real-world scenario, you would use fetch() here to send data to a backend endpoint:\n \/*\n try {\n const response = await fetch('\/api\/submit-form', { \/\/ Replace with your actual API endpoint\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(Object.fromEntries(formData))\n });\n\n if (response.ok) {\n showThankYouModal();\n } else {\n alert('There was an error submitting your form. Please try again later.');\n console.error('Form submission failed:', await response.text());\n }\n } catch (error) {\n alert('There was a network error. Please check your connection and try again.');\n console.error('Network error:', error);\n }\n *\/\n\n \/\/ SIMULATED SUCCESS FOR DEMO:\n showThankYouModal(); \/\/ Show modal on simulated success\n\n \/\/ Reset loading state\n submitButton.disabled = false;\n submitLoadingSpinner.classList.add('hidden');\n submitText.textContent = 'Submit Inquiry';\n \n \/\/ Attempt to open mailto link (browser behavior varies, will likely open new tab\/app)\n \/\/ This happens after the modal is shown due to the async nature and setTimeout\n window.location.href = mailtoLink; \n\n \/\/ Clear form (after user has a chance to see mailto if browser allows)\n connectForm.reset();\n return true; \/\/ Indicate successful handling (for onsubmit attribute)\n }\n\n \/\/ --- Thank You Modal Functions ---\n function showThankYouModal() {\n const modal = document.getElementById('thankYouModal');\n modal.classList.add('active');\n }\n\n function closeThankYouModal() {\n const modal = document.getElementById('thankYouModal');\n modal.classList.remove('active');\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Connect With Us \u2013 AcclaimLogix Let’s Build Something Intelligent Together. Your Vision. Our Expertise. Real Impact. Whether you’re exploring new […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2423","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/pages\/2423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/comments?post=2423"}],"version-history":[{"count":16,"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/pages\/2423\/revisions"}],"predecessor-version":[{"id":2697,"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/pages\/2423\/revisions\/2697"}],"wp:attachment":[{"href":"https:\/\/acclaimlogix.com\/wpalpress\/wp-json\/wp\/v2\/media?parent=2423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}