Web App tutorial in hindi || create Html Form and send data in google sheet in hindi
दोस्तों आज के इस आर्टिकल में मैं आपको बताऊंगा कि आप किस तरीके से (create Html Form and send data in google sheet) गूगल सीट में एप स्क्रिप्ट और वेब एप की मदद सेआप एचटीएमएल फॉर्म को बना सकते हैं | और साथ ही साथ एचटीएमएल फॉर्म के डाटा को आप अपने गूगल सीट के अंदर स्टोर कर सकते हैं |
File For practice Download
Watch Video For Practice
यह भी पढ़ें : Protect Sheet Timely
function doGet(){
return HtmlService.createTemplateFromFile("index").evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1')
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function pasteDatainSheet(uname,fatherName,email,mob){
let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
sheet.appendRow([uname,fatherName,email,mob])
}
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Document</title>
<link href="style.css" rel="stylesheet"></link>
</head>
<body>
<form id="myForm">
<h3>Employee Info</h3>
<div class="empinfo">
<label for="name">User Name</label>
<input id="name" name="uname" type="text" />
</div>
<div class="empinfo">
<label for="fname">Father Name</label>
<input id="fname" name="faname" type="text" />
</div>
<div class="empinfo">
<label for="email">Email Id</label>
<input id="email" name="email" type="email" />
</div>
<div class="empinfo">
<label for="mobnum">Mobile Number</label>
<input id="mobnum" name="mob" type="text" />
</div>
<div class="btn">
<button id="btn">Submit</button>
</div>
</form>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#myForm{
width: 230px;
height:auto;
border:2px solid green;
padding: 20px 10px;
margin: 20px auto ;
border-radius:10px ;
background: lightblue;
}
#myForm h3{
font-size: 18px;
margin-bottom: 15px;
text-align: center;
color: blue;
}
.empinfo{
margin-bottom: 6px;
}
.empinfo label{
font-size: 12px;
}
.empinfo input{
width: 200px;
outline:none
}
.btn{
width: 200px;
text-align: center;
}
#btn{
padding: 3px 30px;
border: none;
outline: none;
background-color: blue;
color: #fff;
border-radius: 10px;
cursor: pointer;
}
@media screen and (max-width:700px){
#myForm{
background-color:pink;
color:red;
}
}
let button = document.getElementById("btn").addEventListener("click",getFormData)
function getFormData(event){
event.preventDefault();
let userName= document.getElementById("name").value;
let fname= document.getElementById("fname").value
let email= document.getElementById("email").value
let mobile= document.getElementById("mobnum").value
google.script.run.withSuccessHandler(()=>{
document.getElementById("name").value=""
document.getElementById("fname").value=""
document.getElementById("email").value=""
document.getElementById("mobnum").value=""
}).pasteDatainSheet(userName,fname,email,mobile)
}
0 टिप्पणियाँ
Thanks For Message Me if any issue please feel free to contact