Submit Custom HTML Form Data to Google Sheets

Submit Custom HTML Form Data to Google Sheets

A simple way to send HTML form data in your google sheet

First, go to google and type google sheets otherwise  go to https://www.google.com/sheets/about/ the link 

Once open the link go google sheets

Configuring the Google Script

Choose blank and change the google sheet name

then enter form data name like name, email, phone, msg, if required any other then add also.

you are done now  goto  tool and script editor 

This will open a new Google Script that will look something like this:

Del the code and paste new code  and click the save icon, then go to save, then ask to change the name  ( put the same name  wich name in your google sheet)

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

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

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

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

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

			var newRow = headers.map(function(header) {
			  return header === 'timestamp' ? 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()
		  }
		}
            
         

then goto run then > Run function > (then) intialSetup once done the process 

You might be asked to give Google Scripts to use your Google account.

Once you’ve given your authorization, go to the “Publish” menu and select “Deploy as web app.”

You will then be presented with a few options with which to customize your script.

Building the HTML Form

then add  script and follow the video hope you understand 
any type of query join our what's app group using the link
https://chat.whatsapp.com/DwkOp1fBqsj6b1LGJ8Bf8p


<script>
            const scriptURL = 'https://script.google.com/macros/s/AKfycbxEu8dPtSznFhoQRH23nEFjzQfRFJL6AI3fLixXoNxCk5HBBZfn/exec'
            const form = document.forms['google-sheet']
          
            form.addEventListener('submit', e => {
              e.preventDefault()
              fetch(scriptURL, { method: 'POST', body: new FormData(form)})
                .then(response => alert("Thanks for Contacting us..! We Will Contact You Soon..."))
                .catch(error => console.error('Error!', error.message))
            })
          </script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 

What's Your Reaction?

like
1
dislike
1
love
1
funny
1
angry
1
sad
1
wow
1