E-form with signature
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* membuat form berada di tengah halaman */
body {
display: flex;
justify-content: center;
align-items: center;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type="text"],
input[type="email"],
input[type="text"] {
padding: 0.5rem;
border-radius: 3px;
border: none;
background-color: #fff;
}
input[type="submit"] {
padding: 0.5rem;
border-radius: 100px;
border: none;
background-color: #4285f4;
color: #fff;
font-weight: bold;
cursor: pointer;
}
/* mengatur jarak antar kolom */
.form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.signature-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.signature-pad {
border: 1px solid #c3c3c3;
}
</style>
</head>
<body>
<header>
<div style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
<img src="yourImage.png"alt="Logo Sekolah" style="height: 100px; width: auto;">
<h2 style="text-align: center;">E-HADIR</h2>
</div>
<form id="myForm">
<div class="form-field">
<label for="name"><b>Nama</b><span class="required">*</span></label>
<input type="text" id="name" name="name" placeholder="Masukkan nama lengkap Anda" required>
</div>
<div class="form-field">
<label for="email"><b>Email</b><span class="required">*</span></label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required>
</div>
<div class="form-field">
<label for="school"><b>Nama Sekolah</b><span class="required">*</span></label>
<input type="text" id="name" name="school" placeholder="Nama Sekolah Anda" required>
</div>
<div class="signature-container">
<label for="signature"><b>Tanda Tangan</b><span class="required">*</span></label>
<canvas
id="signature-pad"
class="signature-pad"
width="300"
height="150"
></canvas>
<button type="button" id="clear-button" class="material-icons" style="border: none;">clear</button>
<input type="hidden" id="signature" name="signature"/>
</div>
<div
class="modal fade"
id="success-modal"
tabindex="-1"
role="dialog"
aria-labelledby="success-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="success-modal-label">Sukses!</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Data berhasil disimpan!</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
OK
</button>
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/
signature_pad.min.js">
</script>
<script>
const form = document.getElementById("myForm");
const signaturePad = new SignaturePad(
document.getElementById("signature-pad")
);
const clearButton = document.getElementById("clear-button");
const signatureInput = document.getElementById("signature");
form.addEventListener("submit", function (event) {
event.preventDefault();
signatureInput.value = signaturePad.toDataURL();
google.script.run
.withSuccessHandler(function () {
Swal.fire({
title: "Sukses!",
text: "Data berhasil disimpan!",
icon: "success",
confirmButtonText: "OK",
}).then(function () {
form.reset();
signaturePad.clear();
});
})
.submitForm(this);
});
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
signatureInput.value = "";
});
</script>
</body>
</html>
Kode.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
// menampilkan formulir
function submitForm(form) {
const name = form.name;
const email = form.email;
const school = form.school;
const signature = form.signature;
// simpan data ke Google Sheets
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form');
const newRow = [name, email, school, ""];
const row = sheet.getLastRow() + 1;
sheet.insertRowBefore(row);
sheet.getRange(row, 1, 1, 4).setValues([newRow]);
sheet.getRange(row, 4).insertCheckboxes();
// konversi tanda tangan ke gambar PNG
const signatureData = signature.replace(/^data:image\/(png|jpg);base64,/, "");
const signatureBlob = Utilities.newBlob(Utilities.base64Decode(signatureData),
"image/png", "signature.png");
// simpan gambar ke Google Drive
const folder = DriveApp.getFolderById("--"); // ganti dengan ID folder Anda
const file = folder.createFile(signatureBlob);
sheet.getRange(row, 4).setValue(file.getUrl());
}
.jpg)
%20(1).gif)
Komentar
Posting Komentar
Hello, Welcome to Learning and Sharing