Setup Video Guide Video
Please Follow The Steps Here
Now Click on Extension and Choose a Appscript Option
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,
Code.gs
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
body { color: #000; overflow-x: hidden; height: 100%; background-image: url("https://i.imgur.com/GMmCQHC.png"); background-repeat: no-repeat; background-size: 100% 100%; } .card { padding: 30px 40px; margin-top: 60px; margin-bottom: 60px; border: none !important; box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2); } .blue-text { color: #00BCD4; } .form-control-label { margin-bottom: 0; } .btn-block { text-transform: uppercase; font-size: 15px !important; font-weight: 400; height: 43px; cursor: pointer; } .btn-block:hover { color: #fff !important; }
Script
function submitForm(event) { event.preventDefault(); const scriptURL = 'Paste Your Link const form = document.getElementById('product'); fetch(scriptURL, { method: 'POST', body: new FormData(form) }) .then(response => { if (response.ok) { Swal.fire( 'Success!', 'Your form has been submitted successfully.', 'success' ); form.reset(); } else { throw new Error('Network response was not ok.'); } }) .catch(error => { console.error('Error!', error.message); Swal.fire( 'Error!', 'Data not submitted. Server not responding.', 'error' ); }); }
<!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 SHEET</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> <style> </style></head><body> <div class="container-fluid px-1 py-5 mx-auto"> <div class="row d-flex justify-content-center"> <div class="col-xl-7 col-lg-8 col-md-9 col-11 text-center"> <h3>HTML FORM TO GOOGLE SHEET</h3> <p class="blue-text">Just answer a few questions<br> so that we can personalize the right experience for you.</p> <div class="card"> <h5 class="text-center mb-4">Powering world-class companies</h5> <form class="form-card" id="product" onsubmit="submitForm(event)"> <div class="form-row"> <div class="form-group col-md-6"> <label class="form-control-label">First name<span class="text-danger"> *</span></label> <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter your first name" required> </div> <div class="form-group col-md-6"> <label class="form-control-label">Last name<span class="text-danger"> *</span></label> <input type="text" class="form-control" id="lname" name="lname" placeholder="Enter your last name" required> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label class="form-control-label">Business email<span class="text-danger"> *</span></label> <input type="email" class="form-control" id="email"name="email" placeholder="Enter your email" required> </div> <div class="form-group col-md-6"> <label class="form-control-label">Phone number<span class="text-danger"> *</span></label> <input type="tel" class="form-control" id="mob" name="mob" placeholder="Enter your phone number" required> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <label class="form-control-label">Job title<span class="text-danger"> *</span></label> <input type="text" class="form-control" id="job" name="job" placeholder="Enter your job title" required> </div> </div> <div class="form-row"> <div class="form-group col-md-12"> <label class="form-control-label">What would you be using Flinks for?<span class="text-danger"> *</span></label> <input type="text" class="form-control" id="ans" name="ans" placeholder="Enter your answer" required> </div> </div> <div class="form-row justify-content-end"> <div class="form-group col-md-6"> <button type="submit" class="btn btn-block btn-primary">Request a demo</button> </div> </div> </form> </div> </div> </div> </div>
<script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script></body></html>
<!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 SHEET</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid px-1 py-5 mx-auto">
<div class="row d-flex justify-content-center">
<div class="col-xl-7 col-lg-8 col-md-9 col-11 text-center">
<h3>HTML FORM TO GOOGLE SHEET</h3>
<p class="blue-text">Just answer a few questions<br>
so that we can personalize the right experience for you.</p>
<div class="card">
<h5 class="text-center mb-4">Powering world-class companies</h5>
<form class="form-card" id="product" onsubmit="submitForm(event)">
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-control-label">First name
<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="fname"
name="fname" placeholder="Enter your first name" required>
</div>
<div class="form-group col-md-6">
<label class="form-control-label">Last name
<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="lname"
name="lname" placeholder="Enter your last name" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-control-label">Business email
<span class="text-danger"> *</span></label>
<input type="email" class="form-control" id="email"
name="email" placeholder="Enter your email" required>
</div>
<div class="form-group col-md-6">
<label class="form-control-label">Phone number
<span class="text-danger"> *</span></label>
<input type="tel" class="form-control" id="mob"
name="mob" placeholder="Enter your phone number" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label class="form-control-label">Job title
<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="job"
name="job" placeholder="Enter your job title" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label class="form-control-label">
What would you be using Flinks for?<span class="text-danger"> *</span></label>
<input type="text" class="form-control" id="ans"
name="ans" placeholder="Enter your answer" required>
</div>
</div>
<div class="form-row justify-content-end">
<div class="form-group col-md-6">
<button type="submit"
class="btn btn-block btn-primary">Request a demo</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.
bundle.min.js"></script>
</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!