Yuk Buat Website Harga Mulai Rp800.000 saja! Klik Disini Sekarang

Harga mulai Rp800.000 saja! Chat Disini

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.
X
Promo Buat Website cuma Rp800.000,- Saja! Yuk Chat Disini
B Here
X
X

Skill

Skill dan tools yang bisa kami gunakan dan atau yang kami familiar dengannya untuk membantu proses web design, SEO dan digital marketing untuk para customer.
  • All
  • Web Design
  • Digital Marketing
  • Research
  • SEO
  • Wordpress
  • Other
  • 2captcha
  • ACF
  • AIO
  • AWS
  • Accuranker
  • Adobe XD
  • Advanced Script
  • Ahrefs
  • Any Indexer
  • Backlinks.com
  • Beaver Builder
  • Bootstrap
  • Bricks builder
  • CWP
  • Captcha Breaker
  • Carbon Fields
  • ChatGPT
  • Chrome
  • Cloudflare
  • Cloudfront
  • Codepen
  • Content Generator
  • Copilot
  • Cyberduck
  • Cyberpanel
  • DIVI
  • Death By Captcha
  • DirectAdmin
  • Eagle
  • EasyEngine
  • Edge
  • Electron
  • Elementor
  • Fiddler
  • Figma
  • Filezila
  • Firefox
  • Flexbox
  • Flickity
  • GSA SER
  • GSAP
  • Git
  • GitHub
  • Google Ads
  • Google Ads MCC
  • Google Adsense
  • Google Analytics
  • Google Chrome Extension
  • Google DNS
  • Google Data Studio
  • Google Search Console
  • Google Tag Manager
  • Grid
  • Image converter
  • InterWorx
  • Isotop
  • Joomla!
  • Kontraz
  • Laragon
  • Laravel
  • Lightstail
  • Linode
  • Majestic SEO
  • Moz
  • NodeJs
  • Notepad++
  • Oxygen builder
  • PHP
  • Photoshop
  • Piwix
  • Platform Identifier
  • Plesk
  • Powertoys
  • Proxy Scrapper
  • Putty
  • ReactJs
  • Recoda
  • Responsiveapp
  • S3
  • SEO Indexer
  • Scrapebox
  • Script Organizer
  • SenuXe
  • Solid SEO VPS
  • StormProxy
  • Sublime Text 3
  • Tailwind
  • URL Redirect Pro
  • Ubbersugest
  • Ubot studio
  • VSCode
  • Vanilla JS
  • Vultr
  • WAMPP
  • WHM cPanel
  • Weebly
  • WinSCP
  • Woocommerce
  • Wordpress
  • Wpcodebox
  • XAMPP
  • XnConvert
  • Yoast
  • Zion builder
  • jQuery
  • js/css libraries