<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Form Pendaftaran Sekolah</title>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Form Pendaftaran Sekolah</h2>
<form id="formPendaftaran">
<label>Nama Lengkap</label>
<input type="text" name="nama" required />
<label>NISN</label>
<input type="text" name="nisn" required />
<label>Email</label>
<input type="email" name="email" required />
<label>No. HP</label>
<input type="text" name="hp" required />
<label>Jenis Kelamin</label>
<div class="radio-group">
<label><input type="radio" name="gender" value="Laki-laki" required /> Laki-laki</label>
<label><input type="radio" name="gender" value="Perempuan" required /> Perempuan</label>
</div>
<label>Jurusan</label>
<select name="jurusan" required>
<option value="">-- Pilih Jurusan --</option>
<option value="RPL">RPL</option>
<option value="TKJ">TKJ</option>
<option value="DKV">DKV</option>
<option value="TBSM">TBSM</option>
<option value="Akuntansi">Akuntansi</option>
</select>
<label>Alamat Lengkap</label>
<textarea name="alamat" rows="4" required></textarea>
<button type="submit">Daftar</button>
</form>
<p id="notif" class="notif"></p>
</div>
<script src="script.js"></script>
</body>
</html>
<!--
👉 Cara menyambungkan ke Google Sheets:
1. Buat Google Spreadsheet dan beri header: Nama, NISN, Email, HP, Jenis Kelamin, Jurusan, Alamat
2. Di Google Apps Script (https://script.google.com), buat file baru, tempelkan isi `Code.gs` (di bawah).
3. Deploy sebagai Web App:
- Klik Deploy > New Deployment
- Pilih "Web App"
- Isi nama, pilih "Anyone" untuk akses publik
- Salin URL Web App → ganti ke dalam `script.js` (letakkan di variabel `scriptURL`)
-->
Style.css
body {
font-family: 'Poppins', sans-serif;
background: #f2f7ff;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 40px auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
form label {
display: block;
margin-top: 15px;
font-weight: 600;
}
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.radio-group {
display: flex;
gap: 15px;
margin-top: 5px;
}
button {
margin-top: 20px;
padding: 12px;
width: 100%;
background-color: #1e88e5;
border: none;
color: white;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #1565c0;
}
.notif {
text-align: center;
margin-top: 20px;
color: green;
}
script.js
// Ganti URL di bawah dengan URL Web App kamu dari Google Apps Script
const scriptURL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec';
const form = document.getElementById('formPendaftaran');
const notif = document.getElementById('notif');
form.addEventListener('submit', e => {
e.preventDefault();
// Validasi sederhana
const data = new FormData(form);
for (let [key, value] of data.entries()) {
if (!value) {
notif.textContent = "Semua field harus diisi.";
notif.style.color = "red";
return;
}
}
fetch(scriptURL, { method: 'POST', body: data })
.then(response => {
notif.textContent = "Pendaftaran berhasil!";
notif.style.color = "green";
form.reset();
})
.catch(error => {
notif.textContent = "Terjadi kesalahan, silakan coba lagi.";
notif.style.color = "red";
console.error('Error!', error.message);
});
});
Code.gs
function doPost(e) {
const ss = SpreadsheetApp.openById('SPREADSHEET_ID');
const sheet = ss.getSheetByName('Sheet1');
const data = [
e.parameter.nama,
e.parameter.nisn,
e.parameter.email,
e.parameter.hp,
e.parameter.gender,
e.parameter.jurusan,
e.parameter.alamat
];
sheet.appendRow(data);
return ContentService
.createTextOutput("Success")
.setMimeType(ContentService.MimeType.TEXT);
}
No comments:
Post a Comment