Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/index.html

Created December 20, 2021 12:26
Show Gist options
  • Save neno-tech/51bf6e0901d730b17b7ee16037f7ad6a to your computer and use it in GitHub Desktop.
Save neno-tech/51bf6e0901d730b17b7ee16037f7ad6a to your computer and use it in GitHub Desktop.
Download ZIP
web app Google Form
Raw
index.html
<!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/bootstrap@4.5.3/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