> Web App tutorial in hindi || create Html Form and send data in google sheet in hindi
एक्सेल और एडवांस एक्सेल से जुड़े सभी लेटेस्ट विडियो पाने के लिए मेरे यूट्यूब चैनल को अभी सबस्क्राइब करे लिंक नीचे है धन्यवाद |

Web App tutorial in hindi || create Html Form and send data in google sheet in hindi

Tech Gyan Amit अप्रैल 07, 2024


 

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


code.gs file 
 
 
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 file 
 
  <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>
css file 
 
 
  *{
    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;
  }
}
Javascript file 
 
  
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)
 
}
Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

Thanks For Message Me if any issue please feel free to contact