Tutorial Cara Membuat Form di WordPress Whatsapp Google Sheet
![](https://budiharyono.id/wp-content/uploads/2024/01/Google-Spreadsheet-Editor-Spreadsheet-Online-Google-Workspace.webp)
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:
- Pastikan Anda mematuhi kebijakan privasi dan persetujuan pengguna saat mengumpulkan dan mengirim data.
- Ganti [NOMOR_TUJUAN] dengan nomor WhatsApp tujuan dan [URL_GOOGLE_APPS_SCRIPT] dengan URL dari Google Apps Script yang Anda buat.
- Implementasi ini membutuhkan pemahaman dasar tentang JavaScript, AJAX, dan Google Apps Script.
- Jangan lupa menambahkan vendor prefix untuk CSS jika diperlukan dan sesuai standar yang Anda gunakan.
Related Posts
- Apa Itu Custom Content Type (CCT) dan Custom Post Type (CPT)
- Tutorial Header WordPress: Pengertian, Fungsi, dan Contoh
- Pengertian Sistem Templating Pada WordPress Berikut Contohnya
- Pengantar ke File Functions.php dalam Tema WordPress
- Tutorial Pengertian Dari Hook pada WordPress
- Pengertian Function Pada WordPress
- Penjelasan Tentang Tema WordPress: Tipe, Bahasa yang Digunakan, dan Cara Membuatnya
- Fungsi Author.php pada WordPress: Pusat Kontrol Profil Penulis
- Minifikasi HTML PHP Pada WordPress
- Tutorial Cara Ganti Login URL Pada Permintaan Reset Password
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