DevTool

Create a Google Sheet
Go to Google Sheets and create a new spreadsheet.
Open Apps Script
In your Google Sheet, click on Extensions → Apps Script
Paste the Script Code
Delete any code in the editor and paste the Google Apps Script code provided above.
Save the Project
Click Save project (Ctrl+S or ⌘+S) and give it a name.
Deploy as Web App
Click Deploy → New deployment
- Select Web app as the deployment type
- Description: Add a brief description
- Execute as: Me
- Who has access: Anyone
- Click Deploy
Authorize the Application
Sign in with your Google account and grant the necessary permissions.

You'll see a warning that "Google hasn't verified this app." Click Advanced and then Go to [Your Project Name] (unsafe).
Copy the Web App URL
After deployment, copy the Web App URL provided.
Update the Script URL in your HTML Form
Click the "Update Script URL" button above and paste your Web App URL.
Copy and Use your Complete HTML Form
Your form is now ready! Copy the complete HTML code and use it in your website.

1
Setting Up Google Sheets

Creating Your Spreadsheet

Go to Google Sheets and sign in with your Google account
Create a new blank spreadsheet
Rename your spreadsheet to something meaningful for your project

2
Setting Up Google Apps Script

Creating the Script

In your Google Sheet, click on Extensions → Apps Script
Delete any code in the editor
Copy the Google Apps Script code from the "Generated Code" tab
Paste it into the Apps Script editor
Click Save project (Ctrl+S or ⌘+S) and name your project

3
Deploying Your Web App

Deployment Process

In the Apps Script editor, click Deploy → New deployment
Click the gear icon and select Web app
Enter a description (optional)
Set "Execute as" to Me
Set "Who has access" to Anyone
Click Deploy

Authorization & Permissions

You'll be prompted to authorize the app
Click "Authorize access"
Choose your Google account
You'll see a warning that "Google hasn't verified this app." Click Advanced and then Go to [Your Project Name] (unsafe)
Click "Allow" to grant permissions
After authorization, you'll receive a URL. Copy this URL

This URL is your web app's endpoint. You need to update your HTML form to use this URL in the action attribute. This is a critical step to connect your form to your spreadsheet.

4
Integrating with Your HTML Form

Updating Your Form

Go back to the "Generated Code" tab in this app
Click "Update Script URL" button
Paste the Web App URL you copied from the Apps Script deployment
Click "Update URL" to update the HTML code
Copy the complete updated HTML code

The URL should look something like: https://script.google.com/macros/s/AKfycbwXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/exec

5
Using Your Form

Implementation Options

You have several options for using your form:

Create a standalone HTML file

Create a new file with a .html extension
Paste the complete HTML code
Save the file
Open it with any web browser

Embed in an existing website

Copy the code between <form> and </form>
Paste it into your existing website's HTML
Make sure to also include the CSS and JavaScript sections

Host on Google Sites

Create a new Google Site
Insert an Embed element
Choose "Embed code"
Paste your entire HTML code
Click "Save"

6
Testing & Troubleshooting

Verification Process

Fill out and submit your form
Check your Google Sheet to verify data was received
If data doesn't appear, check the following:

Common Issues

Incorrect script URL in your form's action attribute
Missing authorization permissions
Mismatched column names in the script
CORS issues with certain hosting platforms
File size limitations for uploads

Solutions

Verify your script URL is correctly copied
Redeploy the script with proper permissions
Match form field names with script column names
Check for console errors in browser DevTools
Try a new version deployment if issues persist

Pro Tip

For advanced debugging, use the browser console (F12) to check for error messages. In Google Apps Script, use console.log() statements to track script execution and check the Execution Logs in the Apps Script editor.

Form Builder Pro

Form Settings

Form Style

Advanced Settings

Form Behavior

Success Message

Form Fields

Form Preview

Complete HTML Form Code

Update Google Script URL

Google Apps Script Code

Quick Setup Instructions

Complete Step-by-Step Deployment Guide

1
Setting Up Google Sheets

Creating Your Spreadsheet

2
Setting Up Google Apps Script

Creating the Script

3
Deploying Your Web App

Deployment Process

Authorization & Permissions

4
Integrating with Your HTML Form

Updating Your Form

5
Using Your Form

Implementation Options

Create a standalone HTML file

Embed in an existing website

Host on Google Sites

6
Testing & Troubleshooting

Verification Process

Common Issues

Solutions

Pro Tip

Field #

Validation Options

Appearance Options

Add New Field

Test Your Form

Form Settings

Form Style

Advanced Settings

Form Behavior

Success Message

Form Fields

Form Preview

Complete HTML Form Code

Update Google Script URL

Google Apps Script Code

Quick Setup Instructions

Complete Step-by-Step Deployment Guide

1 Setting Up Google Sheets

Creating Your Spreadsheet

2 Setting Up Google Apps Script

Creating the Script

3 Deploying Your Web App

Deployment Process

Authorization & Permissions

4 Integrating with Your HTML Form

Updating Your Form

5 Using Your Form

Implementation Options

Create a standalone HTML file

Embed in an existing website

Host on Google Sites

6 Testing & Troubleshooting

Verification Process

Common Issues

Solutions

Pro Tip

Field #

Validation Options

Appearance Options

Add New Field

Test Your Form

1
Setting Up Google Sheets

2
Setting Up Google Apps Script

3
Deploying Your Web App

4
Integrating with Your HTML Form

5
Using Your Form

6
Testing & Troubleshooting