Created
February 22, 2022 07:53
-
-
Save neno-tech/aa22f61153dbe6bd6590ea8b6a897196 to your computer and use it in GitHub Desktop.
Web App ฟอร์มลงทะเบียนแบบ Responsive
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
function doGet() { | |
return HtmlService.createTemplateFromFile('index').evaluate() | |
.addMetaTag('viewport', 'width=device-width, initial-scale=1') | |
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) | |
} | |
function saveData(obj){ | |
var ss = SpreadsheetApp.openById('xxx').getSheetByName('ชีต1') | |
var header = ss.getRange(1,1,1,ss.getLastColumn()).getValues()[0] | |
var row = [] | |
Object.keys(obj).forEach(key=>{ | |
row[header.indexOf(key)] = obj[key] | |
}) | |
ss.appendRow(row) | |
return true | |
} |
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
<style> | |
@import url('https://fonts.googleapis.com/css?family=Prompt:400,700&display=swap'); | |
*{ | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: 'Prompt', sans-serif; | |
} | |
body{ | |
background-image: linear-gradient(to right bottom, #072c65, #4d307b, #872a83, #be197b, #eb1265); | |
padding: 0 10px; | |
} | |
.wrapper{ | |
max-width: 500px; | |
width: 100%; | |
background: #fff; | |
margin: 20px auto; | |
box-shadow: 1px 1px 2px rgba(0,0,0,0.125); | |
padding: 30px; | |
border-radius:20px; | |
} | |
.wrapper .title{ | |
font-size: 24px; | |
font-weight: 700; | |
margin-bottom: 25px; | |
color: #159AF9; | |
text-transform: uppercase; | |
text-align: center; | |
} | |
.wrapper .form{ | |
width: 100%; | |
} | |
.wrapper .form .inputfield{ | |
margin-bottom: 15px; | |
display: flex; | |
align-items: center; | |
} | |
.wrapper .form .inputfield label{ | |
width: 200px; | |
color: #757575; | |
margin-right: 10px; | |
font-size: 14px; | |
} | |
.wrapper .form .inputfield .input, | |
.wrapper .form .inputfield .textarea{ | |
width: 100%; | |
outline: none; | |
border: 1px solid #d5dbd9; | |
font-size: 15px; | |
padding: 8px 10px; | |
border-radius: 3px; | |
transition: all 0.3s ease; | |
} | |
.wrapper .form .inputfield .textarea{ | |
width: 100%; | |
height: 125px; | |
resize: none; | |
} | |
.wrapper .form .inputfield .custom_select{ | |
position: relative; | |
width: 100%; | |
height: 37px; | |
} | |
.wrapper .form .inputfield .custom_select:before{ | |
content: ""; | |
position: absolute; | |
top: 12px; | |
right: 10px; | |
border: 8px solid; | |
border-color: #d5dbd9 transparent transparent transparent; | |
pointer-events: none; | |
} | |
.wrapper .form .inputfield .custom_select select{ | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
outline: none; | |
width: 100%; | |
height: 100%; | |
border: 0px; | |
padding: 8px 10px; | |
font-size: 15px; | |
border: 1px solid #d5dbd9; | |
border-radius: 3px; | |
} | |
.wrapper .form .inputfield .input:focus, | |
.wrapper .form .inputfield .textarea:focus, | |
.wrapper .form .inputfield .custom_select select:focus{ | |
border: 1px solid #159AF9; | |
} | |
.wrapper .form .inputfield p{ | |
font-size: 14px; | |
color: #757575; | |
} | |
.wrapper .form .inputfield .check{ | |
width: 15px; | |
height: 15px; | |
position: relative; | |
display: block; | |
cursor: pointer; | |
} | |
.wrapper .form .inputfield .check input[type="checkbox"]{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
} | |
.wrapper .form .inputfield .check .checkmark{ | |
width: 15px; | |
height: 15px; | |
border: 1px solid #159AF9; | |
display: block; | |
position: relative; | |
} | |
.wrapper .form .inputfield .check .checkmark:before{ | |
content: ""; | |
position: absolute; | |
top: 1px; | |
left: 2px; | |
width: 5px; | |
height: 2px; | |
border: 2px solid; | |
border-color: transparent transparent #fff #fff; | |
transform: rotate(-45deg); | |
display: none; | |
} | |
.wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark{ | |
background: #159AF9; | |
} | |
.wrapper .form .inputfield .check input[type="checkbox"]:checked ~ .checkmark:before{ | |
display: block; | |
} | |
.wrapper .form .inputfield .btn{ | |
width: 100%; | |
padding: 8px 10px; | |
font-size: 15px; | |
border: 0px; | |
background: #159AF9; | |
color: #fff; | |
cursor: pointer; | |
border-radius: 3px; | |
outline: none; | |
} | |
.wrapper .form .inputfield .btn:hover{ | |
background: #F91567; | |
} | |
.wrapper .form .inputfield:last-child{ | |
margin-bottom: 0; | |
} | |
@media (max-width:420px) { | |
.wrapper .form .inputfield{ | |
flex-direction: column; | |
align-items: flex-start; | |
} | |
.wrapper .form .inputfield label{ | |
margin-bottom: 5px; | |
} | |
.wrapper .form .inputfield.terms{ | |
flex-direction: row; | |
} | |
} | |
</style> |
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 lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Registration Form</title> | |
<?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="title"> | |
ฟอร์มลงทะเบียน | |
</div> | |
<form class="form" id="myForm" onsubmit="submitForm()"> | |
<div class="inputfield"> | |
<label>ชื่อ</label> | |
<input type="text" class="input" id="name" name="name"> | |
</div> | |
<div class="inputfield"> | |
<label>สกุล</label> | |
<input type="text" class="input" id="lastName" name="lastName"> | |
</div> | |
<div class="inputfield"> | |
<label>รหัสผ่าน</label> | |
<input type="password" class="input" id="passWord" name="passWord"> | |
</div> | |
<div class="inputfield"> | |
<label>ยืนยันรหัสผ่าน</label> | |
<input type="password" class="input" id="confirm" name="confirm"> | |
</div> | |
<div class="inputfield"> | |
<label>เพศ</label> | |
<div class="custom_select"> | |
<select id="sex" name="sex"> | |
<option value="">เลือก</option> | |
<option value="ชาย">ชาย</option> | |
<option value="หญิง">หญิง</option> | |
</select> | |
</div> | |
</div> | |
<div class="inputfield"> | |
<label>อีเมล</label> | |
<input type="text" class="input" id="email" name="email"> | |
</div> | |
<div class="inputfield"> | |
<label>เบอร์โทร</label> | |
<input type="text" class="input" id="phone" name="phone"> | |
</div> | |
<div class="inputfield"> | |
<label>ที่อยู่</label> | |
<textarea class="textarea" id="address" name="address"></textarea> | |
</div> | |
<div class="inputfield"> | |
<label>รหัสไปรษณีย์</label> | |
<input type="text" class="input" id="code" name="code"> | |
</div> | |
<div class="inputfield terms"> | |
<label class="check"> | |
<input type="checkbox"> | |
<span class="checkmark"></span> | |
</label> | |
<p>ยอมรับข้อกำหนดและเงื่อนไข</p> | |
</div> | |
<div class="inputfield"> | |
<input type="submit" value="ลงทะเบียน" class="btn"> | |
</div> | |
</form> | |
</div> | |
<script> | |
function submitForm(){ | |
event.preventDefault() | |
var obj = {} | |
var formData = $('#myForm').serializeArray() | |
formData.forEach(el=>obj[el.name] = el.value) | |
google.script.run.withSuccessHandler(()=>{ | |
document.getElementById('myForm').reset() | |
Swal.fire({ | |
position: 'center', | |
icon: 'success', | |
title: 'บันทึกเรียบร้อยแล้ว', | |
showConfirmButton: false, | |
timer: 1500 | |
}) | |
}).saveData(obj) | |
} | |
</script> | |
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> | |
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment