Created
December 20, 2021 12:26
-
-
Save neno-tech/51bf6e0901d730b17b7ee16037f7ad6a to your computer and use it in GitHub Desktop.
web app Google Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" | |
| crossorigin="anonymous"> | |
| <title>this is my web page</title> | |
| <style> | |
| body{ | |
| background-color: #ede7f6; | |
| font-family: Roboto,Sans-serif; | |
| } | |
| .form{ | |
| height: 1100px; | |
| width: 650px; | |
| margin: auto; | |
| } | |
| .required{] | |
| font-size: 13px; | |
| color: red; | |
| } | |
| .title-div{ | |
| height: 150px; | |
| width: 650px; | |
| background-color: #FDFEFE; | |
| margin: 15px; | |
| border-radius: 8px; | |
| border-top: 8px solid #6703c4; | |
| padding: 25px; | |
| } | |
| .name-div, .college-div, .gmail-div, .mobile-div{ | |
| height: 150px; | |
| width: 650px; | |
| background-color: #FDFEFE; | |
| margin: 15px; | |
| border-radius: 8px; | |
| } | |
| .name{ | |
| padding-top: 20px; | |
| padding-left: 25px; | |
| padding-bottom: 25px; | |
| font-size: 15px; | |
| } | |
| .input-div{ | |
| padding-top: 25px; | |
| padding-left: 25px; | |
| } | |
| .input-div input{ | |
| width: 300px; | |
| border: 0; | |
| outline: 0; | |
| border-bottom: 1.5px solid #DCD7D7; | |
| font-size: 15px; | |
| } | |
| .btn{ | |
| height: 36px; | |
| width: 100px; | |
| background-color: #6703c4; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| letter-spacing: .5px; | |
| font-weight: 540; | |
| border: none; | |
| padding: 10px; | |
| position: absolute; | |
| margin: 15px; | |
| color: white; | |
| } | |
| .last-div h2{ | |
| text-align: center; | |
| padding-top: 50px; | |
| color: #a2a4a6; | |
| font-weight: 200; | |
| } | |
| .term{ | |
| font-size: 12px; | |
| padding-left: 65px; | |
| padding-top: 5px; | |
| position: absolute; | |
| } | |
| .never{ | |
| padding-left: 15px; | |
| font-size: 12px; | |
| padding-top: 70px; | |
| font-weight: 400; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="form"> | |
| <form id="myForm" onsubmit="submitData(this)"> | |
| <div class="title-div"> | |
| <h1>ฟอร์มเว็บแอปแบบ Google Form</h1> | |
| <p>ตัวอย่างการออกแบบฟอร์มด้วยเว็บแอปให้เหมือนกับกูเกิ้ลฟอร์ม</p> | |
| <p class="required">*จำเป็น</p> | |
| </div> | |
| <div class="name-div"> | |
| <div class="name">ชื่อ สกุล?<span class="required">*</span></div> | |
| <div class="input-div"><input type="input" name="data1" id="data1" placeholder="คำตอบของคุณ"></div> | |
| </div> | |
| <div class="college-div"> | |
| <div class="name">ชื่อเล่น.</div> | |
| <div class="input-div"><input type="input" name="data2" id="data2" placeholder="คำตอบของคุณ"></div> | |
| </div> | |
| <div class="gmail-div"> | |
| <div class="name">อีเมล.<span class="required">*</span></div> | |
| <div class="input-div"><input type="input" name="data3" id="data3" placeholder="อีเมลของคุณ"></div> | |
| </div> | |
| <div class="mobile-div"> | |
| <div class="name">เบอร์โทร.</div> | |
| <div class="input-div"><input type="input" name="data4" id="data4" placeholder="คำตอบของคุณ"></div> | |
| </div> | |
| <div> | |
| <!-- <button type="submit" class="btn btn-primary btn-block">Submit</button> --> | |
| <button class="btn" type="submit" >ส่ง</button> | |
| </div> | |
| <div class="last-div"> | |
| <p class="never">ห้ามส่งรหัสผ่านใน Google ฟอร์ม.</p> | |
| <p class="term">เนื้อหานี้มิได้ถูกสร้างขึ้นหรือรับรองโดย Google รายงานการละเมิด - ข้อกำหนดในการให้บริการ - นโยบายความเป็นส่วนตัว</p> | |
| <h2>Google ฟอร์ม</h2> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| function submitData(data){ | |
| event.preventDefault() | |
| google.script.run.withSuccessHandler(success).saveData(data) | |
| } | |
| function success(){ | |
| document.querySelector("form").reset() | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment