Form to Google Sheet Data Transfer : In To The Same Table
Form to Google Sheet Data Transfer :
In To The Same Table
1. Web Page (html form file) to Data Transfer in Google Sheet:
2. Google Sheet to Data Transfer in Web Page (html file) :
1. Web Page to Data Transfer in Google Sheet:
1.A. Display:
1.A.a. Form:
Display Stapes: use parse code
Convert the form code in to Parse Code to display the form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Form Page</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.main {
flex-basis: 400px;/* main width, becose perant is display: flex;--*/
max-width: 400px;
background: #CFD1E6;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.main h2 {
font-size: 30px;
margin-bottom: 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 25px;
}
input {
width: 100%;
height: 40px;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 20px;
font-weight: bold;
}
.form-outer {
flex-basis: 400px;
}
.form-outer input {
height: 40px;
font-size: 20px;
font-weight: bold;
}
button {
width: 100%;
padding: 10px;
background-color: #EBE09D;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45A049;
color: white;
}
</style>
</head>
<body>
<div class="main">
<h2>Input Form</h2>
<form id="dataForm" method="post">
<input type="text" id="coustomer-details-head" name="Customer Header" placeholder="Customer Details" />
<div class="form-outer">
<label for="name">Name:</label>
<input type="text" id="name" name="Name" required />
<label for="mobile-no">Mobile No:</label>
<input type="number" id="mobile-no" name="Mobile No" required />
<label for="email-id">Email:</label>
<input type="email" id="email-id" name="Email id" required />
<label for="date-time-local">Date Time:</label>
<input type="datetime-local" id="date-time-local" name="Date" required />
<label for="table-adress-number">Table No:</label>
<input type="text" id="table-adress-number" name="Table No" required />
<button type="button" id="submitBtn">OK</button>
</div>
</form>
</div>
<script>
// Wait for the "OK" button to be clicked
document.getElementById('submitBtn').addEventListener('click', function() {
// Step 1: Select the form element from the DOM
let form = document.getElementById('dataForm');
// Step 2: Create a FormData object containing all the form input values
let formData = new FormData(form);
// Step 3: Define the URL of your Google Apps Script Web App (replace with your actual deployed URL)
let url = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec';
// Step 4: Change button text to indicate submission is in progress
this.innerHTML = "Submitting...";
// Step 5: Send form data to the specified Google Apps Script Web App using fetch API
fetch(url, {
method: "POST", // HTTP method used to send data
body: formData // The actual form data being sent
})
// Step 6: Process the response from the server
.then(res => res.text()) // Convert the response into plain text
.then(result => {
// Step 7: On success, reset button text and notify user
this.innerHTML = "OK";
alert("Data submitted successfully!");
// Step 8: Print server response to the browser console for debugging
console.log(result);
// Step 9: Clear all form inputs after successful submission
form.reset();
})
// Step 10: Handle any errors that occurred during the submission process
.catch(err => {
// Reset button text in case of failure
this.innerHTML = "OK";
// Alert user about the failure
alert("Submission failed.");
// Log detailed error information in the console
console.error("Submission error:", err);
});
});
</script>
</body>
</html>
1.A. Display:
1.A.b. Google sheet:
Google sheet Display Stapes: in below
Stapes and Prosess:
A. Create a from in a wabe page
Stapes:
Stape-1:
Stape-2:
B. Google sheet Display:
Step 1: Make the Google Sheet Publicly Viewable
1. Turned on desktop view for your browser in Mobile. Search by gmail.com , click on the address , click on google menu icon section, find google sheet, click and Open your Google Sheet.
2. Go to File > Share and export>send a copy >web page (.html, zipped) > OK
Share with others.
Anyone with the link
Viewer (or Commenter if you want limited interaction)
4. Click Done.
3. Click “Copy link”, then under “General access”, select:
Step 2: Get the Embed Code
1. In your sheet, go to: File > Share > Publish to the web
2. Under Link or Embed, choose:
Embed
Select Entire Document or a Specific Sheet
3. Click Publish > Confirm
4. Copy the <iframe> embed code provided (e.g.):
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQxxxxx/pubhtml?widget=true&headers=false" width="600" height="400"></iframe>
Step 3: Insert in Blogger
1. Open Blogger and go to the post you want to edit.
2. Switch to the HTML view (not Compose mode).
3. Paste the iframe code where you want the sheet to appear.
4. Switch back to Compose view if needed, and publish.
Step 3: Insert in Blogger
1. Open Blogger and go to the post you want to edit.
2. Switch to the HTML view (not Compose mode).
3. Paste the iframe code where you want the sheet to appear.
4. Switch back to Compose view if needed, and publish.
(To be implemented)
Comments
Post a Comment