How to Submit Custom HTML Form Data to Google Sheets

🎉 Welcome to our website, where exploration meets inspiration! 🌟 Join us on our journey by subscribing to our YouTube channel, fueling our motivation to craft innovative projects. 🚀

Setup Video Guide Video

>

Steps to Install The Google Web App in your End.

What You Exactly Need 

A Google Account / Google Sheet File

Basic Knowledge of HTML , CSS , JAVASCRIPT 

Basic Knowledge of Google Appscript

Learn How to Deploy a New Web or Manage Web App in Appscript

Important!You need to have basic programming knowledge of HTML, CSS, and JavaScript to modify the code in this post. However, I will try my best to make the code readable and editable by non-programmers too.

Please Follow The Steps Here

Click On Make a Copy To Copy the File In your Drive

Now Click on Extension and Choose a Appscript Option

Click on Deploy and Press on New Deployment

Now Here You Need to Select Anyone and Press on Deploy

After Deploy Allow Permission After Permission Given a URL Comes Which is Used to Access Your Web App and if You change in codes after deployment You need to apply Changes Need Deploy Again or Manage Deployments,

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545

Important!We always deliver what we promise to our clients. Quality over quantity is our motto! Our custom projects are priced reasonably and affordably for everyone. Join us and let's create something amazing together! 🎉🚀 Conatct Us :  +923224083545

Click 'Watch Now' to learn how to get a
Google Sheet link or make a copy
and Download Code!

Make a Sheet Copy

Contact us For Project

Join Whatsapp Community

X

CODE.JS

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? 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 (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

CSS USED IN STYLE TAG IN INDEX

*{
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif
        }

        body{
            background-color: #98efe1;
        }

        .content{
            text-align: ;
            display: ;
            position: relative;
           
        }

        form{
            display: flex;
			flex-direction: column;
            position: relative;
            overflow: hidden;
            background-color: #eeeeee;
            padding: 20px 30px;
            overflow: hidden;
            width: 345px;
            border-radius: 15px;
            top: 10px;
            border: 1px solid rgb(141, 141, 141);
            top: 30px;
            position: relative;
            
            
            

        }
        label{
            /* left: -90px; */
            text-align: left;
            margin: 10px;
            position: relative;
        }

        input{
            padding: 10px 15px;
            width: 320px;
            margin-bottom: 0px;
            border-radius: 6px;
            border: 1px solid rgb(119, 119, 119);
            display: flex;
            position: relative;
           
            
        }

        .click{
            margin: 10px;
            background-color: rgb(4, 162, 4);
            color: #fff;
            border: none;
            font-size: 15px;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 6px;
            margin: 5px;
            width: 346px;
            cursor: pointer;

        }

        .click:hover{
            background-color: rgb(5, 134, 5);
        }

        textarea{
            padding: 10px 15px;
            width: 322px;
            height: 50px;
            margin-bottom: 10px;
            border-radius: 6px;
            border: 1px solid rgb(122, 121, 121);
            position: relative;

        }

        .line{
            font-size: 10px;
            color: rgb(33, 33, 33);
            margin: 6px;
        }
	

SCRIPTUSED IN SCRIPT TAG IN INDEX

const scriptURL = '/// PASTE YOUR SCRIPT ID HERE ////'
        const form = document.forms['product']
      
        form.addEventListener('submit', e => {
          e.preventDefault()
          fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .then(response => alert("Thank you! your form is submitted successfully." ))
            .then(() => {  window.location.reload(); })
            .catch(error => console.error('Error!', error.message))
        })
	

Index.html / used offline 

<!DOCTYPE html>
<html>
<head>
	<title>Form Submit</title>
	<style>
	</style>
</head>
<body>
	<div class="content">
        <center>
        <form method="post" action="" name="product" id="product">
            <h1>Submit Product</h1>
            <p style="font-size: 10px;">Mohammad Rameez Imdad</p>
            
            <label for="naem">Name*</label>
            <input class="fil" type="text" name="name" placeholder="Enter Product Name" required>

            <label for="naem">Rate*</label>
            <input class="fil" type="text" name="price" placeholder="Enter Free Or Paid" required>

            <label for="naem">Product Link*</label>
            <input class="fil" type="text" name="Product Link" placeholder="Product Downloading Link" required>

            <label for="naem">Product code</label>
            <input class="fil" type="text" name="Product code" placeholder="Product code">

            <label for="naem">Email*</label>
            <input class="fil" type="text" name="email" placeholder="Enter Upi or Paypal" required>

            <label for="">Product Description*</label>
            <textarea name="description" id="" cols="30" rows="10" placeholder="About Product" required></textarea>

            <button class="click">Submit &#10132;</button>
            
            <p style="  font-size: 10px; color: rgb(33, 33, 33); margin: 6px;">Mohammad Rameez Imdad</p>

        </form>
        </center>
      
    </div>
    <script>
      </script>
    <br>
</body>
</html>

Terms of Use

If you want to use this Code in your posts, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.rameezimdad.blogspot.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about to help uou to Automate Your Business. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!