Make Online Student ID Card by Google Form

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट , गुगल फॉर्म एवं गुगल स्‍लाईड की मदद से किस प्रकार स्‍टुडेन्‍ट की ऑनलाईन आई0डी0 कार्ड बनाया जाता है ा

How to Make Online Student ID Card by Google Form and Web App Script

In this blog, we will tell you how the student's ID card is made online automatically. Therefore, you read the entire blog carefully and learn to make the student's ID card according to the given guidelines.

Make Student ID Card Demo

Demo App

Search Your ID Card

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create Two File
code.gs
index.html

Step 4 :- Copy of code and Paste to Code.gs File and Paste to Web App Script Editor and Change Google Sheet ID and Google sheet Name

Code.gs

function doGet(e) {
  
  return HtmlService.createTemplateFromFile("Index").evaluate()
  .setTitle("ID Card")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


/* PROCESS FORM */
function processForm(formObject){ 
  var concat = formObject.searchtext+formObject.searchtext2;
  var result = "";
  if(concat){//Execute if form passes search text
      result = search(concat);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS ;
function search(searchtext){
  var spreadsheetId   = 'Paste Google Sheet ID'; //** CHANGE !!!!
  var sheetName = "Data"
  var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
  var data = range.getValues();
  var ar = [];
  
  data.forEach(function(f) {
    if (~[f[5]].indexOf(searchtext)) {
      ar.push([f[2],f[3],f[4]]);
    }
  });
                                           
  return ar;
};

Step 5 :- Copy of Index file and Paste to index.html file and Paste to Web App Script Editor

index.html

<!DOCTYPE html> <html> <head> <base target="_self"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <style> /* h5 {background: red;} */ </style> </head> <body> <div class="container"> <br> <div class="row"> <div class="col">  <center><form id="search-form" onsubmit="handleFormSubmit(this)"> <div class="form-group mb-2"> <body> <marquee direction="down" height="100" width="200" bgcolor="white">Sunrise IT Education</marquee> </body> <h5 for="searchtext">Download Identity Card</h5> </div><p> <div class="form-group mx-sm-3 mb-3"> <input type="text" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="Student Name"><br> <input type="password" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="Roll NO"> </div><p> <button type="submit" class="btn btn-primary mb-2">Search ID Card</button></br> <span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span> <span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span> <span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span> </form></center>  </div> </div> <div class="row"> <div class="col">  <div id="search-results" class="table-responsive">  </div>  </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>  <script> //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR function preventFormSubmit() { var forms = document.querySelectorAll('form'); for (var i = 0; i < forms.length; i++) { forms[i].addEventListener('submit', function(event) { event.preventDefault(); }); } } window.addEventListener("load", preventFormSubmit, true); //HANDLE FORM SUBMISSION function handleFormSubmit(formObject) { if(document.getElementById('searchtext').value == "" || document.getElementById('searchtext2').value == ""){ alert("Fill in Name and Password"); }else{ document.getElementById('resp-spinner5').classList.remove("d-none"); document.getElementById('resp-spinner6').classList.remove("d-none"); document.getElementById('resp-spinner7').classList.remove("d-none"); google.script.run.withSuccessHandler(createTable).processForm(formObject); document.getElementById("search-form").reset(); }; }; //CREATE THE DATA TABLE function createTable(dataArray) { document.getElementById('resp-spinner5').classList.add("d-none"); document.getElementById('resp-spinner6').classList.add("d-none"); document.getElementById('resp-spinner7').classList.add("d-none"); if(dataArray && dataArray !== undefined && dataArray.length != 0){ var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:1.0em'>"+ "<thead style='white-space: nowrap'>"+ "<tr>"+ //Change table headings to match with the Google Sheet "</tr>"+ "</thead>"; for(var i=0; i<dataArray.length; i++) { result += "<tr>"; for(var j=0; j<dataArray[i].length; j++){ result += "<td>"+dataArray[i][j]+"</td>"; } result += "</tr>"; } result += "</table>"; var div = document.getElementById('search-results'); div.innerHTML = result; }else{ var div = document.getElementById('search-results'); //div.empty() div.innerHTML = "First Name & Last Name Wrong!"; } } </script>  </body> </html>

Make Online Student ID Card by Google Form

How to Make Online Student ID Card by Google Form and Web App Script

In this blog, we will tell you how the student's ID card is made online automatically. Therefore, you read the entire blog carefully and learn to make the student's ID card according to the given guidelines.

Make Student ID Card Demo

Demo App

Search Your ID Card

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create Two File
code.gs
index.html

Step 4 :- Copy of code and Paste to Code.gs File and Paste to Web App Script Editor and Change Google Sheet ID and Google sheet Name

Code.gs

Step 5 :- Copy of Index file and Paste to index.html file and Paste to Web App Script Editor

index.html

Step 6 :- Code.gs Line No 22 Paste your Google Sheet ID

Example :- https://docs.google.com/spreadsheets/d/Google Sheet ID/edit#gid=0

Step 7 :- Copy ID Card Template Template Copy

Step 8 :- Google Form Copy Google Form

Step 9 :- Click to Google Sheet >> Extensions >> Add-ons >> Get Add-ons >>

Search AutoCrat and Install

More Detail See Video :-

Post a Comment

Donation and Support

Contact Form

Make Online Student ID Card by Google Form

How to Make Online Student ID Card by Google Form and Web App Script

In this blog, we will tell you how the student's ID card is made online automatically. Therefore, you read the entire blog carefully and learn to make the student's ID card according to the given guidelines.

Make Student ID Card Demo

Search Your ID Card

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create Two File code.gsindex.html

Step 4 :- Copy of code and Paste to Code.gs File and Paste to Web App Script Editor and Change Google Sheet ID and Google sheet Name

Code.gs

Step 5 :- Copy of Index file and Paste to index.html file and Paste to Web App Script Editor

index.html

Step 6 :- Code.gs Line No 22 Paste your Google Sheet ID

Example :- https://docs.google.com/spreadsheets/d/Google Sheet ID/edit#gid=0

Step 7 :- Copy ID Card Template Template Copy

Step 8 :- Google Form Copy Google Form

Step 9 :- Click to Google Sheet >> Extensions >> Add-ons >> Get Add-ons >>

Search AutoCrat and Install

More Detail See Video :-

Post a Comment

Contact Form

Step 3 :- Create Two File
code.gs
index.html