This project allows you to collect form data from a Google Site and store it directly into a Google Sheet using Google Apps Script.
- Open Google Sheets.
- Create a new sheet and name it Database (or any name you prefer).
- Rename the first sheet to Sheet1 (or match it with the script's sheet name).
- Add column headers (e.g.,
Name,Email,Message).
- In Google Sheets, go to Extensions > Apps Script.
- Delete any existing code and insert the following in
Code.gs:
function doPost(e) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSpreadsheet();
var data = e.parameter;
sheet.appendRow([data.name, data.email, data.message, new Date()]);
return ContentService.createTextOutput("Success").setMimeType(ContentService.MimeType.TEXT);
}- Click Deploy > New Deployment.
- Select Web app as the type.
- Under Who has access, choose Anyone.
- Click Deploy and Authorize the script.
- Copy the Web App URL.
Create an index.html file with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Google Sheet Form</title>
</head>
<body>
<h2>Submit Your Details</h2>
<form action="YOUR_WEB_APP_URL" method="post">
<label>Name:</label>
<input type="text" name="name" required><br><br>
<label>Email:</label>
<input type="email" name="email" required><br><br>
<label>Message:</label>
<textarea name="message" required></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>Replace YOUR_WEB_APP_URL with the actual Web App URL copied from Step 2.
- Open Google Sites.
- Click Embed > Embed Code.
- Paste the link to your hosted HTML file or use an iframe.
- Publish and test your form.
- Open the Google Site and submit the form.
- Check Google Sheets to verify that the data has been stored.
- Add CSS & JavaScript to improve form styling and validation.
- Use Google Forms if you prefer a simpler alternative.
- Ensure permissions are set correctly for public access.
Now, your Google Site collects data and stores it in Google Sheets seamlessly! 🚀