
{"id":881,"date":"2025-04-02T15:09:41","date_gmt":"2025-04-02T09:39:41","guid":{"rendered":"https:\/\/stagging-tib.tecnixs.com\/institute\/?page_id=881"},"modified":"2025-04-02T19:27:38","modified_gmt":"2025-04-02T13:57:38","slug":"feedback","status":"publish","type":"page","link":"https:\/\/stagging-tib.tecnixs.com\/institute\/feedback\/","title":{"rendered":"Feedback"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Feedback Form<\/title>\n    <style>\n       \n        .feedback-container {\n            max-width: 700px;\n            margin: 0 auto;\n            background: #ffffff;\n            padding: 30px;\n            border-radius: 8px;\n            \n        }\n        \n        .form-header {\n            text-align: left;\n            margin-bottom: 25px;\n        }\n        \n        .form-header h2 {\n            color: #333;\n            margin: 0;\n            font-weight: 600;\n        }\n        \n        .form-header p {\n            color: #666;\n            font-size: 14px;\n            margin-top: 10px;\n        }\n        \n        .form-group {\n            margin-bottom: 20px;\n        }\n        \n        label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 500;\n            color: #444;\n        }\n        \n        .required::after {\n            content: \" *\";\n            color: #e32;\n        }\n        \n        input[type=\"text\"],\n        input[type=\"email\"],\n        input[type=\"tel\"],\n        textarea,\n        select {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 14px;\n            transition: border-color 0.3s;\n        }\n        \n        input[type=\"text\"]:focus,\n        input[type=\"email\"]:focus,\n        input[type=\"tel\"]:focus,\n        textarea:focus,\n        select:focus {\n            border-color: #4a90e2;\n            outline: none;\n        }\n        \n        textarea {\n            min-height: 120px;\n            resize: vertical;\n        }\n        \n        select {\n            background-color: white;\n            height: 42px;\n        }\n        \n        .captcha-container {\n            display: flex;\n            align-items: center;\n            margin-bottom: 20px;\n            flex-wrap: wrap;\n        }\n        \n        .captcha-box {\n            background-color: #e9f022;\n            padding: 8px 15px;\n            border-radius: 4px;\n            font-size: 20px;\n            font-weight: bold;\n            letter-spacing: 5px;\n            margin-right: 15px;\n            user-select: none;\n            color: #333;\n            font-family: 'Courier New', monospace;\n            border: 1px solid #ddd;\n            min-width: 100px;\n            text-align: center;\n        }\n        \n        .refresh-captcha {\n            background: none;\n            border: none;\n            color: #4a90e2;\n            cursor: pointer;\n            font-size: 20px;\n            padding: 0;\n            margin-left: 10px;\n        }\n        \n        .refresh-captcha:hover {\n            color: #357abD;\n        }\n        \n        .captcha-input {\n            width: 150px !important;\n            margin-top: 10px;\n        }\n        \n        .submit-btn {\n            background-color: #9e363a;\n            color: white;\n            border: none;\n            padding: 12px 24px;\n            font-size: 16px;\n            font-weight: 500;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.3s;\n            width: 100%;\n        }\n        \n        .submit-btn:hover {\n            background-color: #d33c41;\n        }\n        \n        .error-message {\n            color: #e32;\n            font-size: 12px;\n            margin-top: 5px;\n            display: none;\n        }\n        \n        @media screen and (max-width: 600px) {\n            .feedback-container {\n                padding: 20px;\n            }\n            \n            input[type=\"text\"],\n            input[type=\"email\"],\n            input[type=\"tel\"],\n            textarea,\n            select {\n                padding: 10px;\n            }\n            \n            .captcha-container {\n                flex-direction: column;\n                align-items: flex-start;\n            }\n            \n            .captcha-box {\n                margin-bottom: 10px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"feedback-container\">\n        <div class=\"form-header\">\n            <h2>Feedback Form<\/h2>\n            <p>We appreciate your valuable feedback. Please send suggestions or comments about your experience with us. <br>\nThis will help during the following feedback time.<\/p>\n        <\/div>\n        \n        <form id=\"feedbackForm\">\n            <div class=\"form-group\">\n                <label for=\"name\" class=\"required\">Name<\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" required>\n                <div class=\"error-message\" id=\"name-error\">Please enter your name<\/div>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label for=\"email\" class=\"required\">Email<\/label>\n                <input type=\"email\" id=\"email\" name=\"email\" required>\n                <div class=\"error-message\" id=\"email-error\">Please enter a valid email address<\/div>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label for=\"phone\">Phone<\/label>\n                <input type=\"tel\" id=\"phone\" name=\"phone\">\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label for=\"country\">Country\/State<\/label>\n                <input type=\"text\" id=\"country\" name=\"country\">\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label for=\"subject\" class=\"required\">Subject<\/label>\n                <input type=\"text\" id=\"subject\" name=\"subject\" required>\n                <div class=\"error-message\" id=\"subject-error\">Please enter a subject<\/div>\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label for=\"feedback\" class=\"required\">Please send your feedback<\/label>\n                <textarea id=\"feedback\" name=\"feedback\" required><\/textarea>\n                <div class=\"error-message\" id=\"feedback-error\">Please enter your feedback<\/div>\n            <\/div>\n            \n            <div class=\"captcha-container\">\n                <div>\n                    <label for=\"captcha\" class=\"required\">Captcha<\/label>\n                    <div style=\"display: flex; align-items: center;\">\n                        <span class=\"captcha-box\" id=\"captchaText\"><\/span>\n                        <button type=\"button\" class=\"refresh-captcha\" id=\"refreshCaptcha\" style=\"margin-right: 20px;\">\u21bb<\/button>\n                    <\/div>\n                <\/div>\n                <div style=\"flex-grow: 1;\" >\n                    <input type=\"text\" id=\"captcha\" name=\"captcha\" class=\"captcha-input\" required placeholder=\"Enter code\" style=\"margin-top: 25px;\">\n                    <div class=\"error-message\" id=\"captcha-error\" >Please enter the correct captcha code<\/div>\n                <\/div>\n            <\/div>\n            \n            <button type=\"submit\" class=\"submit-btn\">Submit<\/button>\n        <\/form>\n    <\/div>\n\n    <script>\n        \/\/ Generate random captcha\n        function generateCaptcha() {\n            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n            let captcha = '';\n            for (let i = 0; i < 4; i++) {\n                captcha += chars.charAt(Math.floor(Math.random() * chars.length));\n            }\n            document.getElementById('captchaText').textContent = captcha;\n            return captcha;\n        }\n\n        \/\/ Store captcha value\n        let currentCaptcha = generateCaptcha();\n\n        \/\/ Refresh captcha\n        document.getElementById('refreshCaptcha').addEventListener('click', function() {\n            currentCaptcha = generateCaptcha();\n        });\n\n        \/\/ Form validation\n        document.getElementById('feedbackForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n            \n            let isValid = true;\n            \n            \/\/ Validate name\n            const name = document.getElementById('name').value.trim();\n            if (!name) {\n                document.getElementById('name-error').style.display = 'block';\n                isValid = false;\n            } else {\n                document.getElementById('name-error').style.display = 'none';\n            }\n            \n            \/\/ Validate email\n            const email = document.getElementById('email').value.trim();\n            const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n            if (!email || !emailPattern.test(email)) {\n                document.getElementById('email-error').style.display = 'block';\n                isValid = false;\n            } else {\n                document.getElementById('email-error').style.display = 'none';\n            }\n            \n            \/\/ Validate subject\n            const subject = document.getElementById('subject').value.trim();\n            if (!subject) {\n                document.getElementById('subject-error').style.display = 'block';\n                isValid = false;\n            } else {\n                document.getElementById('subject-error').style.display = 'none';\n            }\n            \n            \/\/ Validate feedback\n            const feedback = document.getElementById('feedback').value.trim();\n            if (!feedback) {\n                document.getElementById('feedback-error').style.display = 'block';\n                isValid = false;\n            } else {\n                document.getElementById('feedback-error').style.display = 'none';\n            }\n            \n            \/\/ Validate captcha\n            const captchaInput = document.getElementById('captcha').value.trim();\n            if (!captchaInput || captchaInput !== currentCaptcha) {\n                document.getElementById('captcha-error').style.display = 'block';\n                isValid = false;\n            } else {\n                document.getElementById('captcha-error').style.display = 'none';\n            }\n            \n            \/\/ If everything is valid, submit the form\n            if (isValid) {\n                \/\/ Here you would typically send the form data to your server\n                alert('Thank you for your feedback! Your message has been submitted.');\n                this.reset();\n                currentCaptcha = generateCaptcha();\n            }\n        });\n        \n        \/\/ Initialize captcha on page load\n        document.addEventListener('DOMContentLoaded', function() {\n            generateCaptcha();\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Feedback Form Feedback Form We appreciate your valuable feedback. Please send suggestions or comments about your experience with us. This [&hellip;]<\/p>\n","protected":false},"author":166,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"left-sidebar","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"boxed","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-881","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/pages\/881"}],"collection":[{"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/comments?post=881"}],"version-history":[{"count":17,"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/pages\/881\/revisions"}],"predecessor-version":[{"id":902,"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/pages\/881\/revisions\/902"}],"wp:attachment":[{"href":"https:\/\/stagging-tib.tecnixs.com\/institute\/wp-json\/wp\/v2\/media?parent=881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}