{"id":955,"date":"2021-01-06T12:23:41","date_gmt":"2021-01-06T05:23:41","guid":{"rendered":"https:\/\/qa.mcu.ac.th\/?page_id=955"},"modified":"2025-12-22T16:26:13","modified_gmt":"2025-12-22T09:26:13","slug":"contactus","status":"publish","type":"page","link":"https:\/\/qa.mcu.ac.th\/index.php\/contactus\/","title":{"rendered":"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d"},"content":{"rendered":"<h3>\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2d\u0e18\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e14\u0e35<\/h3>\n<p>\u0e2b\u0e49\u0e2d\u0e07 \u0e53\u0e50\u0e56 \u0e0a\u0e31\u0e49\u0e19 \u0e53 \u0e15\u0e36\u0e01\u0e2d\u0e18\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e14\u0e35 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e21\u0e2b\u0e32\u0e08\u0e38\u0e2c\u0e32\u0e25\u0e07\u0e01\u0e23\u0e13\u0e23\u0e32\u0e0a\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 \u0e15.\u0e25\u0e33\u0e44\u0e17\u0e23 \u0e2d.\u0e27\u0e31\u0e07\u0e19\u0e49\u0e2d\u0e22 \u0e08.\u0e1e\u0e23\u0e30\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e2d\u0e22\u0e38\u0e18\u0e22\u0e32 \u0e51\u0e53\u0e51\u0e57\u0e50<br \/>\u0e42\u0e17\u0e23\/\u0e42\u0e17\u0e23\u0e2a\u0e32\u0e23 \u0e50\u0e53\u0e55-\u0e52\u0e54\u0e58-\u0e50\u0e50\u0e50 \u0e15\u0e48\u0e2d \u0e58\u0e57\u0e57\u0e56,\u0e58\u0e50\u0e51\u0e51<br \/>email: mcuqa58@gmail.com<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 1;\" tabindex=\"0\" src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3868.047076501138!2d100.63369311713119!3d14.192021094026442!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTTCsDExJzMxLjUiTiAxMDDCsDM4JzA1LjQiRQ!5e0!3m2!1sth!2sth!4v1609910507498!5m2!1sth!2sth\" width=\"100%\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" aria-hidden=\"false\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-955_e4fc40-63 .kt-block-spacer{height:89px;}.wp-block-kadence-spacer.kt-block-spacer-955_e4fc40-63 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-955_e4fc40-63\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\/\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30<\/h2>\n\n\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <style>\n        \/* Custom animations not covered by Tailwind default config *\/\n        @keyframes fade-in-up {\n            0% {\n                opacity: 0;\n                transform: translateY(10px);\n            }\n            100% {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        .animate-fade-in {\n            animation: fade-in-up 0.5s ease-out forwards;\n        }\n    <\/style>\n\n\n        <!-- Form Section -->\n        <div class=\"p-8\">\n            <form id=\"contactForm\" class=\"space-y-6\">\n                \n                <!-- Name Field -->\n                <div>\n                    <label for=\"name\" class=\"block text-sm font-medium text-slate-700 mb-1\">Full Name<\/label>\n                    <div class=\"relative\">\n                        <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\">\n                            <!-- User Icon SVG -->\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <input type=\"text\" id=\"name\" name=\"name\" required \n                            class=\"block w-full pl-10 pr-3 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-slate-50 placeholder-slate-400\" \n                            placeholder=\"Jane Doe\">\n                    <\/div>\n                <\/div>\n\n                <!-- Email Field -->\n                <div>\n                    <label for=\"email\" class=\"block text-sm font-medium text-slate-700 mb-1\">Email Address<\/label>\n                    <div class=\"relative\">\n                        <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\">\n                            <!-- Mail Icon SVG -->\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <input type=\"email\" id=\"email\" name=\"email\" required \n                            class=\"block w-full pl-10 pr-3 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-slate-50 placeholder-slate-400\" \n                            placeholder=\"jane@gmail.com\"> \n                    <\/div>\n                <\/div>\n\n                <!-- Subject Field -->\n                <div>\n                    <label for=\"subject\" class=\"block text-sm font-medium text-slate-700 mb-1\">Subject<\/label>\n                    <select id=\"subject\" name=\"subject\" class=\"block w-full pl-3 pr-10 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-slate-50 text-slate-700\">\n                        <option value=\"general\">\u0e41\u0e08\u0e49\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c<\/option>\n                        <option value=\"support\">\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30\u0e17\u0e32\u0e07\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04<\/option>\n            \n                        <option value=\"feedback\">Feedback<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Message Field -->\n                <div>\n                    <label for=\"message\" class=\"block text-sm font-medium text-slate-700 mb-1\">Message<\/label>\n                    <textarea id=\"message\" name=\"message\" rows=\"4\" required\n                        class=\"block w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-slate-50 placeholder-slate-400 resize-none\" \n                        placeholder=\"How can we help you today?\"><\/textarea>\n                <\/div>\n\n                <!-- Submit Button -->\n                <button type=\"submit\" class=\"w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all transform hover:-translate-y-0.5\">\n                    <span>Send Message<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 ml-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" \/>\n                    <\/svg>\n                <\/button>\n            <\/form>\n            \n            <!-- Success Message (Hidden by default) -->\n            <div id=\"successMessage\" class=\"hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-center animate-fade-in\">\n                <div class=\"flex flex-col items-center\">\n                    <div class=\"h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mb-2\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-green-800 font-medium\">Message Sent!<\/h3>\n                    <p class=\"text-green-600 text-sm mt-1\">Thank you for contacting us. We&#8217;ll be in touch shortly.<\/p>\n                <\/div>\n                <button id=\"resetBtn\" class=\"mt-4 text-sm text-green-700 font-medium hover:underline\">Send another message<\/button>\n            <\/div>\n\n        <\/div>\n        \n        <!-- Footer area -->\n        <div class=\"bg-slate-50 px-8 py-4 border-t border-slate-100 text-center\">\n            <p class=\"text-xs text-slate-500\">&copy; 2024 Your Company. All rights reserved.<\/p>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const form = document.getElementById('contactForm');\n            const successMessage = document.getElementById('successMessage');\n            const resetBtn = document.getElementById('resetBtn');\n            const submitBtn = form.querySelector('button[type=\"submit\"]');\n            const originalBtnContent = submitBtn.innerHTML;\n\n            \/\/ PASTE YOUR GOOGLE APPS SCRIPT WEB APP URL HERE\n            const GOOGLE_SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycby6lHiID0mKEz5BOwpF5t7oAKDJy4d5OCyZTWpchSJXhHz1lFeCPYE1mSbbcbkM3DnpfA\/exec';\n\n            form.addEventListener('submit', (e) => {\n                e.preventDefault();\n                \n                \/\/ Show loading state\n                submitBtn.disabled = true;\n                submitBtn.innerHTML = `\n                    <svg class=\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n                    <\/svg>\n                    Sending...\n                `;\n\n                \/\/ Prepare form data\n                const formData = new FormData(form);\n\n                \/\/ Send data to Google Sheets\n                \/\/ We use 'no-cors' mode because Google Scripts don't return standard CORS headers for simple POSTs,\n                \/\/ but the data will still be received by the sheet.\n                fetch(GOOGLE_SCRIPT_URL, {\n                    method: 'POST',\n                    mode: 'no-cors',\n                    body: formData\n                })\n                .then(response => {\n                    \/\/ With no-cors, we can't check response.ok, so we assume success if no network error\n                    console.log('Success!', response);\n                    \n                    \/\/ Hide form, show success\n                    form.classList.add('hidden');\n                    successMessage.classList.remove('hidden');\n                    \n                    \/\/ Reset button state\n                    submitBtn.disabled = false;\n                    submitBtn.innerHTML = originalBtnContent;\n                })\n                .catch(error => {\n                    console.error('Error!', error.message);\n                    alert('There was an error sending your message. Please try again.');\n                    \n                    submitBtn.disabled = false;\n                    submitBtn.innerHTML = originalBtnContent;\n                });\n            });\n\n            resetBtn.addEventListener('click', () => {\n                form.reset();\n                successMessage.classList.add('hidden');\n                form.classList.remove('hidden');\n                \/\/ Re-trigger animation\n                form.classList.remove('animate-fade-in');\n                void form.offsetWidth; \/\/ trigger reflow\n                form.classList.add('animate-fade-in');\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-955_455cd0-b5 .kt-block-spacer{height:60px;}.wp-block-kadence-spacer.kt-block-spacer-955_455cd0-b5 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-955_455cd0-b5\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n\n<div class=\"post-views content-post post-955 entry-meta load-static\">\r\n\t\t\t\t<span class=\"post-views-icon dashicons dashicons-chart-bar\"><\/span> <span class=\"post-views-label\">Post Views:<\/span> <span class=\"post-views-count\">14<\/span>\r\n\t\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2d\u0e18\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e14\u0e35 \u0e2b\u0e49\u0e2d\u0e07 \u0e53\u0e50\u0e56 \u0e0a\u0e31\u0e49\u0e19 \u0e53 \u0e15\u0e36\u0e01\u0e2d\u0e18\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e14\u0e35 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e21\u0e2b\u0e32\u0e08\u0e38\u0e2c\u0e32\u0e25\u0e07\u0e01\u0e23\u0e13\u0e23\u0e32\u0e0a\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 \u0e15.\u0e25\u0e33\u0e44\u0e17\u0e23 \u0e2d.\u0e27\u0e31\u0e07\u0e19\u0e49\u0e2d\u0e22 \u0e08.\u0e1e\u0e23\u0e30\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e2d\u0e22\u0e38\u0e18\u0e22\u0e32 \u0e51\u0e53\u0e51\u0e57\u0e50\u0e42\u0e17\u0e23\/\u0e42\u0e17\u0e23\u0e2a\u0e32\u0e23 \u0e50\u0e53\u0e55-\u0e52\u0e54\u0e58-\u0e50\u0e50\u0e50 \u0e15\u0e48\u0e2d \u0e58\u0e57\u0e57\u0e56,\u0e58\u0e50\u0e51\u0e51email: mcuqa58@gmail.com \ufeff \u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\/\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30 Full Name Email Address Subject \u0e41\u0e08\u0e49\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30\u0e17\u0e32\u0e07\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04Feedback Message Send Message Message Sent! Thank you for contacting us. We&#8217;ll be in touch shortly. Send another message &copy; 2024 Your Company. All rights reserved.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rating_form_position":"","rating_results_position":"","mr_structured_data_type":"","footnotes":""},"multi-rating":{"mr_rating_results":[{"adjusted_star_result":0,"star_result":0,"total_max_option_value":5,"adjusted_score_result":0,"score_result":0,"percentage_result":0,"adjusted_percentage_result":0,"count":0,"post_id":955}]},"_links":{"self":[{"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/pages\/955"}],"collection":[{"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/comments?post=955"}],"version-history":[{"count":15,"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/pages\/955\/revisions"}],"predecessor-version":[{"id":10743,"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/pages\/955\/revisions\/10743"}],"wp:attachment":[{"href":"https:\/\/qa.mcu.ac.th\/index.php\/wp-json\/wp\/v2\/media?parent=955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}