Buatkan Form Pelatihan / Workshop dengan data disimpan pada google sheet. Back end menggunakan google apps script dan front end menggunakan index.html yang dipanggil dengan function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index’)}. Untuk front end buatkan
Landing Page (Hero Section)
- Full screen
- Gradient biru modern
- Call-to-action “Mulai Isi Data”
- Cocok untuk aplikasi GAS berbasis form publik
Form Dipisahkan Secara Visual
- Landing page ➜ Form input
- Navigasi tanpa reload (SPA-style sederhana)
UI Modern & Clean
- Typography rapi
- Card layout
- Shadow + rounded corner
- Warna biru konsisten (tema edukasi / sistem informasi)
Struktur Frontend Lebih Profesional
- HTML semantic (section)
- CSS terstruktur
- JavaScript jelas dan minimal
Index.html
<!DOCTYPE html>
<!-- ================= FORM ================= -->
<section id="formSection" class="hidden">
<div class="container">
<h3>Form Pendaftaran Peserta</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 Pelatihan --</option>
<option>Digital Skills</option>
<option>Web Programming</option>
<option>UI/UX Design</option>
<option>Entrepreneurship</option>
</select>
<div class="form-actions">
<button class="btn btn-submit" onclick="submitForm()">Simpan</button>
<button class="btn btn-secondary" onclick="UI.back()">Kembali</button>
</div>
<div id="result"></div>
</div>
</section>
<!-- ================= SCRIPT ================= -->
<script>
const UI = {
showForm() {
landing.classList.add('hidden');
formSection.classList.remove('hidden');
},
back() {
formSection.classList.add('hidden');
landing.classList.remove('hidden');
}
};
function submitForm() {
const nama = namaInput.value;
const email = emailInput.value;
const instansi = instansiInput.value;
const pelatihan = pelatihanSelect.value;
if (!nama || !email || !instansi || !pelatihan) {
alert('Semua field wajib diisi');
return;
}
google.script.run
.withSuccessHandler(msg => {
result.innerText = msg;
namaInput.value = emailInput.value = instansiInput.value = '';
pelatihanSelect.value = '';
})
.simpanData(nama, email, instansi, pelatihan);
}
// Cache element
const landing = document.getElementById('landing');
const formSection = document.getElementById('formSection');
const namaInput = document.getElementById('nama');
const emailInput = document.getElementById('email');
const instansiInput = document.getElementById('instansi');
const pelatihanSelect = document.getElementById('pelatihan');
const result = document.getElementById('result');
</script>
</body>
</html>
Code.gs
// ================= KONFIGURASI =================
const SPREADSHEET_ID = '1OvtbBrVx-V595nMcsR3cNXM_VC3lsrBA0mBYu-OZMOI';
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