Cara Membuat Form Wa

				
					<form id="waForm">
  <h3>Formulir Kontak</h3>
  
  <!-- Row 1: Nama Lengkap dan Domisili -->
  <div class="form-row">
    <div class="form-group">
      <label for="name">Nama Lengkap:</label>
      <input type="text" id="name" name="name" placeholder="Nama Anda.." required>
    </div>
    <div class="form-group">
      <label for="domisili">Domisili:</label>
      <input type="text" id="domisili" name="domisili" placeholder="ex : Jakarta Timur" required>
    </div>
  </div>
  
  <!-- Row 2: No Telp dan Email -->
  <div class="form-row">
    <div class="form-group">
      <label for="phone">No Telp:</label>
      <input type="tel" id="phone" name="phone" placeholder="0811 1234 ...." required>
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="email anda" required>
    </div>
  </div>
  
  <!-- Bagian Pesan dan Tombol (Tetap) -->
  <label for="message">Pesan:</label>
  <textarea id="message" name="message" placeholder="Tulis pesan Anda.." required></textarea><br><br>
  
  <button type="submit">Kirim ke WhatsApp</button>
</form>

<!-- Tambahkan CSS ini di dalam file CSS Anda atau di dalam tag <style> -->
<style>
  #waForm {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    max-width: 100%; /* Atur lebar maksimal form */
    margin: auto; /* Posisi di tengah kolom */
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Membagi menjadi 2 kolom sama besar */
    gap: 15px; /* Jarak antar kolom */
    margin-bottom: 15px; /* Jarak antar baris */
  }
  .form-group {
    display: flex;
    flex-direction: column; /* Label di atas input */
  }
  .form-group input, #waForm textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    margin-top: 5px;
  }
#waForm label {
    font-weight: medium;
    margin-bottom: 5px;
    display: block;
  }
  #waForm input, #waForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Agar padding tidak merusak lebar */
  }
  #waForm button {
    width: 100%; /* 3. LEBAR TOMBOL 400PX */
    max-width: 100%; /* Agar tombol tetap aman dan responsif di layar HP */
    padding: 12px;
    background-color: #1EBE5D; /* Hijau WA */
    color: white;
    border: 1px solid transparent; /* Border awal transparan agar tombol tidak bergeser saat hover */0px;
    font-size: 16px;
    cursor: pointer;
    font-weight: normal; /* 3. TEBAL TEKS NORMAL */
    text-transform: capitalize; /* 3. TEKS TIDAK KAPITAL (HURUF KECIL) */
    box-sizing: border-box;
    transition: all 0.3s ease; /* Membuat semua efek transisi hover menjadi halus */
  }
  #waForm button:hover {
    color: #1EBE5D; /* 1. WARNA TEKS TOMBOL SAAT HOVER MENJADI #1EBE5D */
    border-color: #1EBE5D; /* 2. WARNA BORDER TOMBOL SAAT HOVER MENJADI #1EBE5D */
    background-color: #f9f9f9; /* 4. WARNA LATAR TOMBOL SAAT HOVER MENJADI #f9f9f9 */
  }
</style>

<script>
  document.getElementById('waForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Mencegah reload halaman

    // --- PENGATURAN NOMOR WA ---
    var phoneNumber = "6281211710716"; // Pastikan menggunakan kode negara 62

    // --- AMBIL SEMUA INPUT FORM ---
    var name = document.getElementById('name').value;
    var domisili = document.getElementById('domisili').value;
    var phone = document.getElementById('phone').value;
    var email = document.getElementById('email').value;
    var message = document.getElementById('message').value;

    // --- RANGKAI PESAN DENGAN FORMAT BARIS BARU (\n) ---
    var textPesan = "Halo Admin, ada pesan baru dari website:\n\n" +
                    "*Nama:* " + name + "\n" +
                    "*Domisili:* " + domisili + "\n" +
                    "*No Telp:* " + phone + "\n" +
                    "*Email:* " + email + "\n" +
                    "*Pesan:* " + message;

    // Encode pesan agar karakter khusus & ganti baris (enter) terbaca oleh URL WA
    var encodedText = encodeURIComponent(textPesan);

    // Buat link WhatsApp
    var waLink = "https://wa.me/" + phoneNumber + "?text=" + encodedText;

    // Buka link di tab baru
    window.open(waLink, '_blank');
  });
</script>