Sunday, November 8, 2020

SCRIPT CODE FOR GOOGLE SHEETS 


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()

 }

}

GOOGLE SHEET SCRIPT



 <script>

            const scriptURL = 'https://script.google.com/macros/s/AKfycbxJsqog2J2UKKPcMpFWgNpmXJ9jwxWvc-ItRwFToS2QTgNq_rQ/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>

FORM IN HTML


 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <style>

            .register .nav-tabs .nav-link:hover{

                border: none;

            }

            .text-align{

                margin-top: -3%;

                margin-bottom: -9%;


                padding: 10%;

                margin-left: 30%;

            }

            .form-new{

                margin-right: 22%;

                margin-left: 20%;

            }

            .register-heading{

                margin-left: 21%;

                margin-bottom: 10%;

                color: #e9ecef;

            }

            .register-heading h1{

                margin-left: 21%;

                margin-bottom: 10%;

                color: #e9ecef;

            }

            .register{

                background: -webkit-linear-gradient(left, #055a4f, #00c6ff);

                margin-top: 3%;

                padding: 3%;

                border-radius: 2.5rem;

            }

            .btnSubmit

            {

                width: 50%;

                border-radius: 1rem;

                padding: 1.5%;

                color: #fff;

                background-color: #03612e;

                border: none;

                cursor: pointer;

                margin-right: 6%;

                color: rgb(246, 246, 252);

                margin-top: 4%;

            }

    </style>


</head>

<body>

    

<div class="container register">

            <div class="row">

                <div class="col-md-12">

            <div class="tab-pane fade show active text-align form-new" id="home" role="tabpanel" aria-labelledby="home-tab">

            <h3 class="register-heading">Connect Google Spreadsheet to HTML</h3>

            div class="row register-form">

            div class="col-md-12">

            <form method="post" autocomplete="off" name="google-sheet">

            div class="form-group">

            <input type="text" name="Name" class="form-control" placeholder="Your Name *" value="" required=""/>

            </div>

             <div class="form-group">

             <input type="text" name="Email" class="form-control" placeholder="Your Email *" value="" required=""/>

            </div>

            <div class="form-group">

            <input type="number" name="Phone" class="form-control" placeholder="Your Contact Number *" value="" required=""/>

            </div>

            <div class="form-group">

            <input type="submit" name="submit" class="btnSubmit btn-block" value="Login" />

            </div>

             </form

            </div>

            </div>

            </div>

            </div>

            </div>

         </div>

</body>

</html>


 LINK FOR CHECKING COMPATIBLITY -  https://betaprofiles.com LINK FOR DOWNLOADING PROFILES - https://betaprofiles.com