āļ§ัāļ™āļ­ัāļ‡āļ„āļēāļĢāļ—ี่ 15 āđ€āļĄāļĐāļēāļĒāļ™ āļž.āļĻ. 2568

📜 āđ‚āļ„้āļ” Google Apps Script āļŠāļģāļŦāļĢัāļšāđāļ•่āļ‡ Google Form

 

āđ‚āļ„้āļ”āļŠāļģāļŦāļĢัāļšāļ›āļĢัāļšāđāļ•่āļ‡āļŦāļ™้āļēāļ•āļēāļ‚āļ­āļ‡ Google Form āđƒāļŦ้āļĄีāļĢูāļ›āļĢ่āļēāļ‡āļŦāļ™้āļēāļ•āļēāđ€āļŦāļĄืāļ­āļ™āđ€āļ§āļšāđāļ­āļ› 


 code.gs

.......................................................................................................................................

function doGet() {

  return HtmlService.createHtmlOutputFromFile('form')

      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

..........................................................................................................................................


form.html 


.............................................................................................................................................

<!DOCTYPE html>

<html>

  <head>

    <base target="_top">

    <style>

      body {

        font-family: 'Kanit', sans-serif;

        background-color: #e8f5e9;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100vh;

        margin: 0;

      }

      .form-container {

        background: white;

        padding: 30px 40px;

        border-radius: 15px;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

        text-align: center;

        width: 350px;

      }

      .form-container img {

        width: 80px;

        margin-bottom: 15px;

      }

      h2 {

        color: #388e3c;

        margin-bottom: 20px;

      }

      input[type="text"], input[type="tel"] {

        width: 100%;

        padding: 10px;

        margin: 8px 0;

        border: 1px solid #c8e6c9;

        border-radius: 10px;

        box-sizing: border-box;

        font-size: 16px;

      }

      button {

        background-color: #66bb6a;

        color: white;

        padding: 12px;

        width: 100%;

        border: none;

        border-radius: 10px;

        font-size: 16px;

        cursor: pointer;

        margin-top: 15px;

      }

      .footer {

        margin-top: 15px;

        font-size: 12px;

        color: #888;

      }

    </style>

  </head>

  <body>

    <div class="form-container">

      <img src="https://cdn-icons-png.flaticon.com/512/747/747376.png" alt="Profile Icon">

      <h2>āđāļšāļšāļŸāļ­āļĢ์āļĄāļ‚้āļ­āļĄูāļĨāļŠ่āļ§āļ™āļšุāļ„āļ„āļĨ</h2>

      <form>

        <input type="text" placeholder="āļŠื่āļ­" name="fname" required>

        <input type="text" placeholder="āļŠāļุāļĨ" name="lname" required>

        <input type="tel" placeholder="āđ€āļšāļ­āļĢ์āđ‚āļ—āļĢāļĻัāļžāļ—์" name="phone" required>

        <button type="submit">āļŠ่āļ‡āļ‚้āļ­āļĄูāļĨ</button>

      </form>

      <div class="footer">create by aphsara 💚</div>

    </div>

  </body>

</html>

..............................................................................................................................................