{"id":9860,"date":"2023-11-03T12:45:52","date_gmt":"2023-11-03T05:45:52","guid":{"rendered":"https:\/\/www.doa.go.th\/rubberfund\/?page_id=9860"},"modified":"2026-02-09T08:31:03","modified_gmt":"2026-02-09T01:31:03","slug":"complaint-suggestion","status":"publish","type":"page","link":"https:\/\/www.doa.go.th\/rubberfund\/complaint-suggestion\/","title":{"rendered":"\u0e41\u0e08\u0e49\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\/\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30"},"content":{"rendered":"<div class=\"gb-container gb-container-a2973147 alignfull\">\n<div class=\"gb-container gb-container-adb4abc1\">\n\n<!-- \n  [\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 CSS \u0e40\u0e1e\u0e35\u0e49\u0e22\u0e19]\n  \u0e43\u0e0a\u0e49 CSS Isolation \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19 Theme \u0e40\u0e14\u0e34\u0e21\u0e02\u0e2d\u0e07 WordPress \u0e21\u0e32\u0e17\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\n-->\n\n<div id=\"complaint-system-isolation-wrapper\" class=\"cms-root-container\">\n    <!-- Load Google Font -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Mali:wght@300;400;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Load Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n    <style>\n        \/* 1. Reset values \u0e40\u0e09\u0e1e\u0e32\u0e30\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49 Theme \u0e2b\u0e25\u0e31\u0e01\u0e21\u0e32\u0e01\u0e27\u0e19 *\/\n        .cms-root-container, \n        .cms-root-container *, \n        .cms-root-container ::before, \n        .cms-root-container ::after {\n            box-sizing: border-box !important;\n            margin: 0;\n            padding: 0;\n            font-family: 'Mali', cursive !important;\n        }\n\n        .cms-root-container {\n            width: 100% !important;\n            max-width: 100% !important;\n            padding: 20px 10px !important;\n            background: transparent !important;\n        }\n\n        \/* 2. \u0e04\u0e2d\u0e19\u0e40\u0e17\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e2b\u0e25\u0e31\u0e01 *\/\n        .cms-card {\n            max-width: 750px !important;\n            margin: 0 auto !important;\n            background: #ffffff !important;\n            border-radius: 16px !important;\n            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;\n            overflow: hidden !important;\n            border: 1px solid #f3f4f6 !important;\n            display: block !important;\n            padding: 0 !important;\n        }\n\n        .cms-content-body {\n            padding: 30px !important;\n        }\n\n        \/* 3. \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 Input \u0e43\u0e2b\u0e49\u0e14\u0e39\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22\u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e42\u0e14\u0e19 Theme \u0e17\u0e31\u0e1a *\/\n        .cms-form-group {\n            margin-bottom: 20px !important;\n            text-align: left !important;\n        }\n\n        .cms-label {\n            display: block !important;\n            font-weight: 700 !important;\n            margin-bottom: 8px !important;\n            color: #1f2937 !important;\n            font-size: 16px !important;\n        }\n\n        .cms-input, .cms-textarea {\n            width: 100% !important;\n            padding: 12px 16px !important;\n            border: 2px solid #e5e7eb !important;\n            border-radius: 8px !important;\n            font-size: 16px !important;\n            transition: border-color 0.2s !important;\n            background-color: #ffffff !important;\n            color: #374151 !important;\n            outline: none !important;\n        }\n\n        .cms-input:focus, .cms-textarea:focus {\n            border-color: #4f46e5 !important;\n        }\n\n        \/* 4. \u0e1b\u0e38\u0e48\u0e21\u0e01\u0e14 *\/\n        .cms-btn-submit {\n            width: 100% !important;\n            background-color: #4f46e5 !important;\n            color: white !important;\n            padding: 15px !important;\n            border: none !important;\n            border-radius: 8px !important;\n            font-weight: 700 !important;\n            font-size: 18px !important;\n            cursor: pointer !important;\n            transition: background-color 0.2s !important;\n            margin-top: 10px !important;\n        }\n\n        .cms-btn-submit:hover {\n            background-color: #4338ca !important;\n        }\n\n        .cms-btn-submit:disabled {\n            background-color: #a5b4fc !important;\n            cursor: not-allowed !important;\n        }\n\n        \/* 5. Modal \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19 *\/\n        .cms-modal-overlay {\n            position: fixed !important;\n            top: 0 !important;\n            left: 0 !important;\n            width: 100% !important;\n            height: 100% !important;\n            background: rgba(0, 0, 0, 0.7) !important;\n            display: flex !important;\n            justify-content: center !important;\n            align-items: center !important;\n            z-index: 999999 !important;\n        }\n\n        .cms-modal-box {\n            background: white !important;\n            padding: 30px !important;\n            border-radius: 12px !important;\n            max-width: 400px !important;\n            width: 90% !important;\n            text-align: center !important;\n        }\n\n        .hidden { display: none !important; }\n    <\/style>\n\n    <div class=\"cms-card\">\n        <!-- Header -->\n        <div style=\"background: #4f46e5; padding: 20px; text-align: center;\">\n            <h1 style=\"color: white; font-size: 24px; font-weight: 700; margin: 0;\">\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h1>\n        <\/div>\n\n        <div class=\"cms-content-body\">\n            <form id=\"complaint-form-cms\">\n                <div class=\"cms-form-group\">\n                    <label class=\"cms-label\">\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 <span style=\"color: red;\">*<\/span><\/label>\n                    <input type=\"text\" id=\"fullName-cms\" required class=\"cms-input\">\n                <\/div>\n\n                <div class=\"cms-form-group\">\n                    <label class=\"cms-label\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c <span style=\"color: red;\">*<\/span><\/label>\n                    <input type=\"tel\" id=\"phoneNumber-cms\" required inputmode=\"numeric\" pattern=\"[0-9]*\" class=\"cms-input\" placeholder=\"0XXXXXXXXX\">\n                <\/div>\n\n                <div class=\"cms-form-group\">\n                    <label class=\"cms-label\">\u0e2d\u0e35\u0e40\u0e21\u0e25 <span style=\"color: red;\">*<\/span><\/label>\n                    <input type=\"email\" id=\"email-cms\" required class=\"cms-input\">\n                <\/div>\n\n                <div class=\"cms-form-group\">\n                    <label class=\"cms-label\">\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 <span style=\"color: red;\">*<\/span><\/label>\n                    <input type=\"text\" id=\"title-cms\" required class=\"cms-input\">\n                <\/div>\n\n                <div class=\"cms-form-group\">\n                    <label class=\"cms-label\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <span style=\"color: red;\">*<\/span><\/label>\n                    <textarea id=\"description-cms\" required rows=\"4\" class=\"cms-textarea\"><\/textarea>\n                <\/div>\n\n                <div class=\"cms-form-group\" style=\"background: #f9fafb; padding: 15px; border-radius: 8px;\">\n                    <div style=\"display: flex; align-items: flex-start;\">\n                        <input type=\"checkbox\" id=\"pdpaConsent-cms\" required style=\"width: 20px; height: 20px; margin-right: 10px; margin-top: 3px;\">\n                        <label for=\"pdpaConsent-cms\" style=\"font-size: 14px; color: #4b5563; cursor: pointer;\">\n                            \u0e09\u0e31\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e48\u0e32\u0e19\u0e41\u0e25\u0e30\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a \n                            <a href=\"https:\/\/www.doa.go.th\/th\/privacy-policy\/\" target=\"_blank\" style=\"color: #4f46e5; text-decoration: underline; font-weight: 700;\">\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 (PDPA)<\/a> \n                            \u0e41\u0e25\u0e30\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\n                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <button type=\"submit\" id=\"submit-btn-cms\" class=\"cms-btn-submit\">\n                    \u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\n                <\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <!-- Alert Modal -->\n    <div id=\"modal-cms\" class=\"cms-modal-overlay hidden\">\n        <div class=\"cms-modal-box\">\n            <h3 id=\"modal-title-cms\" style=\"font-size: 20px; font-weight: 700; margin-bottom: 15px;\">\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19<\/h3>\n            <p id=\"modal-msg-cms\" style=\"margin-bottom: 25px; color: #4b5563;\"><\/p>\n            <button id=\"modal-close-cms\" style=\"width: 100%; padding: 10px; background: #1f2937; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 700;\">\u0e15\u0e01\u0e25\u0e07<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            const gasUrl = \"https:\/\/script.google.com\/macros\/s\/AKfycbz9i3FlUKCzIDWp4EbYBGrrbhLeslEx8XUSFQK6GpKo5oWs2o5_KrBNyUkiKTohb7gNBw\/exec\";\n            \n            const form = document.getElementById('complaint-form-cms');\n            const submitBtn = document.getElementById('submit-btn-cms');\n            const phoneInput = document.getElementById('phoneNumber-cms');\n            const modal = document.getElementById('modal-cms');\n            \n            \/\/ \u0e08\u0e33\u0e01\u0e31\u0e14\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\n            phoneInput.addEventListener('input', (e) => {\n                e.target.value = e.target.value.replace(\/[^0-9]\/g, '');\n            });\n\n            function showModal(title, msg, isSuccess) {\n                document.getElementById('modal-title-cms').textContent = title;\n                document.getElementById('modal-title-cms').style.color = isSuccess ? '#059669' : '#dc2626';\n                document.getElementById('modal-msg-cms').textContent = msg;\n                modal.classList.remove('hidden');\n            }\n\n            document.getElementById('modal-close-cms').addEventListener('click', () => {\n                modal.classList.add('hidden');\n            });\n\n            form.addEventListener('submit', async (e) => {\n                e.preventDefault();\n                \n                const data = {\n                    Timestamp: new Date().toLocaleString('th-TH'),\n                    FullName: document.getElementById('fullName-cms').value.trim(),\n                    PhoneNumber: phoneInput.value.trim(),\n                    Email: document.getElementById('email-cms').value.trim(),\n                    Title: document.getElementById('title-cms').value.trim(),\n                    Description: document.getElementById('description-cms').value.trim(),\n                    PDPA_Consent: document.getElementById('pdpaConsent-cms').checked ? '\u0e22\u0e2d\u0e21\u0e23\u0e31\u0e1a' : '\u0e1b\u0e0f\u0e34\u0e40\u0e2a\u0e18',\n                    SubmitterId: 'WP-' + Date.now()\n                };\n\n                submitBtn.disabled = true;\n                submitBtn.textContent = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2a\u0e48\u0e07...';\n\n                try {\n                    const query = new URLSearchParams(data).toString();\n                    await fetch(`${gasUrl}?${query}`, { mode: 'no-cors' });\n                    showModal(\"\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\", \"\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e40\u0e02\u0e49\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27\", true);\n                    form.reset();\n                } catch (err) {\n                    showModal(\"\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\", \"\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\");\n                } finally {\n                    submitBtn.disabled = false;\n                    submitBtn.textContent = '\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19';\n                }\n            });\n        })();\n    <\/script>\n<\/div>\n\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e08\u0e49\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 * \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c * \u0e2d\u0e35\u0e40\u0e21 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-9860","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/9860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/comments?post=9860"}],"version-history":[{"count":8,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/9860\/revisions"}],"predecessor-version":[{"id":12731,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/9860\/revisions\/12731"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/media?parent=9860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}