I can provide you with a simple HTML form along with Google Apps Script code to handle the form submission and store the student data in a Google Sheet.
To set up the Google Apps Script:
1. Open Google Drive.
2. Click on New > More > Google Apps Script.
3. Replace the code in the script editor with the provided code.
4. Save the script with an appropriate name.
5. Go to Publish > Deploy as web app, and follow the prompts to deploy the script as a web app.
6. After deploying, you will get a URL for your web app. Use this URL to access the form.
First, let's create the HTML form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h2>Student Data Entry Form</h2>
<form id="studentForm">
<label for="studentID">Student ID:</label><br>
<input type="text" id="studentID" name="studentID" required><br>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('studentForm').addEventListener('submit', function(e) {
e.preventDefault();
google.script.run.withSuccessHandler(function() {
alert('Data submitted successfully!');
document.getElementById('studentForm').reset();
}).submitStudentForm(this);
});
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Now, let's create the Google Apps Script code to handle the form submission and store the data in a Google Sheet:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function submitStudentForm(formObject) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Sheet1');
var rowData = [
formObject.studentID,
formObject.name,
formObject.age,
formObject.email,
formObject.phone
];
sheet.appendRow(rowData);
}
Comments
Post a Comment