Love our work? if you want a custom project Contact on Whatsapp

How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | R40

🎉 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
How to Copy a Google Sheet

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



Make a Sheet Copy

Contact us For Project

Join Whatsapp Community

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>

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!

Post a Comment

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.