Tutorial Cara Membuat Form di WordPress Whatsapp Google Sheet

Ada pertanyaan, Mau tanya, kalo mau bikin form dengan select dropdown tapi bisa di random atau dipilih secara acak dan hasil formulir itu bisa dikirim ke whatsapp dan google sheet itu bagaimana ya?

Tutorial Cara Membuat Form di WordPress Whatsapp Google Sheet

Untuk membuat form dengan select dropdown yang dapat dipilih secara acak dan mengirim hasil formulir ke WhatsApp serta Google Sheet, Anda perlu menggabungkan beberapa teknologi dan API. Saya akan memberikan contoh kode dan penjelasan singkat untuk setiap langkah.

[warning]Kode dibawah ini belum dicoba pada live website[/warning]

1. Membuat Form dengan Select Dropdown di WordPress

Pertama, Anda perlu membuat form dengan select dropdown di WordPress. Anda dapat menggunakan HTML untuk membuat form dan menambahkan opsi secara acak menggunakan JavaScript.

HTML (ditaruh di dalam theme atau plugin):

<form id="mm_form">
    <select id="mm_dropdown" name="pilihan">
        <!-- Opsi akan diisi menggunakan JavaScript -->
    </select>
    <button type="submit">Kirim</button>
</form>

JavaScript (gunakan enqueue script di WordPress):

document.addEventListener('DOMContentLoaded', function() {
    var mmOpsis = ['Opsi 1', 'Opsi 2', 'Opsi 3']; // Tambahkan opsi di sini
    var mmSelect = document.getElementById('mm_dropdown');

    mmOpsis.sort(function() { return 0.5 - Math.random(); }); // Mengacak opsi
    mmOpsis.forEach(function(mmOpsi) {
        var mmEl = document.createElement('option');
        mmEl.textContent = mmOpsi;
        mmEl.value = mmOpsi;
        mmSelect.appendChild(mmEl);
    });
});

2. Mengirim Hasil Formulir ke WhatsApp

Untuk mengirim data ke WhatsApp, Anda dapat menggunakan URL API WhatsApp. Anda perlu menangkap event submit form dan mengirim data menggunakan window.open atau serupa.

JavaScript untuk Mengirim ke WhatsApp:

document.getElementById('mm_form').addEventListener('submit', function(e) {
    e.preventDefault();
    var mmPilihan = document.getElementById('mm_dropdown').value;
    var mmWaUrl = 'https://api.whatsapp.com/send?phone=[NOMOR_TUJUAN]&text=' + encodeURIComponent('Pilihan: ' + mmPilihan);
    window.open(mmWaUrl, '_blank');
});

3. Mengirim Hasil Formulir ke Google Sheets

Untuk mengirim data ke Google Sheets, Anda bisa menggunakan Google Apps Script. Buat Google Sheets dan script untuk menerima data POST. Kemudian, gunakan AJAX untuk mengirim data dari form ke Google Script.

Google Apps Script:

Buka Google Sheets, klik Extensions > Apps Script.

Buat script untuk menerima data POST dan simpan di sheet.

JavaScript untuk Mengirim ke Google Sheets:

document.getElementById('mm_form').addEventListener('submit', function(e) {
    e.preventDefault();
    var mmPilihan = document.getElementById('mm_dropdown').value;

    fetch('[URL_GOOGLE_APPS_SCRIPT]', {
        method: 'POST',
        body: JSON.stringify({pilihan: mmPilihan}),
        headers: new Headers({'Content-Type': 'application/json'})
    });

    // Kode untuk mengirim ke WhatsApp (dari langkah 2)
});

Catatan Penting:

1. Pastikan Anda mematuhi kebijakan privasi dan persetujuan pengguna saat mengumpulkan dan mengirim data.
2. Ganti [NOMOR_TUJUAN] dengan nomor WhatsApp tujuan dan [URL_GOOGLE_APPS_SCRIPT] dengan URL dari Google Apps Script yang Anda buat.
3. Implementasi ini membutuhkan pemahaman dasar tentang JavaScript, AJAX, dan Google Apps Script.
4. Jangan lupa menambahkan vendor prefix untuk CSS jika diperlukan dan sesuai standar yang Anda gunakan.

• Penulis: Elda
• Kategori: Web Design
• Tag: Code Snippet, Data, Google, Manajemen, PHP, Tutorial, VSCode, Web Hosting, Wordpress
• Tanggal: Published on January 30, 2024