Streamlining Data Collection: Connecting HTML Forms to Google Sheets

AppSScript Code 1

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(form) {
var sheet = SpreadsheetApp.getActiveSheet();
var row = [form.fname, form.lname, form.email, form.mobile, form.address, form.description];
sheet.appendRow(row);
return true;
}

AppSScript Code 2

<!DOCTYPE html>
        <html>
        <head>
        <base target="_top">
        </head>
        <body>
        <div style="text-align:left;width:16%;margin:50px auto 0px; display: block;line-height: 26px; padding: 59px 137px;background-color: #8080801c;">
        <form id="myForm">
        <h1>Enquiry forms</h1>
        <label for="name">First Name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="name">Last Name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="name">Mobile Number:</label>
        <input type="text" id="mobile" name="mobile"><br><br>
        <label for="name">Address:</label>
        <input type="text" id="address" name="address"><br><br>
        <label for="name">Description:</label>
        <input type="text" id="description" name="description"><br><br>
        <input type="button" value="Submit" onclick="submitForm()">
        </form>
        </div>
        <script>
          function submitForm() {
            google.script.run.withSuccessHandler(alert('Data submitted successfully.')).processForm(document.getElementById('myForm'));
            document.getElementById('myForm').reset();
          }
        </script>
        </body>
        </html>