27 January 2019
Semakin banyaknya pengguna WhatsApp menjadikan aplikasi tersebut menjadi aplikasi pesan singkat yang wajib dimiliki pengguna smart phone. Anda dapat mengambil kesempatan ini untuk mengirimkan contact form yang diisi pengunjung langsung ke nomor WhatsApp Anda.
Siapkan contact form sesuai keinginan Anda, sebagai contoh saya akan menggunakan template default. Anda dapat melihat bahwa ID contact form yang dihasilkan adalah 105, mungkin akan berbeda dengan ID milik Anda.
Buat halaman/page baru untuk menampilkan contact form diatas. Silahkan beri judul sesuai keinginan. Pada page yang saya buat, url/permalink adalah contact-form-whatsapp
Terakhir, buat snippet baru (silahkan install & aktifkan plugin Code Snippets jika belum), beri nama sesuai keinginan Anda. Berikut code yang perlu Anda isi
Pastikan memilih opsi "Only run on site front-end" sebelum menyimpan dan mengaktifkannya.
Lihat demonya disini. Untuk penggunaan form plugin lain, cek artikelnya disini.
Baca Juga: Contact Form 7 ke Pesan WhatsApp dengan Template Mail
Happy WordPressing 🙂
mantap kak, langsung praktek
Salam gan
Mau tanya, ini data pengisi juga tersimpan? Seandainya si pengisi tidak memencet tombol send di wa.. jadi kita bisa follow up via database yang tersimpan.
.
Sukses selalu
untuk contoh ini data ngga disimpan, karena memang bawaan dari plugin contact form 7. kalo mau data disimpan bisa pakai plugin flamingo (https://wordpress.org/plugins/flamingo/) atau bisa juga coding sendiri https://solusipress.com/menyimpan-data-contact-form-7-pada-custom-table/
Om, kalo pake lebih dari 1 page dengan ID CF7 yang berbeda apakah bisa? bikin snippet baru atau cukup 1 snippet? mohon pencerahannya...
Bisa2 aja sih, selama field-fieldnya sama, cuma harus ada modifikasi di snippet untuk kondisional berikut:
if( $contact_form->id() == 105 || $contact_form->id() == XXX ) {/* untuk membatalkan pengiriman email */if( is_page( 'contact-form-whatsapp' ) || is_page( 'other-page-slug' ) ):kalo saya punya 5 page, "send to wa" ke 5 nomer berbeda tergantung pagenya apa. Apa bisa juga/
Bisa... cuma perlu ada modifikasi di kode-nya. Atau kalau mau lebih mudah bisa pakai plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Halo gan, ini sudah ketemu solusinya atau belum ya?
boleh share modifikasi kodenya jika sudah ketemu? Saya juga mengalami masalah yang sama untuk hal ini.
Tapi slugnya beda beda min ganti ganti gimana?
gan kok saya gak bisa masuk ke api nya ya?
masuk ke api yg mana ya? url whatsapp maksudnya?
pastikan page slug sesuai dengan yg di script
kalau slug page = contact-form-whatsapp, maka
if( is_page( 'contact-form-whatsapp' ) ):Saya cuma muncul notifikasi bahwa user udh ngisi formnya gan, tapi engga nge link ke whatsappnya
Kalau sesuai tutorial harusnya sih ngga masalah, mungkin juga popup window diblock di browsernya.
URL halamannya apa?
Saya pake localhost sih gan, dan sudah terkoneksi internet juga laptop saya
coba di view-source, ada script ini ngga ?
kalo ngga ada berarti ada yg salah di kondisi is_page()
mungkin juga karena popup diblock
tinggal diklik di prefrences, terus allow
solved gan, ternyata error di plugin contact form nya
ini solusinya gimana? apa yang error di contact formnya? karena kejadian yang sama di saya
Sudah ada notifikasi kalau sudah terkirim tapi tidak terbuka ke wa
Salam gan,
Script di atas mengirim ke whatsapp field yang ada di Tab Form.
Bagaimana caranya agar yang dikirim ke whatsapp adalah Message Body dari Tab Mail.
Terimakasih
Mungkin penjelasannya bisa jadi artikel baru, ditunggu aja. Intinya untuk ambil template di tab mail bisa memanfaatkan fungsi get_post_meta( $contact_form_id, '_mail', true ); hanya saja untuk implementasinya jadi sedikit tricky.
gan udah di coba, pake kode ini add_filter( 'wpcf7_skip_mail', 'solusiprss_cf7_send_whatsapp', 10, 2 ); add_filter( 'wpcf7_display_message', 'solusipress_cf_wa_sent_message', 10, 2 ); add_action( 'wp_footer', 'solusipress_cf7_add_script_footer' ); function solusiprss_cf7_send_whatsapp( $skip_mail, $contact_form ) { if( $contact_form->id() == 1290 ) { $skip_mail = true; } return $skip_mail; } function solusipress_cf_wa_sent_message( $message, $status ) { if( $status == 'mail_sent_ok' ) { $message = 'Terima kasih telah mengisi kontak form'; } return $message; } function solusipress_cf7_add_script_footer() { if( is_page( 'Contact form 1' ) ): ?> document.addEventListener( 'wpcf7mailsent', function( event ) { var inputs = event.detail.inputs; var the_text = ''; jQuery.each( inputs, function( index, detail ) { if( the_text… Read more »
bagian ini "if( is_page( 'Contact form 1' ) ):"
harusnya pakai slug dari page, misal contact-form-whatsapp.
atau kalo mau lebih simpel, pasang plugin ini aja https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Saya coba terapkan cara ini di web saya, tapi entah kenapa pesannya nggak terkirim ya? Atau memang karna sudah nggak work ya? terima kasih.
Seharusnya sih work yah... kan ada link demo juga https://businessprofile.solusipress.com/contact-form-whatsapp/
Barusan malah kasusnya beda lagi om, dia bisa sampai klik tombol kirim, habis itu terbuka WA yang dituju, tapi nggak ada isi chat apa-apa. Itu apa yang salahnya kira-kira ya om?
Mungkin di bagian javascriptnya, cek variabel the_text ada isinya atau ngga.
Kalo masih bingung juga coba pake plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Alhamdulillah sudah berhasil pakai cara ini om. Terima kasih atas bantuan dan triknya.
Btw, itu tombol kirimnya kalau nggak salah warna putih, bisa diganti warnanya nggak ya? Soalnya jadi nggak kelihatan tombolnya. Thanks.
Style form sebenernya ikut defaultnya theme yang aktif. Tapi kalo mau diubah style-nya bisa lewat CSS, class untuk tombol: wpcf7-form-control wpcf7-submit.
Bisa juga pake plugin CF7 Style https://cf7style.com/ atau CF7 Material design https://cf7materialdesign.com/
Mas kalo untuk gravityforms gmn? ada tutornya?
Saat ini ngga ada sih, baru contact form 7 & forminator aja. untuk gravityforms mungkin bisa manfaatkan ini https://docs.gravityforms.com/gform_confirmation_loaded/.
Event gform_confirmation_loaded sepertinya equivalent dengan event wpcf7mailsent di cf7
Bang kl untuk file upload gimana ya, saya coba ga bisa .. isian di cf7:
Bukti Transfer (required)
[file* file-01 limit:10485760 filetypes:gif|png|jpg|jpeg]
Sayangnya untuk metode ini belum bisa kirim file.
Atau bisa pakai plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Mau tanya, kalau ternyata kita pasang formnya di side bar, lalu is page nya itu kemana ya?
Mau tanya kalau pakai form yang sama tapi, slugnya seperti ini, web/trip/other-slug nah other-slug nya bisa ganti ganti itu is_pagenya gimana ya ka?
lebih gampang pake plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Bisakah di integrasi dgn Plugin Wp-Affiliasi dari Cafe bisnis?
di Wp-Affiliasi menggunakan Shortcode [sponsor data=telp] untuk memunculkan nomor telp.
Saat dicoba hasilnya:
..../62[sponsor%20data=telp]?text=......
Mohon dibantu... terima kasih
Coba diganti kode ini:
var the_phone = '6281314997198';
dengan kode ini:
Keren banget, akhirnya ketemu juga caranya
mau yg lebih mudah? cek plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp
Maaf mau tanya lagi om.
Saya sudah berhasil pakai trik ini, tapi saya perlu pakai di website saya lebih dari 1 form. Kayaknya nggak bisa kalau digunakan untuk beberapa form ya om? Soalnya kalau 2 script aktif, ketika web dibuka jadi muncul "WordPress › Error
There has been a critical error on your website."
FYI: saya sudah sesuaikan script untuk form pertama dengan yang kedua sesuai dengan kebutuhannya masing-masing.
Sebelumnya terima kasih.
cara diatas memang untuk single instance, untuk multiple instance ( beberapa kontak form di 1 halaman ) bisa pakai plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/ untuk lebih mudahnya.
terima kasih mas, keren sekali tutorialnya
sama2... untuk versi pluginnya bisa cek ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Om, mau tanya, kenapa tidak bisa jalan di firefox ya?
https://solusipress.com/download/contact-form-7-send-to-whatsapp/#comment-290
Alhamdulillah, baru praktek udah bisa. Maaf mas, kalau cf7 nya diganti dengan form bawaan elementor (pro) bagaimana caranya ya mas?
Yang perlu dimodif anipts nya bagian mana aja?
sepertinya harus rombak semua, kecuali baris 44-54
kang kalau pakai everest froms gimana ya ?
saya belum pernah cek sih, coba cari di dokumentasi teknis ada handler (di javascript) yang ditrigger setelah form terkirim ngga?
untuk contact form 7, ada handler wpcf7mailsent.
untuk forminator (https://solusipress.com/mengarahkan-isian-forminator-ke-pesan-whatsapp/) ada handler before:forminator:form:submit & forminator:form:submit:success yang bisa dimanfaatkan.
Om code snippet ini ditambahkan di bagian edit contact form kan? sudah saya tambahkan, tapi kok gak keredirect ke wa ya?a
code-nya ditulis pake plugin code snippets https://wordpress.org/plugins/code-snippets/
Tambahan saya bisa sampai kirim email, sampai ada konfirmasi "Terima kasih telah mengisi kontak form" namun masih tidak terbuka ke WAnya
Apa yang kurang/salah ya?, kalau di view source sudah ada code yang terkait itu.
sebagai tambahan info untukkirim email saya pake wp-smtp dan sendgrid.
Boleh liat hasilnya?
Atau kalo mau praktis bisa pake plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
http://**********.com/*********************/ di sana
ah sudah bisa, ternyata ada yang salah di snippetnya
Terima kasih, tolong komentar saya yang ada linknnya dihapus
Oke
izin nyoba om, btw ini kalau ga ada reaksi ada kesalahan dimana ya om?
kemungkinan besar sih javascript-nya ngga ke-load, pastikan:
if( is_page( 'contact-form-whatsapp' ) ): <-- slug dari page-nya sesuai. misal mau nampilin form di page yg slug-nya "hubungi-kami", maka harus is_page('hubungi-kami').
oh oke ta coba om makasih ya
gan itu snippets nya abis di isi di apain?? cuma di sev aja?? ga harus diapa2 in lagi?? kurang jelas nii... hehe
iya... pastikan memilih opsi "Only run on site front-end" sebelum menyimpan dan mengaktifkannya.
atau download plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/ kalo mau lebih mudah
kak mau tanya code untuk upload gambar bisa? jadi pesan, sekalian dengan gambar
bisa aja sih, cuma ngga sesimple sebelumnya. pake plugin ini aja https://solusipress.com/download/contact-form-7-send-to-whatsapp/ lebih gampang.
Saya menggunakan plugins ini terjadi error tampilan websitenya ka itu knapa ya?
Sedangkn saya perlu untuk penggunaan di beberapa pages dengan nomer wa yg berbeda2
kurang paham juga sih, bisa liat formnya ?
Bisa sih tampilan rusak karna dri plugins cache 🙏🏻
Untuk menghilangkan floating WAnya gimana ya ka? saya liat di demonya bisa ga muncul floating WAnya
ngga perlu setting global form.
pak kalau isi formnya mau ada option, menu, number phone, email itu variable nya apa aja ya?
cek aja isi variabel ini: var inputs = event.detail.inputs;
Halo mas, bisa gak itu ditambahkan kata kata salam pembuka? contohnya klo submit form bakal muncul gini di WA:
Halo selamat pagi, perkenalkan
nama: abcd
Email: blabla@email.com
nomor:1234567890
kalau bisa, caranya gimana ya mas?
Terima kasih
pake plugin ini aja https://solusipress.com/download/contact-form-7-send-to-whatsapp/
Berarti gak perlu pakai snippets lagi dong mas? dan cf7 yang ada harus di uninstall dulu ?
iya ngga perlu snippet, cf7 harus aktif, cf7sendwa itu addon untuk cf7
Selamat pagi mas, kodingannya membuat form 7 nya hanya bisa mengirim ke WA ya? bisa gak itu dibuat kirim ke WA dan Email kita sekaligus? modifikasi dibagian apa ya mas kodingannya?
Terima kasih
baris 2 dikasih comment aja:
//add_filter( 'wpcf7_skip_mail', 'solusiprss_cf7_send_whatsapp', 10, 2 );Baru nemu website ini, kode dan plugin yg diajarin di web ini gratis atau berbayar ya kak?
sebagian besar sih gratis plugin2nya.
kak saya ada kendala di sini;
if( $contact_form->id() == 105 ) {
di contact form 7 saya idnya tidak muncul mungkin karna ada plugins tambahan, kalau selain dengan id apakah bisa kak ?
atau bagaimana cara memunculkan idnya ?
mohon pencerahan kak
pasti ada id-nya sih, coba aja edit filenya, ambil id dari urlnya, misal:
domain(dot)com/wp-admin/admin.php?page=wpcf7&post=12345&action=edit
id-nya adalah: 12345