\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 | EDMS LPSCI Register<\/title>\r\n <style>\r\n \/* CSS \u0e08\u0e32\u0e01\u0e42\u0e04\u0e49\u0e14\u0e40\u0e14\u0e34\u0e21 (\u0e15\u0e31\u0e14\u0e2d\u0e2d\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e23\u0e30\u0e0a\u0e31\u0e1a) *\/\r\n \/* ... (\u0e42\u0e04\u0e49\u0e14 CSS \u0e40\u0e14\u0e34\u0e21 \u0e17\u0e35\u0e48\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e40\u0e15\u0e47\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21) ... *\/\r\n body {\r\n height: 100vh; width: 100vw; font-family: Arial, sans-serif; background-color: #e9eef7; display: flex; justify-content: center; align-items: center; margin: 0; padding: 20px; box-sizing: border-box;\r\n }\r\n\r\n .register-container {\r\n background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 550px; text-align: center;\r\n }\r\n\r\n .logo { margin-bottom: 20px; }\r\n .logo img { max-width: 150px; height: auto; }\r\n h1 { color: #1a1a1a; margin-bottom: 30px; font-size: 1.6em; border-bottom: 2px solid #007bff; padding-bottom: 10px; }\r\n .input-group { margin-bottom: 18px; text-align: left; }\r\n .input-group label { display: block; margin-bottom: 6px; color: #333; font-weight: bold; }\r\n .form-row { display: flex; gap: 20px; }\r\n .form-row .input-group { flex: 1; }\r\n .input-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1em; }\r\n .input-group input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); }\r\n #password-strength { height: 10px; background: #eee; border-radius: 5px; margin-top: 5px; overflow: hidden; }\r\n #password-strength-bar { height: 100%; width: 0%; transition: width 0.3s, background-color 0.3s; }\r\n #password-strength-text { font-size: 0.8em; margin-top: 5px; color: #666; text-align: right; }\r\n .register-button { width: 100%; padding: 12px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; margin-top: 25px; transition: background-color 0.3s; }\r\n .register-button:hover { background-color: #1e7e34; }\r\n .back-to-login { margin-top: 20px; font-size: 0.9em; }\r\n .back-to-login a { color: #007bff; text-decoration: none; }\r\n .back-to-login a:hover { text-decoration: underline; }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"register-container\">\r\n <div class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/i.postimg.cc\/cgHPgwhV\/(n)LPSCI-LOGO-NAVI-copy-2.png\" alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49 EDMS LPSCI\">\r\n <\/div>\r\n \r\n <h1>EDMS LPSCI Register<\/h1>\r\n\r\n <form id=\"registerForm\"> \r\n \r\n <div class=\"form-row\">\r\n <div class=\"input-group\">\r\n <label for=\"firstname\">\u0e0a\u0e37\u0e48\u0e2d<\/label>\r\n <input type=\"text\" id=\"firstname\" name=\"\u0e0a\u0e37\u0e48\u0e2d\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"lastname\">\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\r\n <input type=\"text\" id=\"lastname\" name=\"\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"dob\">\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14<\/label>\r\n <input type=\"date\" id=\"dob\" name=\"\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"phone\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\" pattern=\"[0-9]{10}\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 08XXXXXXXX\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"email\">E-mail<\/label>\r\n <input type=\"email\" id=\"email\" name=\"E-mail\" placeholder=\"example@domain.com\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"username\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (User)<\/label>\r\n <input type=\"text\" id=\"username\" name=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"password\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 (Password)<\/label>\r\n <input type=\"password\" id=\"password\" name=\"\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\" onkeyup=\"checkPasswordStrength(this.value)\" required>\r\n \r\n <div id=\"password-strength\">\r\n <div id=\"password-strength-bar\"><\/div>\r\n <\/div>\r\n <div id=\"password-strength-text\">\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01<\/div>\r\n <\/div>\r\n\r\n <button type=\"button\" class=\"register-button\" onclick=\"sendDataToGoogleSheet()\">\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01<\/button>\r\n <\/form>\r\n \r\n <div class=\"back-to-login\">\r\n \u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27? <a href=\"https:\/\/edms.lpsci.ac.th\/?page_id=110\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/a>\r\n<\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ *** 1. \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e48\u0e32 GOOGLE_FORM_URL \u0e14\u0e49\u0e27\u0e22 URL \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Form Submission \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 ***\r\n const GOOGLE_FORM_URL = 'YOUR_GOOGLE_FORM_SUBMISSION_URL'; \r\n \/\/ \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:https:\/\/docs.google.com\/spreadsheets\/d\/1TYu-vAtWScSLG4C7lBH8A9Kmf4bV3g6wifk12cesf3c\/edit?usp=sharing';\r\n\r\n \/\/ *** 2. Mapping \u0e0a\u0e37\u0e48\u0e2d\u0e0a\u0e48\u0e2d\u0e07 (name attribute) \u0e43\u0e19 HTML \u0e01\u0e31\u0e1a ID \u0e02\u0e2d\u0e07\u0e0a\u0e48\u0e2d\u0e07\u0e43\u0e19 Google Form ***\r\n \/\/ *** \u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e2b\u0e32 ID \u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e08\u0e32\u0e01\u0e42\u0e04\u0e49\u0e14 Embed \u0e02\u0e2d\u0e07 Google Form \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e40\u0e2d\u0e07 ***\r\n const FIELD_MAPPING = {\r\n '\u0e0a\u0e37\u0e48\u0e2d': 'entry.123456789', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25': 'entry.987654321', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14': 'entry.112233445', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23': 'entry.678901234', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n 'E-mail': 'entry.543219876', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19': 'entry.234567890', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19': 'entry.901234567', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n };\r\n\r\n\r\n async function sendDataToGoogleSheet() {\r\n const form = document.getElementById('registerForm');\r\n \r\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e32\u0e21\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 HTML5\r\n if (!form.checkValidity()) {\r\n \/\/ \u0e16\u0e49\u0e32\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e43\u0e2b\u0e49\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\r\n form.reportValidity();\r\n return;\r\n }\r\n\r\n const formData = new FormData(form);\r\n const data = new URLSearchParams();\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Payload \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07 Google Form\r\n for (const [key, value] of formData.entries()) {\r\n const formId = FIELD_MAPPING[key];\r\n if (formId) {\r\n data.append(formId, value);\r\n }\r\n }\r\n\r\n try {\r\n \/\/ \u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 Fetch API\r\n const response = await fetch(GOOGLE_FORM_URL, {\r\n method: 'POST',\r\n mode: 'no-cors', \/\/ \u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Google Form Submission\r\n body: data,\r\n });\r\n \r\n \/\/ \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\r\n alert('\u2728 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27! \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07 Google Sheet \u0e41\u0e25\u0e49\u0e27');\r\n \r\n \/\/ \u0e25\u0e49\u0e32\u0e07\u0e1f\u0e2d\u0e23\u0e4c\u0e21\r\n form.reset();\r\n \r\n } catch (error) {\r\n console.error('Error submitting form:', error);\r\n alert('\u26a0\ufe0f \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25! \u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07');\r\n }\r\n }\r\n \r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 checkPasswordStrength \u0e40\u0e14\u0e34\u0e21\u0e22\u0e31\u0e07\u0e04\u0e07\u0e2d\u0e22\u0e39\u0e48\r\n function checkPasswordStrength(password) {\r\n \/\/ ... (\u0e42\u0e04\u0e49\u0e14 JavaScript \u0e02\u0e2d\u0e07 checkPasswordStrength \u0e40\u0e14\u0e34\u0e21) ...\r\n const bar = document.getElementById('password-strength-bar');\r\n const text = document.getElementById('password-strength-text');\r\n let score = 0;\r\n let strengthText = '\u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01';\r\n let barColor = '#dc3545'; \r\n let barWidth = 0;\r\n \r\n if (password.length >= 8) { score += 1; }\r\n if (password.match(\/[a-z]\/)) { score += 1; }\r\n if (password.match(\/[A-Z]\/)) { score += 1; }\r\n if (password.match(\/\\d\/)) { score += 1; }\r\n if (password.match(\/[^a-zA-Z\\d\\s]\/)) { score += 1; }\r\n\r\n switch(score) {\r\n case 0:\r\n case 1: strengthText = '\u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01'; barColor = '#dc3545'; barWidth = 20; break;\r\n case 2: strengthText = '\u0e2d\u0e48\u0e2d\u0e19'; barColor = '#ffc107'; barWidth = 40; break;\r\n case 3: strengthText = '\u0e1b\u0e32\u0e19\u0e01\u0e25\u0e32\u0e07'; barColor = '#ff8c00'; barWidth = 60; break;\r\n case 4: strengthText = '\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07'; barColor = '#17a2b8'; barWidth = 80; break;\r\n case 5: strengthText = '\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07\u0e21\u0e32\u0e01'; barColor = '#28a745'; barWidth = 100; break;\r\n }\r\n\r\n bar.style.width = barWidth + '%';\r\n bar.style.backgroundColor = barColor;\r\n text.textContent = '\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: ' + strengthText;\r\n \r\n if (password.length === 0) {\r\n bar.style.width = '0%';\r\n bar.style.backgroundColor = '#eee';\r\n text.textContent = '\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01';\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 | EDMS LPSCI Register EDMS LPSCI Register \u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14 \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23 E-mail \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (User) \u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 (Password) \u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27? \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=127"}],"version-history":[{"count":17,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 | EDMS LPSCI Register<\/title>\r\n <style>\r\n \/* CSS \u0e08\u0e32\u0e01\u0e42\u0e04\u0e49\u0e14\u0e40\u0e14\u0e34\u0e21 (\u0e15\u0e31\u0e14\u0e2d\u0e2d\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e23\u0e30\u0e0a\u0e31\u0e1a) *\/\r\n \/* ... (\u0e42\u0e04\u0e49\u0e14 CSS \u0e40\u0e14\u0e34\u0e21 \u0e17\u0e35\u0e48\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e40\u0e15\u0e47\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21) ... *\/\r\n body {\r\n height: 100vh; width: 100vw; font-family: Arial, sans-serif; background-color: #e9eef7; display: flex; justify-content: center; align-items: center; margin: 0; padding: 20px; box-sizing: border-box;\r\n }\r\n\r\n .register-container {\r\n background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 550px; text-align: center;\r\n }\r\n\r\n .logo { margin-bottom: 20px; }\r\n .logo img { max-width: 150px; height: auto; }\r\n h1 { color: #1a1a1a; margin-bottom: 30px; font-size: 1.6em; border-bottom: 2px solid #007bff; padding-bottom: 10px; }\r\n .input-group { margin-bottom: 18px; text-align: left; }\r\n .input-group label { display: block; margin-bottom: 6px; color: #333; font-weight: bold; }\r\n .form-row { display: flex; gap: 20px; }\r\n .form-row .input-group { flex: 1; }\r\n .input-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1em; }\r\n .input-group input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); }\r\n #password-strength { height: 10px; background: #eee; border-radius: 5px; margin-top: 5px; overflow: hidden; }\r\n #password-strength-bar { height: 100%; width: 0%; transition: width 0.3s, background-color 0.3s; }\r\n #password-strength-text { font-size: 0.8em; margin-top: 5px; color: #666; text-align: right; }\r\n .register-button { width: 100%; padding: 12px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; margin-top: 25px; transition: background-color 0.3s; }\r\n .register-button:hover { background-color: #1e7e34; }\r\n .back-to-login { margin-top: 20px; font-size: 0.9em; }\r\n .back-to-login a { color: #007bff; text-decoration: none; }\r\n .back-to-login a:hover { text-decoration: underline; }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"register-container\">\r\n <div class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/i.postimg.cc\/cgHPgwhV\/(n)LPSCI-LOGO-NAVI-copy-2.png\" alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49 EDMS LPSCI\">\r\n <\/div>\r\n \r\n <h1>EDMS LPSCI Register<\/h1>\r\n\r\n <form id=\"registerForm\"> \r\n \r\n <div class=\"form-row\">\r\n <div class=\"input-group\">\r\n <label for=\"firstname\">\u0e0a\u0e37\u0e48\u0e2d<\/label>\r\n <input type=\"text\" id=\"firstname\" name=\"\u0e0a\u0e37\u0e48\u0e2d\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"lastname\">\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\r\n <input type=\"text\" id=\"lastname\" name=\"\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"dob\">\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14<\/label>\r\n <input type=\"date\" id=\"dob\" name=\"\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"phone\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\" pattern=\"[0-9]{10}\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 08XXXXXXXX\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"email\">E-mail<\/label>\r\n <input type=\"email\" id=\"email\" name=\"E-mail\" placeholder=\"example@domain.com\" required>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"username\">\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (User)<\/label>\r\n <input type=\"text\" id=\"username\" name=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\" required>\r\n <\/div>\r\n\r\n <div class=\"input-group\">\r\n <label for=\"password\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 (Password)<\/label>\r\n <input type=\"password\" id=\"password\" name=\"\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\" onkeyup=\"checkPasswordStrength(this.value)\" required>\r\n \r\n <div id=\"password-strength\">\r\n <div id=\"password-strength-bar\"><\/div>\r\n <\/div>\r\n <div id=\"password-strength-text\">\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01<\/div>\r\n <\/div>\r\n\r\n <button type=\"button\" class=\"register-button\" onclick=\"sendDataToGoogleSheet()\">\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01<\/button>\r\n <\/form>\r\n \r\n <div class=\"back-to-login\">\r\n \u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27? <a href=\"https:\/\/edms.lpsci.ac.th\/?page_id=110\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/a>\r\n<\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ *** 1. \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e48\u0e32 GOOGLE_FORM_URL \u0e14\u0e49\u0e27\u0e22 URL \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Form Submission \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 ***\r\n const GOOGLE_FORM_URL = 'YOUR_GOOGLE_FORM_SUBMISSION_URL'; \r\n \/\/ \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07:https:\/\/docs.google.com\/spreadsheets\/d\/1TYu-vAtWScSLG4C7lBH8A9Kmf4bV3g6wifk12cesf3c\/edit?usp=sharing';\r\n\r\n \/\/ *** 2. Mapping \u0e0a\u0e37\u0e48\u0e2d\u0e0a\u0e48\u0e2d\u0e07 (name attribute) \u0e43\u0e19 HTML \u0e01\u0e31\u0e1a ID \u0e02\u0e2d\u0e07\u0e0a\u0e48\u0e2d\u0e07\u0e43\u0e19 Google Form ***\r\n \/\/ *** \u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e2b\u0e32 ID \u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e08\u0e32\u0e01\u0e42\u0e04\u0e49\u0e14 Embed \u0e02\u0e2d\u0e07 Google Form \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e40\u0e2d\u0e07 ***\r\n const FIELD_MAPPING = {\r\n '\u0e0a\u0e37\u0e48\u0e2d': 'entry.123456789', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25': 'entry.987654321', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14': 'entry.112233445', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23': 'entry.678901234', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n 'E-mail': 'entry.543219876', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19': 'entry.234567890', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n '\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19': 'entry.901234567', \/\/ \u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 ID \u0e19\u0e35\u0e49\r\n };\r\n\r\n\r\n async function sendDataToGoogleSheet() {\r\n const form = document.getElementById('registerForm');\r\n \r\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e32\u0e21\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 HTML5\r\n if (!form.checkValidity()) {\r\n \/\/ \u0e16\u0e49\u0e32\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e43\u0e2b\u0e49\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\r\n form.reportValidity();\r\n return;\r\n }\r\n\r\n const formData = new FormData(form);\r\n const data = new URLSearchParams();\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Payload \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07 Google Form\r\n for (const [key, value] of formData.entries()) {\r\n const formId = FIELD_MAPPING[key];\r\n if (formId) {\r\n data.append(formId, value);\r\n }\r\n }\r\n\r\n try {\r\n \/\/ \u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 Fetch API\r\n const response = await fetch(GOOGLE_FORM_URL, {\r\n method: 'POST',\r\n mode: 'no-cors', \/\/ \u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Google Form Submission\r\n body: data,\r\n });\r\n \r\n \/\/ \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\r\n alert('\u2728 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27! \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07 Google Sheet \u0e41\u0e25\u0e49\u0e27');\r\n \r\n \/\/ \u0e25\u0e49\u0e32\u0e07\u0e1f\u0e2d\u0e23\u0e4c\u0e21\r\n form.reset();\r\n \r\n } catch (error) {\r\n console.error('Error submitting form:', error);\r\n alert('\u26a0\ufe0f \u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25! \u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07');\r\n }\r\n }\r\n \r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 checkPasswordStrength \u0e40\u0e14\u0e34\u0e21\u0e22\u0e31\u0e07\u0e04\u0e07\u0e2d\u0e22\u0e39\u0e48\r\n function checkPasswordStrength(password) {\r\n \/\/ ... (\u0e42\u0e04\u0e49\u0e14 JavaScript \u0e02\u0e2d\u0e07 checkPasswordStrength \u0e40\u0e14\u0e34\u0e21) ...\r\n const bar = document.getElementById('password-strength-bar');\r\n const text = document.getElementById('password-strength-text');\r\n let score = 0;\r\n let strengthText = '\u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01';\r\n let barColor = '#dc3545'; \r\n let barWidth = 0;\r\n \r\n if (password.length >= 8) { score += 1; }\r\n if (password.match(\/[a-z]\/)) { score += 1; }\r\n if (password.match(\/[A-Z]\/)) { score += 1; }\r\n if (password.match(\/\\d\/)) { score += 1; }\r\n if (password.match(\/[^a-zA-Z\\d\\s]\/)) { score += 1; }\r\n\r\n switch(score) {\r\n case 0:\r\n case 1: strengthText = '\u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01'; barColor = '#dc3545'; barWidth = 20; break;\r\n case 2: strengthText = '\u0e2d\u0e48\u0e2d\u0e19'; barColor = '#ffc107'; barWidth = 40; break;\r\n case 3: strengthText = '\u0e1b\u0e32\u0e19\u0e01\u0e25\u0e32\u0e07'; barColor = '#ff8c00'; barWidth = 60; break;\r\n case 4: strengthText = '\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07'; barColor = '#17a2b8'; barWidth = 80; break;\r\n case 5: strengthText = '\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07\u0e21\u0e32\u0e01'; barColor = '#28a745'; barWidth = 100; break;\r\n }\r\n\r\n bar.style.width = barWidth + '%';\r\n bar.style.backgroundColor = barColor;\r\n text.textContent = '\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: ' + strengthText;\r\n \r\n if (password.length === 0) {\r\n bar.style.width = '0%';\r\n bar.style.backgroundColor = '#eee';\r\n text.textContent = '\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01';\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 | EDMS LPSCI Register EDMS LPSCI Register \u0e0a\u0e37\u0e48\u0e2d \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 \u0e27\u0e31\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e1b\u0e35\u0e40\u0e01\u0e34\u0e14 \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23 E-mail \u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (User) \u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 (Password) \u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22: \u0e2d\u0e48\u0e2d\u0e19\u0e21\u0e32\u0e01 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e21\u0e35\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27? \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=127"}],"version-history":[{"count":17,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/edms.lpsci.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}