How to create Login and Register Form using Google spreadsheet data? | with free source code

🎉 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

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

Click 'Watch Now' to learn how to get a
Google Sheet link or make a copy
and Download Code!

Make a Sheet Copy

Contact us For Project

Join Whatsapp Community

X

code.gs

function doGet(e) {
  var x = HtmlService.createTemplateFromFile("index");
  var y = x.evaluate();
  var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return z;
}

function checkLogin(username, password) {
  var url = '// Your Sheet ID //';
  var ss= SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("DATA");
  var getLastRow =  webAppSheet.getLastRow();
  var found_record = '';
  for(var i = 1; i <= getLastRow; i++)
  {
   if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && 
     webAppSheet.getRange(i, 2).getValue().toUpperCase() == password.toUpperCase())
   {
     found_record = 'TRUE';
   }    
  }
  if(found_record == '')
  {
    found_record = 'FALSE'; 
  }
  
  return found_record;
  
}

function AddRecord(usernamee, passwordd, email, phone) {
  var url = '// Your Google sheet ID ///';
  var ss= SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("DATA");
  webAppSheet.appendRow([usernamee,passwordd,email,phone]);
  
}

PASTE IN SCRIPT TAG IN HTML

function AddRow()
    {
      var usernamee = document.getElementById("usernamee").value;
      var passwordd = document.getElementById("passwordd").value;
      var email = document.getElementById("email").value;
      var phone = document.getElementById("phone").value;
      if (usernamee==""|| passwordd==""|| email==""|| phone=="") {
        return false;
      }
      else {
      google.script.run.AddRecord(usernamee,passwordd,email,phone);
      document.getElementById("page2_id1").className = "page2_id1-off";
      document.getElementById("page3_id1").className = "page3_id1";
     }
    }

     function LoginUser()
    {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    google.script.run.withSuccessHandler(function(output) 
    {
      if(output == 'TRUE')
      {
         var url1 ='https://bio.link/astoecompany';
         var winRef = window.open(url1);
         winRef ? google.script.host.close() : window.onload=function(){document.getElementById('url').href = url1;}    
      }
      else if(output == 'FALSE')
      {
        document.getElementById("errorMessage").innerHTML = "Username or Password Not Correct";     
      }    
    }).checkLogin(username, password);
    }
    
function function1(){
    document.getElementById("page1_id1").className = "page1_class1-off";
    document.getElementById("page2_id1").className = "page2_id1";
}
 
function function3(){ 
  document.getElementById("page3_id1").className = "page3_id1-off";
  document.getElementById("page1_id1").className = "page1_id1"; 
}

PASTE THIS IN HTML CSS STYLE TAG

/*page1*/
.page1_class1-off{
    display: none;
  }


/*page2*/
.page2_class1{
    display: none;
  }

.page2_id1-off{
    display:none;
}

/*page3*/
.page3_class1{
    display:none;

}
.page3_id1-off{
    display:none;
}


input[type=text]:hover{
        border-bottom:2px solid black;
      }
input[type=number]:hover{
        border-bottom:2px solid black;
      }
input[type=password]:hover{
        border-bottom:2px solid black;
      }
body {
        /* Note the Picture Shows in Video is chanf=ged by User */
        background-image: url('Custom Code');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

INDEX.html

<!DOCTYPE html>

<html>

  <head>

    <base target="_top">

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

      </head>

  <style>

</style>

  <body>

    <br><br>

<!--page1-->

<center>

 <div class="page1_class1" id="page1_id1" style="background:none;border:2px

solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom:

20px;padding-left: 20px;padding-right: 20px;">

    <h1>Login</h1>

    <br>

    <input type="text" id="username" placeholder="Username" style="border-top:

none;border-right: none;border-left: none;outline: none; text-align: center;

font-size:0.9em ;width: 50%;font-weight:bold;"/><br>

    <br>

    <input type="password" id="password" placeholder="Password" style="border-top:

none;border-right: none;border-left: none;outline: none; text-align: center;font-size:

0.9em ;width: 50%;font-weight:bold;"/>

    <br><span id="errorMessage" style="color: red" ></span><br>

    <input type="submit" value="Login" onclick="LoginUser()"  style="float:

right;padding-top: 1px;padding-bottom: 1px;padding-left: 10px;padding-right:

10px;font-size: 0.9em;font-weight:bold;" /><br>

    <br>

    <b>If you don't have an account,</b><input type="button" onClick="function1()"

value="Create New" style="margin-top: 5px;font-weight:bold;" />

 </div>

<!--page2-->

<div class="page2_class1" id="page2_id1" style="background:none;border:2px solid

gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left:

20px;padding-right: 20px;">

 <h1>Create Account</h1>

    <input type="text" id="usernamee" placeholder="Name" style="border-top:

none;border-right: none;border-left: none;outline: none; text-align: center;

font-size:0.9em ;width: 50%;font-weight:bold;"/><br>

    <br>

    <input type="password" id="passwordd" placeholder="Create password"

style="border-top: none;border-right: none;border-left: none;outline: none;

text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br>

        <br>

    <input type="text" id="email" placeholder="Email" style="border-top:

none;border-right: none;border-left: none;outline: none; text-align:

center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>

    <br>

    <input type="number" id="phone" placeholder="Phone no." style="border-top:

none;border-right: none;border-left: none;outline: none; text-align:

center;font-size:0.9em ;width: 50%;font-weight:bold;" /><br><br>

    <b style="color:red;">Password must contain letters and numbers.

It will not work without letters and numbers.</b><br><br>

    <input type="submit" value="Create" onclick="AddRow()" style="float:

right;padding-top: 1px;padding-bottom: 1px;padding-left: 10px;padding-right:

10px;font-size: 0.9em;font-weight:bold;" />

    <br>

</div>

<!--page3-->

 <div class="page3_class1" id="page3_id1" style="background:none;border:

2px solid gray;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom:

20px;padding-left: 20px;padding-right: 20px;"><center>

    <h2> Your account has been successfully created. Login to your account</h2>

    <input type="submit"  onClick="function3()" value="Login" style="font-weight:bold;">

<br>

 </div>

    <script>

  </script>

</center>

 </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!