document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <base target="_top">
  5. <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  6. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  7. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  8.  
  9. <style>
  10. body#LoginForm{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;}
  11.  
  12. .form-heading { color:#fff; font-size:23px;}
  13. .panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
  14. .panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
  15. .login-form .form-control {
  16. background: #f7f7f7 none repeat scroll 0 0;
  17. border: 1px solid #d4d4d4;
  18. border-radius: 4px;
  19. font-size: 14px;
  20. height: 50px;
  21. line-height: 50px;
  22. }
  23. .main-div {
  24. background: #ffffff none repeat scroll 0 0;
  25. border-radius: 2px;
  26. margin: 10px auto 30px;
  27. max-width: 38%;
  28. padding: 50px 70px 70px 71px;
  29. }
  30.  
  31. .login-form .form-group {
  32. margin-bottom:10px;
  33. }
  34. .login-form{ text-align:center;}
  35. .forgot a {
  36. color: #777777;
  37. font-size: 14px;
  38. text-decoration: underline;
  39. }
  40. .login-form .btn.btn-primary {
  41. background: #f0ad4e none repeat scroll 0 0;
  42. border-color: #f0ad4e;
  43. color: #ffffff;
  44. font-size: 14px;
  45. width: 100%;
  46. height: 50px;
  47. line-height: 50px;
  48. padding: 0;
  49. }
  50. .forgot {
  51. text-align: left; margin-bottom:30px;
  52. }
  53. .botto-text {
  54. color: #ffffff;
  55. font-size: 14px;
  56. margin: auto;
  57. }
  58. .login-form .btn.btn-primary.reset {
  59. background: #ff9900 none repeat scroll 0 0;
  60. }
  61. .back { text-align: left; margin-top:10px;}
  62. .back a {color: #444444; font-size: 13px;text-decoration: none;}
  63. </style>
  64. </head>
  65. <body id="LoginForm">
  66. <div class="container">
  67. <h1 class="form-heading">Form User</h1>
  68. <div class="login-form">
  69. <div class="main-div">
  70. <div class="panel">
  71. <h2>Registrasi</h2>
  72. </div>
  73.  
  74. <div class="form-group">
  75.  
  76. <input type="text" class="form-control" id="username" placeholder="Nama Lengkap">
  77.  
  78. </div>
  79.  
  80. <div class="form-group">
  81.  
  82. <input type="text" class="form-control" id="email" placeholder="Email">
  83.  
  84. </div>
  85.  
  86. <div class="form-group">
  87.  
  88. <input type="text" class="form-control" id="jenisKelamin" placeholder="Gender">
  89.  
  90. </div>
  91. <div class="form-group">
  92.  
  93. <input type="text" class="form-control" id="alamat" placeholder="Alamat">
  94.  
  95. </div>
  96.  
  97. <button id ="btn" class="btn btn-primary">Simpan</button>
  98. </div>
  99. </div></div></div>
  100.  
  101. </body>
  102.  
  103. <script>
  104. document.getElementById("btn").addEventListener("click",doStuff);
  105.  
  106. function doStuff(){
  107. var uname = document.getElementById("username").value;
  108. var uemail = document.getElementById("email").value;
  109. var ujenisKelamin = document.getElementById("jenisKelamin").value;
  110. var ualamat = document.getElementById("alamat").value;
  111. google.script.run.userClicked(uname,uemail,ujenisKelamin, ualamat);
  112. document.getElementById("username").value= "";
  113. document.getElementById("email").value= "";
  114. document.getElementById("jenisKelamin").value= "";
  115. document.getElementById("alamat").value= "";
  116. }
  117. </script>
  118. </body>
  119. </html>
');