HTML form to Google Sheet Integration

Jan 16, 2026

A few days ago, in a project, the client asked to implement a feature to create a web form in HTML with file upload ability. The form submission data is needed to be stored in a Google sheet, and the uploaded file will be stored in Google Drive.

In this article I am sharing the exact process I followed.

Step 1: Prepare Google Sheet

Create a new Google Sheet (say Car Records).
Go to Extensions → Apps Script.
Paste this script:

function doPost(e) { try { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var data = JSON.parse(e.postData.contents);

// Create a folder in Google Drive (Change to your folder ID if you already created one)
var folderId = "PASTE_YOUR_FOLDER_ID_HERE";  
var folder = DriveApp.getFolderById(folderId);

// Function to save Base64 image and return URL
function saveImage(base64, filename) {
  if (!base64) return "";
  var contentType = base64.match(/data:(.*);base64/)[1];
  var bytes = Utilities.base64Decode(base64.split(",")[1]);
  var blob = Utilities.newBlob(bytes, contentType, filename);
  var file = folder.createFile(blob);
  file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
  return file.getUrl();
}

var frontUrl = saveImage(data.front_image, "front_" + Date.now() + ".jpg");
var sideUrl = saveImage(data.side_image, "side_" + Date.now() + ".jpg");

// Save data in sheet
sheet.appendRow([
  new Date(),
  data.customer_name,
  data.mobile_number,
  data.dealer_name,
  data.car_number,
  data.chasis_number,
  frontUrl,
  sideUrl
]);

return ContentService.createTextOutput(
  JSON.stringify({ result: "success", message: "Data saved successfully!" })
).setMimeType(ContentService.MimeType.JSON);

} catch (error) { return ContentService.createTextOutput( JSON.stringify({ result: “error”, message: error.message }) ).setMimeType(ContentService.MimeType.JSON); } }

Save it and click Deploy → New Deployment → choose Web app.
- Execution: Me
- Access: Anyone with the link
Copy the Web App URL (you’ll use it in the form).

Replace PASTE_YOUR_FOLDER_ID_HERE with the ID of the folder in your Google Drive where you want to store images.

Open the folder in Google Drive → Copy the part after /folders/ in the URL.

Step 2: HTML Form

Here’s your form with mandatory/optional fields and image upload (images converted to Base64 before sending to Google Sheet):

```html

<!DOCTYPE html>
<html>
<head>
  <title>Car Form</title>
  <style>
    form { max-width: 400px; margin: auto; }
    label { display: block; margin-top: 10px; }
    input, button { width: 100%; padding: 8px; }
    .success { color: green; margin-top: 10px; }
  </style>
</head>
<body>
  <form id="carForm">
    <label>Customer Name *</label>
    <input type="text" name="customer_name" required>

    <label>Mobile Number *</label>
    <input type="text" name="mobile_number" required>

    <label>Dealer Name *</label>
    <input type="text" name="dealer_name" required>

    <label>Car Number</label>
    <input type="text" name="car_number">

    <label>Chasis Number</label>
    <input type="text" name="chasis_number">

    <label>Front Image</label>
    <input type="file" name="front_image" accept="image/*">

    <label>Side Image</label>
    <input type="file" name="side_image" accept="image/*">

    <button type="submit">Submit</button>
    <p id="message" class="success"></p>
  </form>

  <script>
    const scriptURL = "PASTE_YOUR_GOOGLE_SCRIPT_URL_HERE";

    document.getElementById("carForm").addEventListener("submit", async function(e) {
      e.preventDefault();
      const form = e.target;
      const msg = document.getElementById("message");

      const toBase64 = file => new Promise((resolve, reject) => {
        if (!file) return resolve("");
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });

      const frontImg = await toBase64(form.front_image.files[0]);
      const sideImg = await toBase64(form.side_image.files[0]);

      const data = {
        customer_name: form.customer_name.value,
        mobile_number: form.mobile_number.value,
        dealer_name: form.dealer_name.value,
        car_number: form.car_number.value,
        chasis_number: form.chasis_number.value,
        front_image: frontImg,
        side_image: sideImg
      };

      fetch(scriptURL, {
        method: "POST",
        body: JSON.stringify(data)
      })
      .then(response => response.json())
      .then(res => {
        msg.textContent = res.message;
        form.reset();
      })
      .catch(err => {
        msg.textContent = "Error submitting form!";
      });
    });
  </script>
</body>
</html>