#JP16 Membuat Formulir di Spreadsheet | Formulir Dialog Sidebar

Membuat Formulir di Spreadsheet | Formulir Dialog Sidebar

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Buatlah Spreadsheet

(Atau silahkan copy Spreadsheet disini)

2. Klik menu "Ekstensi" dan pilih "App Script".

3. Buat file "Code.gs" , "Index.html" , "Form.html" , "JavaScript.html".

4. Copy dan paste script dibawah ini ke "Code.gs".

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

//CREATE CUSTOM MENU
function onOpen() { 
  var ui = SpreadsheetApp.getUi();
  ui.createMenu("My Menu")
    .addItem("Sidebar Form","showFormInSidebar")
    .addItem("Modal Dialog Form","showFormInModalDialog")
    .addItem("Modeless Dialog Form","showFormInModlessDialog")
    .addToUi();
}
 
//OPEN THE FORM IN SIDEBAR 
function showFormInSidebar() {      
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle('Input Data Sidebar');
  SpreadsheetApp.getUi().showSidebar(form);
}
 
 
//OPEN THE FORM IN MODAL DIALOG
function showFormInModalDialog() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate();
  SpreadsheetApp.getUi().showModalDialog(form, "Input Data Dialog");
}
 
 
//OPEN THE FORM IN MODALLESS DIALOG
function showFormInModlessDialog() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(form, "Input Data Dialog");
}
 
 
//PROCESS FORM
function processForm(formObject){ 
  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.appendRow([formObject.Nama,
                formObject.Umur,
                formObject.Jenis_Kelamin,
                formObject.Alamat,
               
                //Add your new field names here
                ]);
}
 
//website : www.javabitpro.com
//INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

5. Copy dan pastekan script dibawah ini ke "Index.html".

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <?!= include('JavaScript'); ?> <!-- See JavaScript.html file -->
    <title>Contact Details</title>
  </head>
   
  <body class="bg-secondary text-light">
    <div class="container">
      <?!= include('Form'); ?> <!-- See Form.html file -->
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
<!-- Script by www.javabitpro.com ------------------------------------------------ -->
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:374px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:546px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:1055px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:1052px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:60%}}</style><div class="disclaimer">@Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>

6. Copy dan pastekan script dibawah ini ke "Form.html"

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<form id="myForm" onsubmit="handleFormSubmit(this)">
  <div class="form-group">
    <label for="first_name">First Nama</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="Nama" name="Nama" placeholder="Nama">
  </div>
  <div class="form-group">
    <label for="last_name">Umur</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="Umur" name="Umur" placeholder="Umur">
  </div>
  <div class="form-group">
    <label for="Jenis_Kelamin">Jenis Kelamin</label>
    <select class="form-control form-control-sm" id="Jenis_Kelamin" name="Jenis_Kelamin" required>
      <option value="" selected>Pilih...</option>
      <option value="Laki-Laki">Laki-Laki</option>
      <option value="Perempuan">Perempuan</option>
    </select>
  </div>
  <div class="form-group">
    <label for="email">Alamat</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="Alamat" name="Alamat">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

7. Copy dan pastekan script dibawah ini ke "JavaScript.html"

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<script>
  // Prevent forms from submitting.
  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);    
       
       
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>

8. Klik icon "Save" dan klik "Jalankan"

9. Apabila membutuhkan otorisasi silahkan tonton tutorial videonya untuk cara melewatinya

10. Pastikan tidak ada yang Error

11. Lihat dan Refresh Spreadsheet, maka akan muncul menu baru yaitu "My Menu"

12. Silahkan coba input data dengan menu baru yang ada pada "My Menu"

SELESAI !

#JP16 Membuat Formulir di Spreadsheet | Formulir Dialog Sidebar

Promo

Contact Form