Index.html
<!DOCTYPE html>
<!-- ===== LANDING PAGE ===== -->
<section id="landing" class="hero">
<div class="hero-card">
<h1>Pelatihan & Workshop Digital</h1>
<p>
Daftarkan diri Anda pada program pelatihan berbasis digital skills.
Data akan tersimpan otomatis ke sistem.
</p>
<button onclick="showForm()">Mulai Isi Data</button>
</div>
</section>
<!-- ===== FORM INPUT ===== -->
<section id="formSection" class="hidden">
<div class="container">
<h3>Form Pendaftaran</h3>
<label>Nama Lengkap</label>
<input type="text" id="nama">
<label>Email</label>
<input type="email" id="email">
<label>Instansi / Sekolah</label>
<input type="text" id="instansi">
<label>Pilih Pelatihan</label>
<select id="pelatihan">
<option value="">-- Pilih --</option>
<option>Digital Skills</option>
<option>Web Programming</option>
<option>UI/UX Design</option>
<option>Entrepreneurship</option>
</select>
<button class="primary" onclick="kirimData()">Simpan Pendaftaran</button>
<button class="back" onclick="kembali()">Kembali</button>
<div id="result"></div>
</div>
</section>
<script>
function showForm() {
document.getElementById('landing').classList.add('hidden');
document.getElementById('formSection').classList.remove('hidden');
}
function kembali() {
document.getElementById('formSection').classList.add('hidden');
document.getElementById('landing').classList.remove('hidden');
}
function kirimData() {
const nama = document.getElementById('nama').value;
const email = document.getElementById('email').value;
const instansi = document.getElementById('instansi').value;
const pelatihan = document.getElementById('pelatihan').value;
if (!nama || !email || !instansi || !pelatihan) {
alert('Semua field wajib diisi');
return;
}
google.script.run
.withSuccessHandler(function(res) {
document.getElementById('result').innerText = res;
document.getElementById('nama').value = '';
document.getElementById('email').value = '';
document.getElementById('instansi').value = '';
document.getElementById('pelatihan').value = '';
})
.simpanData(nama, email, instansi, pelatihan);
}
</script>
</body>
</html>
Code gs
// ================= KONFIGURASI =================
const SPREADSHEET_ID = '1K8k4r8O1ajKCKrlExdQVyIYECmwIVVdWOx7OnbXxMBk';
const SHEET_NAME = 'Pendaftaran';
// ================= DOGET =================
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Form Pelatihan / Workshop')
.addMetaTag('viewport', 'width=device-width, initial-scale=1.0');
}
// ================= SIMPAN DATA =================
function simpanData(nama, email, instansi, pelatihan) {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
let sheet = ss.getSheetByName(SHEET_NAME);
if (!sheet) {
sheet = ss.insertSheet(SHEET_NAME);
sheet.appendRow([
'Timestamp', 'Nama Lengkap', 'Email', 'Instansi', 'Pelatihan'
]);
}
sheet.appendRow([
new Date(), nama, email, instansi, pelatihan
]);
return 'Pendaftaran berhasil disimpan ✅';
}
Tidak ada komentar:
Posting Komentar