{"id":329,"date":"2026-09-11T11:38:05","date_gmt":"2026-09-11T11:38:05","guid":{"rendered":"https:\/\/ebunoluwa.name.ng\/klirview\/?page_id=329"},"modified":"2026-09-11T11:38:05","modified_gmt":"2026-09-11T11:38:05","slug":"get-quote","status":"publish","type":"page","link":"https:\/\/ebunoluwa.name.ng\/klirview\/get-quote\/","title":{"rendered":"Get Quote"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">    <style>\n        :root {\n            --primary-color: #3498db;\n            --secondary-color: #2c3e50;\n            --accent-color: darkorange;\n            --glass-bg: rgba(255, 255, 255, 0.15);\n            --glass-border: rgba(255, 255, 255, 0.2);\n            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n        }\n        \n\n        \n        .form-container {\n            width: 100%;\n\t\t\tmargin:3rem auto;\n            max-width: 800px;\n            background: var(--glass-bg);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border-radius: 20px;\n            border: 1px solid var(--glass-border);\n            box-shadow: var(--glass-shadow);\n            overflow: hidden;\n            padding: 30px;\n        }\n        \n        .form-header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        \n        .form-header h1 {\n            color: #333;\n\t\t\tfont-weight:600;\n            font-size: 2rem;\n            margin-bottom: 10px;\n        }\n        \n        .form-header p {\n            color: rgba(255, 255, 255, 0.8);\n\t\t\tcolor:#777;\n            font-size: 1.1rem;\n        }\n        \n        .progress-bar {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 40px;\n            position: relative;\n        }\n        \n        .progress-bar::before {\n            content: '';\n            position: absolute;\n            top: 15px;\n            left: 0;\n            width: 100%;\n            height: 4px;\n            background: rgba(255, 255, 255, 0.2);\n            background: rgba(150, 159, 150, 0.2);\n            z-index: 1;\n        }\n        \n        .progress-bar::after {\n            content: '';\n            position: absolute;\n            top: 15px;\n            left: 0;\n            width: 0%;\n            height: 4px;\n            background: var(--accent-color);\n            z-index: 2;\n            transition: width 0.5s ease;\n        }\n        \n        .step {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            background: rgba(255, 255, 255, 0.2);\n            background: rgb(150, 150, 150 );\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            color: white;\n            font-weight: bold;\n            position: relative;\n            z-index: 3;\n            transition: all 0.3s ease;\n        }\n        \n        .step.active {\n            background: var(--accent-color);\n            transform: scale(1.1);\n        }\n        \n        .step-label {\n            position: absolute;\n            bottom: -25px;\n            left: 50%;\n            transform: translateX(-50%);\n            color: white; color:#333;\n            font-size: 0.8rem;\n            white-space: nowrap;\n        }\n        \n        .form-step {\n            display: none;\n            animation: fadeIn 0.5s ease;\n        }\n        \n        .form-step.active {\n            display: block;\n        }\n        \n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        \n        .form-group {\n            margin-bottom: 20px;\n        }\n        \n        .form-group label {\n            display: block;\n            color: #333;\n            margin-bottom: 8px;\n            font-weight: 500;\n        }\n        \n        .form-control {\n            width: 100%;\n            padding: 12px 15px;\n            border-radius: 10px;\n            border: 1px solid var(--glass-border);\n            background: rgba(255, 255, 255, 0.1);\n            background: rgba(150, 150, 150, 0.3);\n            background: #f0f0f0;\n            color: white;\n            color: #333;\n            font-size: 1rem;\n            backdrop-filter: blur(5px);\n            transition: all 0.3s ease;\n        }\n        \n        .form-control:focus {\n            outline: none;\n            border-color: var(--accent-color);\n            box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.3);\n        }\n        \n        textarea.form-control {\n            min-height: 120px;\n            resize: vertical;\n        }\n        \n        .checkbox-group, .radio-group {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin-top: 10px;\n        }\n        \n        .myservices {\n        display:block!important\n        }\n        .myservices label { display : block;  }\n        \n        .checkbox-item, .radio-item {\n            display: flex;\n            align-items: center;\n            color: white;\n            cursor: pointer;\n        }\n        \n        .checkbox-item input, .radio-item input {\n            margin-right: 8px;\n            cursor: pointer;\n        }\n        \n        .switch-container {\n            display: flex;\n            align-items: center;\n            margin-top: 10px;\n        }\n        \n        .switch {\n            position: relative;\n            display: inline-block;\n            width: 60px;\n            height: 30px;\n            margin-right: 10px;\n        }\n        \n        .switch input {\n            opacity: 0;\n            width: 0;\n            height: 0;\n        }\n        \n        .slider {\n            position: absolute;\n            cursor: pointer;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-color: rgba(255, 255, 255, 0.2);\n\t\t\tbackground:#333;\n            transition: .4s;\n            border-radius: 34px;\n        }\n        \n        .slider:before {\n            position: absolute;\n            content: \"\";\n            height: 22px;\n            width: 22px;\n            left: 4px;\n            bottom: 4px;\n            background-color: white;\n            transition: .4s;\n            border-radius: 50%;\n        }\n        \n        input:checked + .slider {\n            background-color: var(--accent-color);\n        }\n        \n        input:checked + .slider:before {\n            transform: translateX(30px);\n        }\n        \n        .form-actions {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 30px;\n        }\n        \n        .btn {\n            padding: 12px 25px;\n            border-radius: 10px;\n            border: none;\n            font-size: 1rem;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n        \n        .btn-prev {\n            background: rgba(255, 255, 255, 0.2);\n            background: #333;\n            color: white;\n        }\n        \n        .btn-next, .btn-submit {\n            background: var(--accent-color);\n            color: white;\n        }\n        \n        .btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n        }\n        \n        .btn:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n            transform: none;\n            box-shadow: none;\n        }\n        \n        .summary-item {\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 10px;\n            padding: 15px;\n            margin-bottom: 15px;\n            color: white;\n        }\n        \n        .summary-item h3 {\n            margin-bottom: 10px;\n            color: var(--accent-color);\n        }\n        \n        .success-message {\n            text-align: center;\n            color: white;\n            padding: 30px;\n        }\n        \n        .success-message h2 {\n            font-size: 2rem;\n            margin-bottom: 15px;\n            color: var(--accent-color);\n        }\n        \n        .success-message p {\n            font-size: 1.1rem;\n            margin-bottom: 20px;\n        }\n        \n        .success-icon {\n            font-size: 4rem;\n            color: var(--accent-color);\n            margin-bottom: 20px;\n        }\n        \n        @media (max-width: 768px) {\n            .form-container {\n                padding: 20px;\n            }\n            \n            .checkbox-group, .radio-group {\n                flex-direction: column;\n            }\n            \n            .form-actions {\n                flex-direction: column;\n                gap: 15px;\n            }\n            \n            .btn {\n                width: 100%;\n            }\n        }\n    <\/style>\n\t\n\t\t\n\t\n\t<div class=\"form-container\">\n        <div class=\"form-header\">\n            <h1> Klirview Integrated Project Quote <\/h1>\n            <p>Complete the form below to receive a customized quote for your project<\/p>\n        <\/div>\n        \n        <div class=\"progress-bar\">\n            <div class=\"step active\" id=\"step1\">\n                1\n                <span class=\"step-label\">Services<\/span>\n            <\/div>\n            <div class=\"step\" id=\"step2\">\n                2\n                <span class=\"step-label\">Details<\/span>\n            <\/div>\n            <div class=\"step\" id=\"step3\">\n                3\n                <span class=\"step-label\">Timeline<\/span>\n            <\/div>\n            <div class=\"step\" id=\"step4\">\n                4\n                <span class=\"step-label\">Contact<\/span>\n            <\/div>\n        <\/div>\n        \n        <form id=\"quoteForm\" action=\"\/submit-quote\" method=\"POST\">\n            <!-- Step 1: Services -->\n            <div class=\"form-step active\" id=\"step1-content\">\n                <div class=\"form-group\">\n                    <label>Selec Services Needed:<\/label>\n                    <div class=\"checkbox-group myservices\">\n    \n    <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=construction\"> Building Construction\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=\"architect\"> Architectural Design\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=\"management\"> Project Management\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=\"interiordesign\"> Interior Design\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=\"renovation\"> Building Renovation\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"services[]\" value=\"development\"> Property Development\n                        <\/label>\n         \n                      \n                        \n                        \n                    <\/div>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label>Project Type:<\/label>\n                    <div class=\"radio-group\">\n                        <label class=\"radio-item\">\n                            <input type=\"radio\" name=\"projectType\" value=\"new\" checked> New Project\n                        <\/label>\n                        <label class=\"radio-item\">\n                            <input type=\"radio\" name=\"projectType\" value=\"redesign\"> Redesign\/Improvement\n                        <\/label>\n                        <label class=\"radio-item\">\n                            <input type=\"radio\" name=\"projectType\" value=\"consultation\"> Consultation Only\n                        <\/label>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(1)\">Next<\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Step 2: Project Details -->\n            <div class=\"form-step\" id=\"step2-content\">\n                <div class=\"form-group\">\n                    <label for=\"projectScope\">Project Scope Description:<\/label>\n                    <textarea class=\"form-control\" id=\"projectScope\" name=\"projectScope\" placeholder=\"Please describe your project in detail...\"><\/textarea>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"complexity\">Project Complexity:<\/label>\n                    <select class=\"form-control\" id=\"complexity\" name=\"complexity\">\n                        <option value=\"\">Select complexity level<\/option>\n                        <option value=\"simple\">Simple<\/option>\n                        <option value=\"moderate\">Moderate<\/option>\n                        <option value=\"complex\">Complex<\/option>\n                        <option value=\"highly-complex\">Highly Complex<\/option>\n                    <\/select>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label>Additional Requirements:<\/label>\n                    <div class=\"checkbox-group\">\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"requirements[]\" value=\"documentation\"> Technical Documentation\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"requirements[]\" value=\"testing\"> Testing &#038; Validation\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"requirements[]\" value=\"prototyping\"> Prototyping\n                        <\/label>\n                        <label class=\"checkbox-item\">\n                            <input type=\"checkbox\" name=\"requirements[]\" value=\"regulatory\"> Regulatory Compliance\n                        <\/label>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(2)\">Previous<\/button>\n                    <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(2)\">Next<\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Step 3: Timeline & Budget -->\n            <div class=\"form-step\" id=\"step3-content\">\n                <div class=\"form-group\">\n                    <label for=\"timeline\">Desired Timeline:<\/label>\n                    <select class=\"form-control\" id=\"timeline\" name=\"timeline\">\n                        <option value=\"\">Select timeline<\/option>\n                        <option value=\"urgent\">Urgent (1-2 weeks)<\/option>\n                        <option value=\"short\">Short (1 month)<\/option>\n                        <option value=\"medium\">Medium (1-3 months)<\/option>\n                        <option value=\"long\">Long (3-6 months)<\/option>\n                        <option value=\"flexible\">Flexible<\/option>\n                    <\/select>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"budget\">Estimated Budget Range:<\/label>\n                    <select class=\"form-control\" id=\"budget\" name=\"budget\">\n                        <option value=\"\">Select budget range<\/option>\n                        <option value=\"under-5k\">Under \u20a65,000,000<\/option>\n                        <option value=\"5k-15k\">\u20a65,000,000 &#8211; \u20a615,000,000<\/option>\n                        <option value=\"15k-50k\">\u20a615,000,000 &#8211; \u20a650,000,000<\/option>\n                        <option value=\"50k-100k\">\u20a650,000,000 &#8211; \u20a6100,000,000<\/option>\n                        <option value=\"over-100k\">Over \u20a6100,000,000<\/option>\n                    <\/select>\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <div class=\"switch-container\">\n                        <label class=\"switch\">\n                            <input type=\"checkbox\" id=\"ongoingSupport\" name=\"ongoingSupport\">\n                            <span class=\"slider\"><\/span>\n                        <\/label>\n                        <label for=\"ongoingSupport\">Require ongoing support\/maintenance<\/label>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(3)\">Previous<\/button>\n                    <button type=\"button\" class=\"btn btn-next\" onclick=\"nextStep(3)\">Next<\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Step 4: Contact Information -->\n            <div class=\"form-step\" id=\"step4-content\">\n                <div class=\"form-group\">\n                    <label for=\"fullName\">Full Name:<\/label>\n                    <input type=\"text\" class=\"form-control\" id=\"fullName\" name=\"fullName\" placeholder=\"Enter your full name\">\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"company\">Company\/Organization:<\/label>\n                    <input type=\"text\" class=\"form-control\" id=\"company\" name=\"company\" placeholder=\"Enter your company name\">\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"email\">Email Address:<\/label>\n                    <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" placeholder=\"Enter your email\">\n                <\/div>\n                \n    <input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"76de73d0d1\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/klirview\/wp-json\/wp\/v2\/pages\/329\" \/>            \n                \n                <div class=\"form-group\">\n                    <label for=\"phone\">Phone Number:<\/label>\n                    <input type=\"tel\" class=\"form-control\" id=\"phone\" name=\"phone\" placeholder=\"Enter your phone number\">\n                <\/div>\n                \n                <div class=\"form-group\">\n                    <label for=\"additionalInfo\">Additional Information:<\/label>\n                    <textarea class=\"form-control\" id=\"additionalInfo\" name=\"additionalInfo\" placeholder=\"Any additional information or special requirements...\"><\/textarea>\n                <\/div>\n                \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"btn btn-prev\" onclick=\"prevStep(4)\">Previous<\/button>\n                    <button type=\"button\" class=\"btn btn-submit\" onclick=\"submitForm()\">Submit Quote Request<\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- Success Message -->\n            <div class=\"form-step\" id=\"success-content\">\n                <div class=\"success-message\">\n                    <div class=\"success-icon\">\u2713<\/div>\n                    <h2>Quote Request Submitted!<\/h2>\n                    <p>Thank you for your interest in our engineering services. We&#8217;ve received your information and will contact you within 24 hours with a customized quote.<\/p>\n                    <button type=\"button\" class=\"btn btn-submit\" onclick=\"resetForm()\">Request Another Quote<\/button>\n                <\/div>\n            <\/div>\n        <\/form>\n    <\/div>\n\n    <script>\n        let currentStep = 1;\n        const totalSteps = 4;\n        \n        function updateProgressBar() {\n            \/\/ Update step indicators\n            for (let i = 1; i <= totalSteps; i++) {\n                const step = document.getElementById(`step${i}`);\n                if (i < currentStep) {\n                    step.classList.add('active');\n                } else if (i === currentStep) {\n                    step.classList.add('active');\n                } else {\n                    step.classList.remove('active');\n                }\n            }\n            \n            \/\/ Update progress line\n            const progressLine = document.querySelector('.progress-bar::after');\n            const progressPercentage = ((currentStep - 1) \/ (totalSteps - 1)) * 100;\n            document.querySelector('.progress-bar').style.setProperty('--progress-width', `${progressPercentage}%`);\n        }\n        \n        function showStep(stepNumber) {\n            \/\/ Hide all steps\n            for (let i = 1; i <= totalSteps + 1; i++) {\n                const stepContent = document.getElementById(`step${i}-content`);\n                if (stepContent) {\n                    stepContent.classList.remove('active');\n                }\n            }\n            \n            \/\/ Show current step\n            const currentStepContent = document.getElementById(`step${stepNumber}-content`);\n            if (currentStepContent) {\n                currentStepContent.classList.add('active');\n            }\n            \n            currentStep = stepNumber;\n            updateProgressBar();\n        }\n        \n        function nextStep(current) {\n            if (validateStep(current)) {\n                showStep(current + 1);\n            }\n        }\n        \n        function prevStep(current) {\n            showStep(current - 1);\n        }\n        \n        function validateStep(step) {\n            let isValid = true;\n            \n            if (step === 1) {\n                \n                const services = document.querySelectorAll('input[name=\"services[]\"]:checked');\n                if (services.length === 0) {\n                    alert('Please select at least one service.');\n                    isValid = false;\n                }\n                \n            } else if (step === 2) {\n                const projectScope = document.getElementById('projectScope').value;\n                const complexity = document.getElementById('complexity').value;\n                \n                if (projectScope.trim() === '') {\n                    alert('Please describe your project scope.');\n                    isValid = false;\n                } else if (complexity === '') {\n                    alert('Please select project complexity.');\n                    isValid = false;\n                }\n            } else if (step === 3) {\n                const timeline = document.getElementById('timeline').value;\n                const budget = document.getElementById('budget').value;\n                \n                if (timeline === '') {\n                    alert('Please select desired timeline.');\n                    isValid = false;\n                } else if (budget === '') {\n                    alert('Please select budget range.');\n                    isValid = false;\n                }\n            } else if (step === 4) {\n                const fullName = document.getElementById('fullName').value;\n                const email = document.getElementById('email').value;\n                \n                if (fullName.trim() === '') {\n                    alert('Please enter your full name.');\n                    isValid = false;\n                } else if (email.trim() === '' || !isValidEmail(email)) {\n                    alert('Please enter a valid email address.');\n                    isValid = false;\n                }\n            }\n            \n            \n            else if (step === 5) {\n                document.getElementById('quoteForm').submit();\n            }\n            \n            return isValid;\n        }\n        \n        function isValidEmail(email) {\n            const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n            return emailRegex.test(email);\n        }\n        \n        function submitForm() {\n            if (validateStep(4)) {\n                \/\/ In a real application, you would send the form data to a server here\n                \/\/ For this example, we'll just show the success message\n                document.getElementById('quoteForm').submit();\n                return\n                \/\/showStep(5);\n            }\n        }\n        \n        function resetForm() {\n            document.getElementById('quoteForm').reset();\n            showStep(1);\n        }\n        \n        \/\/ Initialize the form\n        updateProgressBar();\n    <\/script>\n\t\n\t<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-329","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/comments?post=329"}],"version-history":[{"count":1,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/329\/revisions"}],"predecessor-version":[{"id":330,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/329\/revisions\/330"}],"wp:attachment":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/media?parent=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}