https://github.com/akashkobal/html-to-google-sheet
This project demonstrates how to integrate an HTML form with Google Sheets to collect user inputs and save them automatically. It uses Google Apps Script as the backend and JavaScript on the frontend to handle form submissions.
https://github.com/akashkobal/html-to-google-sheet
app-script css database-for-static-webapp google-sheets-api html html-sheet html-to-google-sheet html-to-spreadsheet javacript js mini-database store-data-in-google-sheet store-data-in-spreadsheet
Last synced: 6 months ago
JSON representation
This project demonstrates how to integrate an HTML form with Google Sheets to collect user inputs and save them automatically. It uses Google Apps Script as the backend and JavaScript on the frontend to handle form submissions.
- Host: GitHub
- URL: https://github.com/akashkobal/html-to-google-sheet
- Owner: AkashKobal
- License: mit
- Created: 2024-12-01T19:54:59.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T21:12:48.000Z (about 1 year ago)
- Last Synced: 2025-04-13T16:56:27.090Z (9 months ago)
- Topics: app-script, css, database-for-static-webapp, google-sheets-api, html, html-sheet, html-to-google-sheet, html-to-spreadsheet, javacript, js, mini-database, store-data-in-google-sheet, store-data-in-spreadsheet
- Language: HTML
- Homepage: https://akashkobal.github.io/html-to-google-sheet/
- Size: 2.87 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# HTML to Google Sheets Form Integration
This project demonstrates how to integrate an HTML form with Google Sheets to collect user inputs and save them automatically. It uses Google Apps Script as the backend and JavaScript on the frontend to handle form submissions.
---
## Features
- Submit form data directly to Google Sheets.
- Custom-styled form using HTML and CSS.
- JavaScript-powered form submission without page reload.
- Feedback to users on successful or failed submissions.
---
## Project Structure
### Frontend (HTML, CSS, JavaScript)
- **HTML**: Defines the form structure with inputs for first name, last name, email, phone number, and a message.
- **CSS**: Adds styling to the form for better user experience.
- **JavaScript**: Handles the form submission using the Fetch API to communicate with the Google Apps Script Web App.
### Backend (Google Apps Script)
- **Apps Script**: Manages the received data and appends it to the designated Google Sheet.
---
## Setup Instructions
### Step 1: Create the Google Sheet
1. Open [Google Sheets](https://sheets.google.com) and create a new spreadsheet.
2. Name the spreadsheet (e.g., `html-to-sheet`).
3. Add the following headers in the first row (exactly as shown):
- `timestamp`
- `fname`
- `lname`
- `email`
- `phone`
- `message`
---
### Step 2: Set Up the Google Apps Script
1. Go to `Extensions` > `Apps Script` in the Google Sheets menu.
2. Copy and paste the following code into the script editor:
```javascript
var sheetName = 'html-to-sheet';
var scriptProp = PropertiesService.getScriptProperties();
function intialSetup() {
var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
scriptProp.setProperty('key', activeSpreadsheet.getId());
}
function doPost(e) {
var lock = LockService.getScriptLock();
lock.tryLock(10000);
try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'));
var sheet = doc.getSheetByName(sheetName);
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow() + 1;
var newRow = headers.map(function (header) {
return header === 'timestamp' ? new Date() : e.parameter[header] || '';
});
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);
return ContentService.createTextOutput(
JSON.stringify({ result: 'success', row: nextRow })
).setMimeType(ContentService.MimeType.JSON);
} catch (error) {
return ContentService.createTextOutput(
JSON.stringify({ result: 'error', error: error.toString() })
).setMimeType(ContentService.MimeType.JSON);
} finally {
lock.releaseLock();
}
}
5. Save the project with a name (e.g., `HTML to Sheet Integration`).
7. Run the `intialSetup` function in the Apps Script editor to link the script with your spreadsheet.
9. Deploy the script as a Web App:
- Go to `Deploy` > `New Deployment`.
- Choose `Web App`.
- Set the permissions to `Anyone` for public access.
- Deploy and note down the generated **Web App URL**.
---
### Step 3: Update the Frontend Script
1. In the HTML file action method, replace the `YOUR_WEB_APP_URL_HERE` in the JavaScript section with your Web App URL.
```javascript
const scriptURL = 'YOUR_WEB_APP_URL_HERE';
```
## Result
### Enter your details [click here](https://akashkobal.github.io/html-to-google-sheet/)
## Details stored in google sheet [click here](https://docs.google.com/spreadsheets/d/1zPbH5LdoOUcMdnJDuxQ9LEwx23imnGk2FXVpYy5-1ew/edit?usp=sharing)
