Form survei sederhana yang siap dipakai
Form survei sederhana yang siap dipakai
Berikut contoh form survei yang bisa Anda gunakan langsung. Anda bisa menaruhnya di website (HTML) atau mengirimnya via link jika di-host. Saya sertakan versi HTML murni, plus opsi penyimpanan ke Google Sheets via Apps Script, agar hasilnya otomatis tercatat.
Template HTML survei
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Form Survei Kepuasan</title>
<style>
body { font-family: system-ui, Arial, sans-serif; line-height: 1.5; margin: 24px; color: #222; }
.container { max-width: 760px; margin: 0 auto; }
h1 { margin-bottom: 8px; }
.desc { color: #555; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
label { font-weight: 600; display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], textarea, select {
width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;
}
.inline { display: flex; gap: 12px; flex-wrap: wrap; }
.inline label { font-weight: 500; }
.hint { font-size: 12px; color: #777; }
button { background: #2563eb; color: #fff; border: none; padding: 12px 18px; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.success { background: #ecfeff; border: 1px solid #06b6d4; color: #0e7490; padding: 12px; border-radius: 8px; margin-top: 16px; display: none; }
.error { background: #fee2e2; border: 1px solid #ef4444; color: #7f1d1d; padding: 12px; border-radius: 8px; margin-top: 16px; display: none; }
</style>
</head>
<body>
<div class="container">
<h1>Survei Kepuasan Layanan</h1>
<p class="desc">Mohon luangkan waktu 2–3 menit untuk mengisi survei ini. Jawaban Anda membantu kami meningkatkan layanan.</p>
<form id="survey-form" method="POST">
<div class="field">
<label for="name">Nama</label>
<input type="text" id="name" name="name" placeholder="Nama lengkap" required />
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="nama@contoh.com" required />
<div class="hint">Kami tidak akan membagikan email Anda.</div>
</div>
<div class="field">
<label>Seberapa puas Anda dengan layanan kami?</label>
<div class="inline">
<label><input type="radio" name="satisfaction" value="1" required /> 1</label>
<label><input type="radio" name="satisfaction" value="2" /> 2</label>
<label><input type="radio" name="satisfaction" value="3" /> 3</label>
<label><input type="radio" name="satisfaction" value="4" /> 4</label>
<label><input type="radio" name="satisfaction" value="5" /> 5</label>
</div>
<div class="hint">1 = sangat tidak puas, 5 = sangat puas</div>
</div>
<div class="field">
<label for="nps">Seberapa mungkin Anda merekomendasikan kami ke teman/rekan?</label>
<select id="nps" name="nps" required>
<option value="" disabled selected>Pilih angka 0–10</option>
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option>
<option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
</select>
<div class="hint">0 = tidak mungkin, 10 = sangat mungkin</div>
</div>
<div class="field">
<label for="likes">Apa yang paling Anda sukai dari layanan kami?</label>
<textarea id="likes" name="likes" rows="3" placeholder="Tuliskan hal yang paling bermanfaat/berkesan" required></textarea>
</div>
<div class="field">
<label for="improve">Apa yang perlu kami perbaiki?</label>
<textarea id="improve" name="improve" rows="3" placeholder="Saran spesifik agar kami bisa lebih baik" required></textarea>
</div>
<div class="field">
<label>Topik layanan yang Anda gunakan</label>
<div class="inline">
<label><input type="checkbox" name="topics" value="Pembelian" /> Pembelian</label>
<label><input type="checkbox" name="topics" value="Support" /> Support</label>
<label><input type="checkbox" name="topics" value="Training" /> Training</label>
<label><input type="checkbox" name="topics" value="Lainnya" /> Lainnya</label>
</div>
</div>
<div class="field">
<label for="consent">
<input type="checkbox" id="consent" name="consent" required />
Saya setuju data saya digunakan untuk peningkatan layanan.
</label>
</div>
<button type="submit" id="submitBtn">Kirim</button>
<div id="success" class="success">Terima kasih! Respons Anda sudah tercatat.</div>
<div id="error" class="error">Maaf, terjadi kesalahan. Coba lagi nanti.</div>
</form>
</div>
<script>
// Ganti URL ini dengan endpoint Anda (mis. Apps Script Web App atau API)
const ENDPOINT = "https://YOUR_WEB_APP_ENDPOINT";
const form = document.getElementById('survey-form');
const submitBtn = document.getElementById('submitBtn');
const success = document.getElementById('success');
const errorBox = document.getElementById('error');
form.addEventListener('submit', async (e) => {
e.preventDefault();
success.style.display = 'none';
errorBox.style.display = 'none';
submitBtn.disabled = true;
const data = Object.fromEntries(new FormData(form));
try {
const res = await fetch(ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (!res.ok) throw new Error('Request failed');
success.style.display = 'block';
form.reset();
} catch (err) {
errorBox.style.display = 'block';
} finally {
submitBtn.disabled = false;
}
});
</script>
</body>
</html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Form Survei Kepuasan</title>
<style>
body { font-family: system-ui, Arial, sans-serif; line-height: 1.5; margin: 24px; color: #222; }
.container { max-width: 760px; margin: 0 auto; }
h1 { margin-bottom: 8px; }
.desc { color: #555; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
label { font-weight: 600; display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], textarea, select {
width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;
}
.inline { display: flex; gap: 12px; flex-wrap: wrap; }
.inline label { font-weight: 500; }
.hint { font-size: 12px; color: #777; }
button { background: #2563eb; color: #fff; border: none; padding: 12px 18px; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.success { background: #ecfeff; border: 1px solid #06b6d4; color: #0e7490; padding: 12px; border-radius: 8px; margin-top: 16px; display: none; }
.error { background: #fee2e2; border: 1px solid #ef4444; color: #7f1d1d; padding: 12px; border-radius: 8px; margin-top: 16px; display: none; }
</style>
</head>
<body>
<div class="container">
<h1>Survei Kepuasan Layanan</h1>
<p class="desc">Mohon luangkan waktu 2–3 menit untuk mengisi survei ini. Jawaban Anda membantu kami meningkatkan layanan.</p>
<form id="survey-form" method="POST">
<div class="field">
<label for="name">Nama</label>
<input type="text" id="name" name="name" placeholder="Nama lengkap" required />
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="nama@contoh.com" required />
<div class="hint">Kami tidak akan membagikan email Anda.</div>
</div>
<div class="field">
<label>Seberapa puas Anda dengan layanan kami?</label>
<div class="inline">
<label><input type="radio" name="satisfaction" value="1" required /> 1</label>
<label><input type="radio" name="satisfaction" value="2" /> 2</label>
<label><input type="radio" name="satisfaction" value="3" /> 3</label>
<label><input type="radio" name="satisfaction" value="4" /> 4</label>
<label><input type="radio" name="satisfaction" value="5" /> 5</label>
</div>
<div class="hint">1 = sangat tidak puas, 5 = sangat puas</div>
</div>
<div class="field">
<label for="nps">Seberapa mungkin Anda merekomendasikan kami ke teman/rekan?</label>
<select id="nps" name="nps" required>
<option value="" disabled selected>Pilih angka 0–10</option>
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option>
<option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
</select>
<div class="hint">0 = tidak mungkin, 10 = sangat mungkin</div>
</div>
<div class="field">
<label for="likes">Apa yang paling Anda sukai dari layanan kami?</label>
<textarea id="likes" name="likes" rows="3" placeholder="Tuliskan hal yang paling bermanfaat/berkesan" required></textarea>
</div>
<div class="field">
<label for="improve">Apa yang perlu kami perbaiki?</label>
<textarea id="improve" name="improve" rows="3" placeholder="Saran spesifik agar kami bisa lebih baik" required></textarea>
</div>
<div class="field">
<label>Topik layanan yang Anda gunakan</label>
<div class="inline">
<label><input type="checkbox" name="topics" value="Pembelian" /> Pembelian</label>
<label><input type="checkbox" name="topics" value="Support" /> Support</label>
<label><input type="checkbox" name="topics" value="Training" /> Training</label>
<label><input type="checkbox" name="topics" value="Lainnya" /> Lainnya</label>
</div>
</div>
<div class="field">
<label for="consent">
<input type="checkbox" id="consent" name="consent" required />
Saya setuju data saya digunakan untuk peningkatan layanan.
</label>
</div>
<button type="submit" id="submitBtn">Kirim</button>
<div id="success" class="success">Terima kasih! Respons Anda sudah tercatat.</div>
<div id="error" class="error">Maaf, terjadi kesalahan. Coba lagi nanti.</div>
</form>
</div>
<script>
// Ganti URL ini dengan endpoint Anda (mis. Apps Script Web App atau API)
const ENDPOINT = "https://YOUR_WEB_APP_ENDPOINT";
const form = document.getElementById('survey-form');
const submitBtn = document.getElementById('submitBtn');
const success = document.getElementById('success');
const errorBox = document.getElementById('error');
form.addEventListener('submit', async (e) => {
e.preventDefault();
success.style.display = 'none';
errorBox.style.display = 'none';
submitBtn.disabled = true;
const data = Object.fromEntries(new FormData(form));
try {
const res = await fetch(ENDPOINT, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (!res.ok) throw new Error('Request failed');
success.style.display = 'block';
form.reset();
} catch (err) {
errorBox.style.display = 'block';
} finally {
submitBtn.disabled = false;
}
});
</script>
</body>
</html>
Opsi penyimpanan ke Google Sheets
Jika Anda ingin hasil survei otomatis masuk ke Google Sheets, gunakan Google Apps Script sebagai endpoint.
Langkah:
Buat Google Sheet baru dan beri nama kolom: Name, Email, Satisfaction, NPS, Likes, Improve, Topics, Consent, Timestamp.
Apps Script: Extensions → Apps Script → tempel kode di bawah.
Deploy sebagai Web App (Anyone with the link).
const ss = SpreadsheetApp.openById('SPREADSHEET_ID'); // ganti dengan ID Sheet
const sheet = ss.getSheetByName('Form'); // ganti nama sesuai sheet Anda
const data = JSON.parse(e.postData.contents);
const topics = Array.isArray(data.topics) ? data.topics.join(', ') : (data.topics || '');
sheet.appendRow([
data.name || '',
data.email || '',
data.satisfaction || '',
data.nps || '',
data.likes || '',
data.improve || '',
topics,
data.consent ? 'Yes' : 'No',
new Date()
]);
return ContentService.createTextOutput(
JSON.stringify({ ok: true })
).setMimeType(ContentService.MimeType.JSON);
}
integrasi: Ganti
ENDPOINTdi HTML dengan URL Web App yang Anda dapatkan setelah deploy.
Tips agar survei efektif
Pertanyaan jelas: Gunakan skala yang konsisten (mis. Likert 1–5 atau NPS 0–10).
Durasi singkat: Batasi 5–8 pertanyaan agar tingkat penyelesaian tinggi.
Tujuan spesifik: Jelaskan manfaat survei di deskripsi untuk meningkatkan respons.
Anonimitas opsional: Sediakan opsi anonim jika topik sensitif.
Analitik: Tambahkan kolom timestamp dan sumber (channel) untuk analisis tren.
Komentar
Posting Komentar