 |
| Form Unggah & Tanda Tangan Elektronik |
Form unggah dan tanda tangan elektronik adalah fitur yang memungkinkan pengguna untuk mengunggah dokumen dan memberikan tanda tangan digital langsung melalui formulir online. Fitur ini sangat berguna untuk berbagai keperluan, mulai dari persetujuan dokumen, kontrak kerja, hingga pendaftaran online.
Keunggulan Menggunakan Form Unggah & Tanda Tangan Elektronik:
Efisiensi: Menghemat waktu dan biaya karena proses dilakukan secara online, tanpa perlu mencetak, memindai, atau mengirim dokumen secara fisik.
Keamanan: Tanda tangan digital memberikan tingkat keamanan yang tinggi karena bersifat unik dan sulit dipalsukan.
Kemudahan Penggunaan: Pengguna dapat mengakses dan mengisi formulir dari mana saja yang memiliki koneksi internet.
Lingkungan: Mengurangi penggunaan kertas dan tinta, sehingga lebih ramah lingkungan.
BACA JUGA Upload file ke Google Form tanpa Sign In
Bagaimana Google Memfasilitasi Fitur Ini:
Meskipun Google tidak memiliki fitur tanda tangan digital bawaan, Kalian dapat memanfaatkannya dengan beberapa cara:
Mengunggah Gambar Tanda Tangan:
Buat pertanyaan jenis "Unggah File" di Google Forms.
Minta pengguna mengunggah gambar tanda tangan mereka dalam format yang sesuai (misalnya, JPG atau PNG).
Kelemahan: Keakuratan dan keamanan tanda tangan mungkin tidak terjamin sepenuhnya.
- Menggunakan Add-on:
Google Workspace memiliki berbagai add-on yang dapat memperluas fungsionalitas Google Forms.
Beberapa add-on memungkinkan Kalian menambahkan fitur tanda tangan digital ke formulir Kalian
Keuntungan: Lebih fleksibel dan terintegrasi dengan Google Forms.
- Menggunakan Layanan Tanda Tangan Digital Eksternal:
Ada banyak layanan pihak ketiga yang menyediakan fitur tanda tangan digital yang dapat diintegrasikan dengan Google Forms.
Layanan ini biasanya menawarkan fitur yang lebih canggih, seperti verifikasi identitas dan audit trail.
Hal yang Perlu Diperhatikan:
Keamanan: Pastikan layanan atau add-on yang Kalian gunakan memiliki sertifikasi keamanan yang memadai.
Legalitas: Tanda tangan digital harus memenuhi persyaratan hukum yang berlaku di negara Kalian.
Kompatibilitas: Pastikan format file yang diterima oleh sistem Kalian kompatibel dengan berbagai perangkat.
Kesimpulan
Form unggah dan tanda tangan elektronik adalah solusi yang efisien dan aman untuk berbagai keperluan. Google Forms, meskipun tidak memiliki fitur bawaan, dapat diintegrasikan dengan berbagai alat untuk mencapai fungsionalitas ini. Dengan memilih solusi yang tepat, Kalian dapat meningkatkan efisiensi proses bisnis dan mengurangi penggunaan kertas.
Kode untuk Form Unggah & Tanda Tangan Elektronik ( Form 2 )
| <!-- Create By AkoMSentani --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Form Unggah & TTE</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f4; | |
| text-align: center; | |
| } | |
| button, input[type="submit"] { | |
| margin-top: 10px; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| button:hover, input[type="submit"]:hover { | |
| background-color: #45a049; | |
| } | |
| button:active, input[type="submit"]:active { | |
| transform: scale(0.95); | |
| } | |
| form { | |
| margin: 20px auto; | |
| max-width: 400px; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| text-align: left; | |
| } | |
| label { | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| input, canvas { | |
| width: 100%; | |
| margin-bottom: 15px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| } | |
| .tombol-container { | |
| text-align: center; | |
| } | |
| .tombol-clear { | |
| display: block; | |
| margin: 10px auto 0; | |
| background-color: #f44336; | |
| } | |
| .tombol-clear:hover { | |
| background-color: #e53935; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Form Unggah & TTE</h1> | |
| <form id="form" onsubmit="kirimForm(this); return false;"> | |
| <label>Nama:</label> | |
| <input type="text" name="nama" required><br> | |
| <label>Nama Lengkap:</label> | |
| <input type="text" name="namaLengkap" required><br> | |
| <label>Unggah Foto:</label> | |
| <input type="file" id="foto" name="foto" accept="image/*" required><br> | |
| <label>Tanda Tangan:</label> | |
| <canvas id="tandaTangan" width="400" height="200" style="border:1px solid #000;"></canvas> | |
| <input type="hidden" id="tandaTangan-hidden" name="tandaTangan"> | |
| <button type="button" class="tombol-clear" onclick="clearCanvas()">Clear Tanda Tangan</button> | |
| <input type="submit" value="Kirim"> | |
| </form> | |
| <div class="footer"> | |
| <p>© 2024 AkoMSentani</p> | |
| </div> | |
| </div> | |
| <script> | |
| var canvas = document.getElementById("tandaTangan"); | |
| var ctx = canvas.getContext("2d"); | |
| var isDrawing = false; | |
| canvas.addEventListener("mousedown", function() { | |
| isDrawing = true; | |
| ctx.beginPath(); | |
| }); | |
| canvas.addEventListener("mouseup", function() { | |
| isDrawing = false; | |
| }); | |
| canvas.addEventListener("mousemove", function(e) { | |
| if (isDrawing) { | |
| ctx.lineTo(e.offsetX, e.offsetY); | |
| ctx.stroke(); | |
| } | |
| }); | |
| function kirimForm(form) { | |
| var foto = document.getElementById("foto").files[0]; | |
| var reader = new FileReader(); | |
| reader.onload = function(event) { | |
| var tandaTangan = canvas.toDataURL(); | |
| var formData = { | |
| nama: form.nama.value, | |
| namaLengkap: form.namaLengkap.value, | |
| foto: event.target.result, | |
| tandaTangan: tandaTangan, | |
| }; | |
| google.script.run | |
| .withSuccessHandler(function () { | |
| alert("Data berhasil dikirim!"); | |
| form.reset(); | |
| clearCanvas(); | |
| }) | |
| .prosesForm(formData); | |
| }; | |
| reader.readAsDataURL(foto); | |
| } | |
| function clearCanvas() { | |
| // Hapus isi canvas | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| } | |
| </script> | |
| </body> | |
| </html> |
| /// Create By AkoMSentani --> | |
| function doGet() { | |
| var html = HtmlService.createHtmlOutputFromFile("form"); | |
| return html; | |
| } | |
| function onOpen() { | |
| var form = FormApp.getActiveForm(); | |
| } | |
| function prosesForm(e) { | |
| try { | |
| if (!e.nama || !e.namaLengkap || !e.foto || !e.tandaTangan) { | |
| throw new Error("Data form tidak lengkap!"); | |
| } | |
| var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form"); | |
| var folder = DriveApp.getFolderById("ID_FOLDER"); | |
| // Ambil data | |
| var nama = e.nama; | |
| var namaLengkap = e.namaLengkap; | |
| var foto = e.foto; | |
| var tandaTangan = e.tandaTangan; | |
| // Konversi Base64 ke Blob | |
| var fotoBlob = Utilities.newBlob(Utilities.base64Decode(foto.split(",")[1]), "image/png"); | |
| var tandaTanganBlob = Utilities.newBlob(Utilities.base64Decode(tandaTangan.split(",")[1]), "image/png"); | |
| // Simpan File ke Google Drive dengan Nama Unik | |
| var fileFoto = folder.createFile(fotoBlob.setName(nama + "_Foto.png")); | |
| var fileTandaTangan = folder.createFile(tandaTanganBlob.setName(nama + "_TTE.png")); | |
| // Berikan izin akses publik | |
| fileFoto.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW); | |
| fileTandaTangan.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW); | |
| // Ambil URL unduhan langsung | |
| var fotoUrl = "https://drive.google.com/uc?id=" + fileFoto.getId(); | |
| var tandaTanganUrl = "https://drive.google.com/uc?id=" + fileTandaTangan.getId(); | |
| // Tambahkan Data ke Spreadsheet tanpa ukuran yang ditentukan | |
| sheet.appendRow([ | |
| nama, | |
| namaLengkap, | |
| "=IMAGE(\"" + fotoUrl + "\")", // Set Ukuran Gambar | |
| "=IMAGE(\"" + tandaTanganUrl + "\")", // Set Ukuran Gambar | |
| ]); | |
| } catch (error) { | |
| Logger.log("Error: " + error.toString()); | |
| throw error; | |
| } | |
| } |
%20.jpg)
0 Comments