Save Web/HTML Form Data to Google Sheets
- Import Script to your HTML File
<script src="Relative/path/to/WebForm.js"></script> <!-- Inside <head> -->- Make your desired form
<form method="post" autocomplete="off" name=<FORM_NAME>>
<input type="email" title="Type your email address" id="email" name="EMAIL" placeholder="Your Email Address" required>
<textarea id="message" title="Type your Message" name="MESSAGE" placeholder="Your Message ..." required></textarea>
<input type="submit" title="Send your Message" value="Send">
</form>- Change the
<FORM_NAME>to your desired name - All Form Elements must have names in Block Letters
- Goto Google Sheet and create a blank sheet
- Name the Fields as needed in your Form in Block Letters
- Number of Fields must be as same as the Fields of your Form
- go to Tools > Script Editor
- Copy and paste the file WebForm.gs to the Script Editor
- Change the
<SHEET_NAME>with your sheet name - deploy and copy the
<DEPLOYMENT_ID>
- Add the Script to Your HTML file
document.addEventListener('submit',e=>{
e.preventDefault(); //to stop the form being post
var w = new WebForm(<DEPLOYMENT_ID>,<FORM_NAME>);//create an object
w.submit(); // call to submit data
})- Change
<DEPLOYMENT_ID>and<FORM_NAME>with yours
- Names of Form Elements should be as same as field names of Google Sheet
- All Names are case sensitive, It is recommended to make them in Block letter
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent