Membangun Form Kontak Super dengan Integrasi WhatsApp dan Email: Tutorial Lengkap PHP Modern
29 Oktober 2024 || 16:18:03 WIB || ClassyID
Form Kontak Modern dengan Notifikasi WhatsApp & Email
Form kontak sederhana namun powerful dengan notifikasi ke WhatsApp dan Email. Perfect untuk website bisnis Anda!
## Apa yang Bisa Dilakukan?
Form ini memiliki 3 fungsi utama:
1. Menyimpan data kontak ke file teks
2. Mengirim notifikasi ke WhatsApp
3. Mengirim email notifikasi
## Cara Kerja
### Input Form:
- Nama Lengkap
- Nomor HP
- Alamat Email
### Proses Otomatis:
1. Data tersimpan ke file teks
2. Notifikasi masuk ke WhatsApp admin
3. Email notifikasi terkirim ke admin
## Teknologi yang Dipakai
- PHP untuk backend
- jQuery AJAX untuk pengiriman form
- CSS modern untuk tampilan
- WhatsApp Gateway API
- SMTP Gmail untuk email
## WhatsApp Gateway
Menggunakan API dari Mpedia:
```
Endpoint: https://mpedia/send-message
Method: POST
API Key: Sudah disediakan
```
Notifikasi WA langsung masuk ke nomor admin yang sudah diatur!
## Email SMTP
Menggunakan Gmail SMTP:
- Server: smtp.gmail.com
- Port: 587
- Keamanan: TLS
- Perlu App Password Google
## Tampilan & UX
- Responsive di semua device
- Warna dasar: abu-abu, biru, hijau
- Loading animation
- Pesan sukses/error yang jelas
- Auto-clear form setelah submit
## Keunggulan
1. **Simple tapi Powerful**
- Setup mudah
- Kode rapi
- Performa ringan
2. **Notifikasi Real-time**
- Langsung ke WA
- Masuk ke email
- Data tersimpan lokal
3. **Customizable**
- Warna bisa disesuaikan
- Teks bisa diubah
- Logika bisa dimodifikasi
## Mulai Pakai
1. Upload semua file ke hosting
2. Install PHPMailer:
```bash
composer require phpmailer/phpmailer
```
3. Setting config.php:
- API Key WA
- Email Gmail
- Nomor admin
Done! Form siap digunakan!
## Use Case
Perfect untuk:
- Website Bisnis
- Landing Page
- Portfolio
- Company Profile
- Sistem Informasi
## Tips
1. **Email**
- Gunakan App Password Gmail
- Test kirim email dulu
- Cek spam folder
2. **WhatsApp**
- Pastikan nomor aktif
- Format pesan bisa custom
- Test API dulu
3. **Security**
- Validasi input
- Limit submission
- Backup data berkala
## Support
Butuh bantuan? Kontak kami:
- Email: [email protected]
- WA: 081241314446