August 22, 2024

How to Send Data from HTML Form to Google Sheets

Collection of data can be simplified by sending information directly from an HTML form to Google Sheets. For setting everything up, just follow these steps.

1. Create the HTML form 📝:
Firstly, create a simple HTML form that accepts input from the person using it. Here's a straightforward example:
The user's name, email, and message are collected by the form itself.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form to Google Sheets </title>
</head>
<body>
    <h2>Contact Us : by Coding Wallah </h2>
    <form id="contact-form" action="" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" required></textarea><br><br>
        
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2. Signup for a SHEET DB Account 📝:
You'll need to sign up for a service like SHEET DB to be able to send data from your HTML forms to the Google Sheets. You can use the following service for connecting a RESTful API to your Google Sheets.

Explore SHEET DB and signup for a free account.
Log in your SHEET DB dashboard after signing up.

3. Open Google Drive and log in. Create a Google Sheet 📁:
Now, use your same account that you registered with SHEET DB to log into Google Drive.

Create an empty Google Sheet.
Make sure the column names in the sheet are similar to the input box name in the original HTML forms (such as name, email, message), and name the sheet based on the requirements of your project.

4. Copy the API key and paste it into your HTML form 🚀:
You can utilize the API URL that SHEET DB will give you to transfer data from your form to the Google Sheet.

Connect your Google Sheet to your SHEET DB control panel, and the platform will create an API URL for you.
Paste your copied API URL into your HTML form's action property.

Change the following in the HTML form code:

<form id="contact-form" action="YOUR_SHEETDB_API_URL" method="POST">
    <!-- form fields -->
</form>

🚀 Note : Change "YOUR_SHEETDB_API_URL" with the URL that SHEET DB actually provided.

For a Preview of the Detailed, Hands-on Procedure, Please Watch the Video Below. It will guide you along every step with full explanations and illustrations.

For Source Code Click on the Download Button 🧑‍💻.