Tombol CTA dan Formulir

Ini chapter yang paling langsung berdampak ke konversi. Tombol CTA dan formulir adalah elemen dimana pengunjung berubah jadi leads atau pembeli. Kalau kamu cuma mau hafal satu chapter, hafal yang ini.

Tombol dengan Tag <button>

Cara paling dasar membuat tombol:

<button>Daftar Sekarang</button>

Tapi tombol ini belum melakukan apa-apa. Untuk tombol yang mengarah ke halaman lain, kamu sebenarnya lebih sering pakai tag <a> yang di-styling seperti tombol (ini urusan CSS, kita bahas sekilas di chapter berikutnya). Tapi di level HTML, penting kamu tahu bedanya:

• <button> — Untuk aksi dalam halaman (submit form, toggle sesuatu, interaksi JavaScript)
• <a> — Untuk navigasi ke URL lain (link WhatsApp, halaman checkout, dsb)

Di dunia nyata, CTA di landing page kebanyakan pakai <a> yang di-styling jadi tombol:

<a href="https://wa.me/6281234567890" class="cta-button">
  Hubungi Kami via WhatsApp
</a>

Atribut class="cta-button" itu buat styling CSS nanti. Untuk sekarang, cukup tahu bahwa class itu label yang kamu kasih ke elemen supaya bisa ditata tampilannya.

Formulir: Mengumpulkan Data Pengunjung

Formulir HTML dibuat dengan tag <form> dan berbagai jenis input:

<form action="/kirim-data" method="POST">
  <label for="nama">Nama Lengkap</label>
  <input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="email@contoh.com" required>

  <label for="telp">No. WhatsApp</label>
  <input type="tel" id="telp" name="telp" placeholder="08xxxxxxxxxx">

  <button type="submit">Kirim Data</button>
</form>

Kita bedah satu per satu:

Tag <form>

• action — URL tujuan pengiriman data. Ini biasanya dihandle oleh backend atau service seperti Formspree, Google Forms, atau CRM.
• method="POST" — Cara pengiriman data. POST mengirim data secara tersembunyi (bukan di URL). Hampir semua form pakai POST.

Tag <label>

Label adalah teks deskriptif yang terhubung ke input tertentu. Atribut for harus sama dengan id di input yang dituju. Jangan malas menulis label, ini membantu aksesibilitas dan membuat form lebih mudah diklik di HP (klik label = fokus ke input).

Tag <input>

Ini elemen paling fleksibel di form. Tipenya banyak:

Type	Fungsi	Contoh
text	Input teks biasa	Nama, alamat
email	Input email (otomatis validasi format)	Email kontak
tel	Input nomor telepon	WhatsApp
number	Input angka	Jumlah order
password	Input tersembunyi	Password
checkbox	Kotak centang	Persetujuan newsletter
radio	Pilihan tunggal dari beberapa opsi	Pilih paket
hidden	Input tersembunyi	Tracking ID, UTM parameter

Atribut penting di input:

• name — Nama field yang dikirim ke server. Ini wajib, tanpa ini data tidak terkirim.
• placeholder — Teks contoh yang muncul di dalam input sebelum diisi.
• required — Membuat field wajib diisi. Browser akan menampilkan pesan error otomatis kalau kosong.

Input Hidden: Senjata Rahasia Advertiser

Ini yang jarang dibahas tapi sangat penting untuk tracking:

<input type="hidden" name="utm_source" value="meta_ads">
<input type="hidden" name="utm_campaign" value="promo_maret">

Input hidden tidak terlihat oleh pengunjung, tapi datanya tetap terkirim bersama form. Ini berguna banget untuk menyertakan UTM parameter, campaign ID, atau data tracking lainnya ke dalam form submission.

Banyak advertiser yang tracking-nya bocor karena lupa menyertakan identifikasi sumber lead di form. Dengan hidden input, kamu bisa tahu persis leads ini datang dari kampanye mana.

Textarea: Input Teks Panjang

Untuk kolom pesan atau komentar:

<label for="pesan">Pesan</label>
<textarea id="pesan" name="pesan" rows="4" placeholder="Tulis pesan kamu di sini..."></textarea>

rows menentukan tinggi awal textarea.

Dropdown Select

Untuk pilihan dari daftar:

<label for="paket">Pilih Paket</label>
<select id="paket" name="paket">
  <option value="">-- Pilih Paket --</option>
  <option value="basic">Basic - Rp 99.000/bulan</option>
  <option value="pro">Pro - Rp 249.000/bulan</option>
  <option value="enterprise">Enterprise - Hubungi Kami</option>
</select>

Praktik: Bikin Form Lead Generation

Gabungkan semua elemen di atas:

<h2>Dapatkan Konsultasi Gratis</h2>
<p>Isi form di bawah ini, tim kami akan menghubungi kamu dalam 1x24 jam.</p>

<form action="https://formspree.io/f/FORM_ID" method="POST">
  <input type="hidden" name="source" value="landing_page_maret">
  
  <label for="nama">Nama</label>
  <input type="text" id="nama" name="nama" required>
  
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <label for="wa">No. WhatsApp</label>
  <input type="tel" id="wa" name="whatsapp" required>
  
  <label for="budget">Budget Iklan per Bulan</label>
  <select id="budget" name="budget">
    <option value="">-- Pilih Range --</option>
    <option value="<5jt">Di bawah 5 juta</option>
    <option value="5-20jt">5 - 20 juta</option>
    <option value=">20jt">Di atas 20 juta</option>
  </select>
  
  <button type="submit">Kirim</button>
</form>

Ini template form lead generation yang bisa kamu modifikasi untuk berbagai kebutuhan. Perhatikan hidden input di baris pertama yang menyertakan sumber lead.

Chapter berikutnya, kita bahas cara mengatur layout dan tampilan menggunakan <div>, class, dan berkenalan dengan CSS dasar.