Cara Menggunakan Webhooks dengan Formulir WordPress

Apakah Anda ingin mengintegrasikan formulir WordPress Anda dengan berbagai aplikasi dan layanan web?

Jika Anda memerlukan cara sederhana untuk mengirim data pada aplikasi web langsung dari formulir WordPress Anda, webhook adalah solusi yang tepat. Dengan formulir webhook, Anda tidak perlu mengambil bantuan konektor pihak ketiga seperti Zapier.

Dalam posting ini, kami akan menunjukkan cara menggunakan webhook di formulir WordPress Anda sehingga Anda dapat dengan mudah mengirim data waktu nyata ke aplikasi dan layanan favorit Anda.

Tetapi pertama-tama, jika Anda seorang pemula, kami akan membahas apa itu webhook dan mengapa itu penting. Ingatlah bahwa metode yang akan kita gunakan hari ini tidak mengharuskan Anda memiliki keterampilan pengkodean apa pun.

Apa itu Webhook?

Webhook memungkinkan dua aplikasi web untuk berkomunikasi satu sama lain. Jadi misalnya, jika seseorang mengirimkan formulir pesanan pembelian di situs web Anda, Anda dapat mengirim data itu ke saluran Slack Anda untuk memperbarui tim produk Anda bahwa pesanan telah dilakukan. Anda dapat melakukan ini ketika Anda mendapatkan prospek atau pelanggan baru juga.

Dalam istilah teknis, webhook adalah panggilan balik HTTP yang ditentukan pengguna yang dipicu oleh peristiwa di sistem sumber dan dikirim ke sistem tujuan.

Ini berarti ketika suatu peristiwa atau pemicu terjadi di situs web Anda, pesan otomatis dikirim ke layanan yang terhubung. Pemicu dapat berupa komentar blog, pendaftaran pengguna pembelian produk, dan pengiriman formulir.

Jika Anda bertanya-tanya mengapa Anda harus menggunakan webhook, berikut adalah beberapa manfaatnya:

• Mentransfer informasi antara dua layanan/aplikasi secara otomatis
• Mengotomatiskan tugas dan memangkas waktu admin
• Kurangi biaya penggunaan layanan konektor seperti Zapier dan Hubspot untuk memproses data dalam aplikasi.

Webhook sangat berguna bagi pengembang dan pengguna WordPress yang paham teknologi.

Dengan itu, mari kita mulai panduan langkah demi langkah tentang cara membuat formulir webhook di WordPress.

Membuat Formulir Webhook di WordPress [Metode Mudah]

Ada banyak cara Anda dapat menggunakan webhook untuk mengirim kiriman formulir WordPress Anda ke aplikasi web lain.

Kami akan menggunakan WPForms untuk tutorial ini karena menawarkan Addon Webhooks yang mudah digunakan siapa saja, termasuk pemula. Sama sekali tidak ada pengkodean yang terlibat.

WPForms adalah plugin pembuat formulir terbaik untuk situs WordPress. Dan yang perlu Anda ketahui adalah ia menawarkan banyak sekali templat dan bidang formulir siap pakai yang memungkinkan Anda membuat semua jenis formulir WordPress. Ini termasuk pemesanan produk, pendaftaran, pemesanan janji temu, formulir kontak sederhana, dan banyak lagi.

WPForms hadir dengan pembuat formulir seret dan lepas yang membuat penyesuaian bentuk menjadi mudah. Ini memiliki banyak tambahan dan integrasi yang dapat Anda gunakan untuk terhubung ke email, pembayaran, dan aplikasi pemasaran.

Dengan Addon Webhooks, Anda dapat dengan mudah menghubungkan WordPress Anda dengan layanan atau aplikasi apa pun. Yang diperlukan hanyalah beberapa klik untuk mengaktifkan fungsi ini.

Selain itu, WPForms memungkinkan Anda menggunakan aturan bersyarat untuk memicu tindakan webhook berdasarkan respons formulir pengguna. Jadi hanya jika nilai bidang terpenuhi, maka webhook akan berjalan. Ini memberi Anda kontrol lebih besar atas data apa yang ingin Anda kirim dan ke aplikasi mana.

Anda dapat terhubung ke banyak aplikasi dan layanan. Untuk tutorial ini, kami akan menunjukkan cara menghubungkan ke Slack. Namun ingat, Anda juga dapat menggunakan langkah yang sama untuk terhubung ke aplikasi dan titik akhir lainnya.

Langkah 1: Buat Aplikasi Slack Baru

Dengan menghubungkan formulir webhook Anda ke Slack, Anda dapat secara otomatis mengirim pesan dan informasi dari situs web Anda ke saluran Slack Anda. Anda dapat memperbarui anggota tim atau departemen Anda saat seseorang mengirimkan formulir, mengabaikan formulir, dan lainnya.

Sekarang untuk mengirim data dari WordPress ke layanan lain menggunakan webhook, Anda harus membuat jembatan antara kedua aplikasi. Jadi untuk terhubung ke Slack, Anda harus membuat aplikasi Slack (jembatan).

Jika Anda baru dalam hal ini, jangan khawatir, ini cukup mudah dan kami akan memandu Anda langkah demi langkah. Pertama, Anda harus membuka halaman Slack API dan mengklik tombol Create an App .

Di jendela sembulan berikutnya, Anda dapat memilih bagaimana Anda ingin membuat aplikasi dengan Slack. Ada dua opsi:

• Dari awal
• Dari manifes aplikasi.

Di sini, kita akan membuat aplikasi Slack dari awal. Kedengarannya seperti banyak pekerjaan tetapi itu benar-benar hanya membutuhkan beberapa klik.

Kemudian, Anda akan melihat sembulan tempat Anda dapat menambahkan nama aplikasi dan memilih tempat kerja Slack Anda. Setelah selesai, klik Buat Aplikasi .

Ini akan membuka halaman Informasi Dasar. Di sini, Anda perlu mengklik opsi Webhook Masuk .

Di layar berikutnya, aktifkan pengaturan Activate Incoming Webhooks . Ini memungkinkan Anda memposting pesan di Slack dari layanan eksternal.

Setelah diaktifkan, Anda akan melihat bagian URL Webhooks untuk Ruang Kerja Anda di halaman.

Sekarang, Anda perlu membuat webhook baru untuk mendapatkan informasi dari formulir WordPress Anda. Jadi, klik tombol Add New Webhook to Workspace .

Selanjutnya, Anda dapat melihat sembulan tempat Anda dapat memilih saluran Slack untuk memposting pengiriman formulir Anda.

Setelah memilih saluran Slack, klik Izinkan .

Sekarang, Anda dapat melihat URL webhook baru untuk aplikasi Slack Anda.

Yang harus Anda lakukan sekarang adalah menyalin URL Webhook. Anda akan membutuhkannya beberapa langkah kemudian.

Langkah 2: Instal dan Aktifkan WPForms

Setelah Anda memiliki URL webhook, Anda dapat menambahkannya ke formulir WordPress Anda.

Untuk memulai, daftar akun di situs web WPForms.

Ada versi gratis dari plugin tetapi Anda memerlukan versi premium untuk mengakses fitur formulir lanjutan seperti webhook. WPForms hadir dengan jaminan uang kembali 100% bebas risiko sehingga Anda dapat mencoba layanan ini sebelum membuat komitmen.

Setelah mendaftar, Anda akan menemukan file unduhan plugin dan kunci lisensi di tab Unduhan .

Sekarang, buka dasbor WordPress Anda dan instal plugin. Jika Anda ingin lebih detail, Anda dapat memeriksa panduan kami tentang cara menginstal plugin WordPress.

Setelah Anda menginstal dan mengaktifkan WPForms di situs Anda, Anda harus memasukkan kunci lisensi Anda untuk menikmati semua fitur dan add-on premium Anda.

Sebelum Anda mulai membuat formulir, Anda perlu menginstal Addon Webhooks.

Untuk ini, buka tab WPForms »Addons dan Anda akan menemukan banyak add-on yang membantu Anda memperluas fungsionalitas formulir WordPress Anda. Di sini, klik tombol Instal Addon untuk Webhooks Addon.

Sekarang, Anda siap membuat formulir webhook di WordPress.

Langkah 3: Buat Formulir Webhook

Untuk membuat formulir baru, buka halaman WPForms »Tambah Baru di mana Anda akan melihat daftar templat yang dibuat sebelumnya. Templat ini sudah diisi sebelumnya dengan bidang yang Anda perlukan berdasarkan tujuan formulir Anda. Pustaka template mencakup:

• Formulir Kontak Sederhana
• Minta Formulir Penawaran
• Formulir Donasi
• Formulir Penagihan/Pemesanan
• Formulir Survei
• Formulir Saran

…dan banyak lagi! Untuk tutorial ini, kami akan memilih template Formulir Saran karena kami telah membuat aplikasi Slack untuk umpan balik pengguna pada langkah sebelumnya. Jangan ragu untuk memilih salah satu yang paling sesuai dengan kebutuhan Anda.

Yang harus Anda lakukan adalah memberi nama formulir Anda di bagian atas halaman. Kemudian pilih template apa saja tergantung kebutuhan Anda atau Anda bisa memilih template kosong untuk memulai dari awal.

Setelah memilih template, Anda akan melihat pembuat formulir seret dan lepas di jendela berikutnya.

Jika Anda ingin menambahkan lebih banyak bidang, cukup seret dan lepas bidang baru dari menu kiri ke pratinjau formulir.

WPForms menawarkan banyak opsi penyesuaian sehingga Anda dapat mengklik bidang apa pun untuk mengeditnya. Ini memungkinkan Anda mengubah nama bidang, deskripsi, dan pengaturan lebih lanjut.

Setelah Anda selesai menambahkan bidang formulir Anda, klik tombol Simpan .

Pada langkah berikutnya, kita akan mempelajari cara menyiapkan webhook untuk formulir ini dan menghubungkan aplikasi Slack Anda.

Langkah 4: Siapkan Webhook untuk Slack

Agar webhook berfungsi di formulir Anda, Anda perlu menavigasi ke tab Pengaturan »Webhooks dan klik opsi Aktifkan Webhooks .

Webhook baru akan dibuat yang dapat Anda edit untuk menyiapkan integrasi Slack Anda.

Pertama, Anda dapat mengubah nama webhook. Ini akan membantu Anda mengenalinya nanti.

Sekarang ingat URL Webhook yang Anda salin dari aplikasi Slack Anda di Langkah 1? Anda harus menempelkannya di sini di opsi URL Permintaan . Ini akan memungkinkan Anda menghubungkan formulir WordPress Anda dengan layanan lain seperti Slack.

Setelah ini, Anda akan melihat berbagai pengaturan untuk menyiapkan webhook Anda. Kita akan membahas apa yang dilakukan masing-masing dan apa yang harus ditambahkan ke bidang ini di sini.

• Metode Permintaan: Ini memungkinkan Anda memilih jenis koneksi yang ingin Anda buat dengan layanan terhubung Anda. Ada banyak jenis metode HTTP yang dapat Anda gunakan berdasarkan jenis koneksi yang ingin Anda buat:
  • DAPATKAN : Ini akan mendapatkan data dari formulir yang dikirimkan dan mengirimkan detailnya ke aplikasi yang terhubung.
  • POST : Ini akan mengirim data ke layanan sekunder. Kami akan menggunakan permintaan HTTP POST karena kami perlu memposting data dari formulir Anda ke saluran Slack Anda.
  • PUT : Ini memungkinkan Anda memperbarui data saat webhook Anda berjalan.
  • PATCH : Ini memungkinkan Anda mengganti data saat webhook Anda berjalan.
  • DELETE : Ini memungkinkan Anda untuk menghapus informasi saat webhook khusus ini berjalan.
• Format Permintaan: Opsi ini akan menunjukkan kepada server jenis konten yang Anda kirim. Ini sedikit teknis tetapi pada dasarnya, ada dua jenis format permintaan yang tersedia:
  • JSON : Memformat data Anda dalam format application/json dan akan menyetel tipe konten sebagai charset=utf-8 .
  • FORM : Memformat data Anda dalam format application/x-www-form-urlencoded , dan akan menyetel tipe konten sebagai charset=utf-8 .
• Rahasia: Jika Anda seorang pengembang dan ingin mengintegrasikan API Anda sendiri untuk autentikasi, maka Anda dapat menggunakan kunci rahasia. Tapi untuk tutorial kita, kita tidak membutuhkan opsi ini jadi kita biarkan kosong.
• Header Permintaan: Ini mengirimkan nilai tertentu saat permintaan dikirim ke aplikasi. Saat webhook berjalan, bidang akan dibuat secara otomatis. Kami akan membiarkan bidang ini kosong juga.
• Isi Permintaan: Untuk opsi ini, Anda perlu mengatur jenis pesan dan memilih bidang untuk mengirim pesan. Karena pengguna akan memasukkan saran dalam format teks, kami akan menyetel Kunci ke Teks . Kemudian, pilih bidang di mana pengguna akan memasukkan pesan mereka.

Setelah Anda selesai dengan pengaturan permintaan webhook, klik tombol Simpan .

Langkah 5: Siapkan Pemberitahuan Formulir

Selanjutnya, Anda dapat mengatur pemberitahuan email untuk formulir WordPress. Ini memungkinkan Anda mengirim email otomatis ke admin, anggota tim mana pun, dan pelanggan/pengguna setelah mereka mengirimkan formulir.

Untuk mengatur alur kerja email ini, buka tab Pengaturan »Pemberitahuan , centang opsi Aktifkan Pemberitahuan untuk melihat pengaturan default.

Di sini, Anda dapat menyesuaikan pengaturan notifikasi dan menambahkan alamat email penerima.

WPForms juga memungkinkan Anda mengirim pemberitahuan email otomatis ke pengguna formulir juga. Untuk mengatur ini, klik tombol Tambahkan Pemberitahuan Baru di sudut kanan atas halaman.

Kemudian, Anda perlu menggunakan opsi Tampilkan Tag Cerdas dan pilih Email . Dengan tag ini, WPForms akan secara otomatis mendeteksi alamat email yang dimasukkan oleh pengguna di formulir.

Di bagian Pesan Email , Anda dapat menambahkan pesan khusus dan menggunakan tag pintar {all_fields} untuk menampilkan semua data formulir yang dimasukkan pengguna.

Jangan lupa untuk menyimpan pengaturan Anda di akhir.

Langkah 6: Sesuaikan Pesan Konfirmasi

WPForms juga memungkinkan Anda menampilkan pesan konfirmasi di bagian depan situs Anda setelah pengguna berhasil mengirimkan formulir.

Di tab Pengaturan »Konfirmasi , Anda akan melihat pengaturan konfirmasi. Secara default, Jenis Konfirmasi diatur ke 'Pesan' tetapi ada 3 opsi dalam menu ini:

• Pesan: Tambahkan pesan konfirmasi yang ditampilkan di frontend setelah pelanggan mengirimkan pesanan mereka.
• Tampilkan Halaman: Arahkan ulang pengguna Anda ke halaman mana pun di situs Anda.
• Pergi ke URL (Redirect): Mengirim pengguna ke URL tertentu.

Untuk mempelajari lebih lanjut tentang ini, Anda dapat memeriksa panduan kami tentang cara mengatur pemberitahuan formulir dan konfirmasi dengan cara yang benar.

Setelah Anda selesai dengan pengaturan, klik tombol Simpan .

Kami juga harus menyebutkan di sini bahwa WPForms memungkinkan Anda berintegrasi dengan layanan email pilihan Anda seperti Kontak Konstan dan Mailchimp.

Anda hanya perlu mengakses ini di bawah tab Pemasaran dan ikuti petunjuk di layar untuk menghubungkan akun email Anda. Dalam kebanyakan kasus, Anda harus memberikan kunci API yang dapat Anda buat dengan penyedia email.

Jika Anda juga ingin menghubungkan formulir online ke gateway pembayaran, Anda dapat mempelajarinya di sini: Cara Membuat Formulir Pemesanan Online

Yang perlu Anda lakukan sekarang adalah mempublikasikan formulir webhook Anda di situs WordPress Anda.

Langkah 7: Publikasikan Formulir Webhooks di Situs Anda

Untuk mulai mengirim pengiriman formulir ke layanan eksternal, Anda harus menerbitkan formulir webhook terlebih dahulu. Dengan blok kustom WPForms, Anda dapat menambahkan formulir Anda ke halaman atau posting mana pun di situs WordPress Anda.

Untuk tutorial ini, kami akan menambahkan formulir ke halaman baru di situs kami. Jadi navigasikan ke Halaman »Tambahkan tab Baru di panel admin WP Anda. Di layar editor blok, tambahkan blok baru dan cari 'WPForms'.

Saat Anda menambahkan blok WPForms ke halaman Anda, Anda akan melihat menu tarik-turun yang memungkinkan Anda memilih formulir webhook yang baru saja Anda buat.

Kemudian, Anda dapat mempublikasikan halaman Anda di situs Anda.

Jika Anda menggunakan editor klasik WordPress, Anda dapat menambahkan formulir menggunakan tombol Tambahkan Formulir di editor.

Anda bahkan dapat menyisipkan formulir webhook Anda di area yang siap widget seperti footer atau sidebar. Untuk melakukan ini, buka tab Appearance »Widgets dan drag and drop widget WPForms ke menu sidebar atau footer di sebelah kanan.

Kemudian, Anda dapat memilih formulir yang Anda buat dari menu tarik-turun dan menyimpan perubahan Anda.

Sekarang formulir webhook Anda dipublikasikan di situs Anda. Saat pengguna mengisi dan mengirimkan formulir, Anda akan menerima pemberitahuan Slack dari situs web Anda.

Seperti ini, Anda dapat menggunakan WPForms untuk terhubung ke berbagai aplikasi menggunakan URL webhook. Anda mendapatkan kontrol penuh atas data yang ingin Anda ambil dan kirim ke aplikasi lain.

Itu saja! Kami harap posting ini membantu Anda mempelajari cara menggunakan Webhooks di formulir WordPress Anda. Dengan WPForms, Anda dapat membuat formulir webhook dan terhubung dengan layanan pihak ketiga dengan mudah.

Anda juga dapat menggunakannya untuk membuat formulir WordPress profesional lainnya seperti formulir pemesanan, formulir pemesanan, formulir pendaftaran, dan banyak lagi.

Untuk langkah selanjutnya, Anda dapat memeriksa sumber daya berikut:

• Cara Menambahkan Opsi 'Simpan dan Lanjutkan Nanti' ke Formulir WordPress
• Cara Mengurangi Pengabaian Formulir dan Meningkatkan Konversi
• Alat Penangkap Email & Pembuat Formulir Terbaik untuk WordPress

Posting ini akan membantu Anda menambahkan fungsi simpan dan lanjutkan nanti di formulir WordPress Anda dan mengurangi tingkat pengabaian formulir. Yang terakhir akan membantu Anda mengembangkan daftar pemasaran email Anda.