Web kancaları WordPress Formlarıyla Nasıl Kullanılır?

Yayınlanan: 2022-03-14
how to create webhook form in wordpress

WordPress formlarınızı farklı web uygulamaları ve hizmetleriyle entegre etmek ister misiniz?

Doğrudan WordPress formunuzdan bir web uygulamasına veri göndermenin basit bir yoluna ihtiyacınız varsa, web kancaları mükemmel bir çözümdür. Bir web kancası formuyla, Zapier gibi bir üçüncü taraf bağlayıcının yardımını almanıza gerek yoktur.

Bu gönderide, favori uygulamalarınıza ve hizmetlerinize gerçek zamanlı verileri kolayca gönderebilmeniz için WordPress formlarınızda web kancalarını nasıl kullanacağınızı göstereceğiz.

Ama önce, yeni başlayan biriyseniz, web kancalarının ne olduğunu ve neden önemli olduklarını ele alacağız. Bugün kullanacağımız yöntemin herhangi bir kodlama becerisine sahip olmanızı gerektirmediğini unutmayın.

Web kancaları nedir?

Web kancaları, iki web uygulamasının birbiriyle iletişim kurmasını sağlar. Örneğin, birisi web sitenize bir satın alma siparişi formu gönderirse, ürün ekibinizi bir siparişin verildiğini güncellemek için bu verileri Slack kanalınıza gönderebilirsiniz. Bunu yeni bir müşteri adayı veya abone aldığınızda da yapabilirsiniz.

Teknik terimlerle, web kancaları, bir kaynak sistemdeki bir olay tarafından tetiklenen ve hedef sisteme gönderilen kullanıcı tanımlı HTTP geri aramalarıdır.

Bu, web sitenizde bir olay veya tetikleyici gerçekleştiğinde, bağlı bir hizmete otomatik mesajlar gönderildiği anlamına gelir. Tetikleyici, blog yorumları, ürün satın alma kullanıcı kayıtları ve form gönderimleri gibi herhangi bir şey olabilir.

Web kancalarını neden kullanmanız gerektiğini merak ediyorsanız, işte bazı avantajlar:

  • Bilgileri iki hizmet/uygulama arasında otomatik olarak aktarın
  • Görevleri otomatikleştirin ve yönetici zamanını kısaltın
  • Uygulamalardaki verileri işlemek için Zapier ve Hubspot gibi bağlayıcı hizmetlerini kullanma maliyetini azaltın.

Web kancaları, geliştiriciler ve teknoloji konusunda bilgili WordPress kullanıcıları için inanılmaz derecede faydalıdır.

Bununla, WordPress'te bir web kancası formunun nasıl oluşturulacağına ilişkin adım adım kılavuzumuza başlayalım.

WordPress'te Webhook Formu Oluşturma [Kolay Yöntem]

WordPress form gönderimlerinizi diğer web uygulamalarına göndermek için web kancalarını kullanmanın birçok yolu vardır.

Yeni başlayanlar da dahil olmak üzere herkesin kullanması kolay bir Webhooks Eklentisi sunduğu için bu eğitim için WPForms kullanacağız. Kesinlikle kodlama yoktur.

WPForms

WPForms, WordPress siteleri için en iyi form oluşturucu eklentisidir. Ve bilmeniz gereken şey, her tür WordPress formunu oluşturmanıza izin veren tonlarca hazır şablon ve kullanıma hazır form alanı sunmasıdır. Buna ürün siparişi, kayıt, randevu rezervasyonu, basit iletişim formları ve daha fazlası dahildir.

WPForms, formları özelleştirmeyi çok kolay hale getiren bir sürükle ve bırak form oluşturucu ile birlikte gelir. E-posta, ödeme ve pazarlama uygulamalarına bağlanmak için kullanabileceğiniz tonlarca eklenti ve entegrasyona sahiptir.

Webhooks Eklentisi ile WordPress'inizi herhangi bir hizmet veya uygulamaya kolayca bağlayabilirsiniz. Bu işlevi etkinleştirmek için tek yapmanız gereken birkaç tıklama.

Ayrıca, WPForms, kullanıcının form yanıtına dayalı olarak bir web kancası eylemini tetiklemek için koşullu kurallar kullanmanıza olanak tanır. Bu nedenle, yalnızca bir alanın değeri karşılanırsa, web kancası çalışır. Bu, hangi verileri ve hangi uygulamaya göndermek istediğiniz konusunda size daha fazla kontrol sağlar.

Tonlarca uygulama ve hizmete bağlanabilirsiniz. Bu eğitimde size Slack'e nasıl bağlanacağınızı göstereceğiz. Ancak aynı adımları diğer uygulamalara ve uç noktalara bağlanmak için de kullanabileceğinizi unutmayın.

1. Adım: Yeni Bir Slack Uygulaması Oluşturun

Webhook formunuzu Slack'e bağlayarak web sitenizden Slack kanallarınıza otomatik olarak mesaj ve bilgi gönderebilirsiniz. Bir kişi bir form gönderdiğinde, bir formu terk ettiğinde ve daha fazlasını yaptığında ekip üyelerinizi veya departmanlarınızı güncelleyebilirsiniz.

Şimdi web kancalarını kullanarak WordPress'ten başka bir hizmete veri göndermek için iki uygulama arasında bir köprü oluşturmanız gerekecek. Slack'e bağlanmak için bir Slack uygulaması (köprü) oluşturmanız gerekir.

Bu konuda yeniyseniz endişelenmeyin, oldukça kolay ve size adım adım yol göstereceğiz. İlk olarak, Slack API sayfasını açmanız ve Bir Uygulama Oluştur düğmesine tıklamanız gerekir.

create-a-new-slack-app

Bir sonraki açılır pencerede, Slack ile nasıl bir uygulama oluşturmak istediğinizi seçebilirsiniz. İki seçenek var:

  • sıfırdan
  • Bir uygulama bildiriminden.

Burada sıfırdan bir Slack uygulaması oluşturacağız. Kulağa çok iş gibi geliyor ama gerçekten sadece birkaç tıklama alıyor.

create an app from scratch

Ardından, uygulamanın adını ekleyebileceğiniz ve Slack çalışma alanınızı seçebileceğiniz açılır pencereyi göreceksiniz. İşiniz bittiğinde, Uygulama Oluştur'a tıklayın.

name app and workspace slack

Bu, Temel Bilgiler sayfasını açar. Burada, Gelen Web kancaları seçeneğine tıklamanız gerekir.

incoming webhooks

Bir sonraki ekranda, Gelen Web kancalarını Etkinleştir ayarlarını etkinleştirin. Bu, harici hizmetlerden Slack'e mesaj göndermenizi sağlar.

enable incoming webhooks

Etkinleştirildiğinde, sayfada Çalışma Alanınız için Web kancaları URL'leri bölümünü göreceksiniz.

Şimdi, WordPress formunuzdan bilgi almak için yeni bir web kancası oluşturmanız gerekiyor. Bu nedenle, Çalışma Alanına Yeni Web Kancası Ekle düğmesini tıklayın.

add new webhook

Ardından, form gönderimlerinizi göndermek için bir Slack kanalı seçebileceğiniz açılır pencereyi görebilirsiniz.

Bir Slack kanalı seçtikten sonra İzin Ver'e tıklayın.

choose a slack channel

Artık Slack uygulamanız için yeni web kancası URL'sini görebileceksiniz.

copy app url

Şimdi tek yapmanız gereken Webhook URL'sini kopyalamak. Birkaç adım sonra ihtiyacınız olacak.

Adım 2: WPForms'u Kurun ve Etkinleştirin

Web kancası URL'nizi aldıktan sonra, onu WordPress formunuza ekleyebilirsiniz.

Başlamak için WPForms web sitesinde bir hesap açın.

Eklentinin ücretsiz bir sürümü var, ancak web kancaları gibi gelişmiş form özelliklerine erişmek için premium sürüme ihtiyacınız olacak. WPForms, bir taahhütte bulunmadan önce hizmeti deneyebilmeniz için %100 risksiz para iade garantisi ile birlikte gelir.

Kaydolduktan sonra, İndirilenler sekmesinde eklenti indirme dosyasını ve lisans anahtarını bulacaksınız.

WPForms license key

Şimdi, WordPress kontrol panelinize gidin ve eklentiyi yükleyin. Daha fazla ayrıntı istiyorsanız, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza göz atabilirsiniz.

WPForms'u sitenize kurup etkinleştirdikten sonra, tüm premium özelliklerinizin ve eklentilerinizin keyfini çıkarmak için lisans anahtarınızı girmeniz gerekir.

verify wpforms license

Formunuzu oluşturmaya başlamadan önce Webhooks Eklentisini yüklemeniz gerekir.

Bunun için WPForms »Eklentiler sekmesine gidin ve WordPress formlarınızın işlevselliğini genişletmenize yardımcı olacak tonlarca eklenti bulacaksınız. Burada, Webhooks Eklentisi için Eklenti Yükle düğmesine tıklayın.

install webhooks addon

Artık WordPress'te webhook formunuzu oluşturmaya hazırsınız.

3. Adım: Bir Webhook Formu Oluşturun

Yeni bir form oluşturmak için, önceden hazırlanmış şablonların bir listesini göreceğiniz WPForms »Yeni Ekle sayfasına gidin. Bu şablonlar, formunuzun amacına göre ihtiyaç duyacağınız alanlarla önceden doldurulmuş olarak gelir. Şablon kitaplığı şunları içerir:

  • Basit İletişim Formu
  • Teklif Formu İste
  • Bağış Formu
  • Fatura/Sipariş Formu
  • Anket formu
  • Öneri Formu

…ve dahası! Önceki adımda kullanıcı geri bildirimi için bir Slack uygulaması oluşturduğumuz için bu eğitim için Öneri Formu şablonunu seçeceğiz. İhtiyacınıza en uygun olanı seçmekten çekinmeyin.

Tek yapmanız gereken sayfanın üst kısmında formunuza bir isim vermek. Ardından ihtiyaçlarınıza göre herhangi bir şablonu seçin veya sıfırdan başlamak için boş şablonu seçebilirsiniz.

suggestion form template

Bir şablon seçtikten sonra, sonraki pencerede sürükle ve bırak form oluşturucusunu göreceksiniz.

Daha fazla alan eklemek istiyorsanız, sol menüden yeni alanları form önizlemesine sürükleyip bırakmanız yeterlidir.

wpforms drag and drop

WPForms, düzenlemek için herhangi bir alana tıklayabilmeniz için birçok özelleştirme seçeneği sunar. Alan adlarını, açıklamayı ve daha gelişmiş ayarları değiştirmenize olanak tanır.

edit form field

Form alanlarınızı eklemeyi bitirdikten sonra Kaydet düğmesine tıklayın.

Sonraki adımda, bu form için web kancalarını nasıl kuracağınızı ve Slack uygulamanızı nasıl bağlayacağınızı öğreneceğiz.

4. Adım: Slack için bir Web kancası kurun

Web kancalarının formunuzda çalışması için Ayarlar » Web kancaları sekmesine gitmeniz ve Web kancalarını Etkinleştir seçeneğine tıklamanız gerekir.

enable webhooks wpforms

Slack entegrasyonunuzu ayarlamak için düzenleyebileceğiniz yeni bir web kancası oluşturulacak.

İlk olarak, web kancasının adını değiştirebilirsiniz. Bu, daha sonra tanımanıza yardımcı olacaktır.

webhooks settings

Şimdi 1. Adımda Slack uygulamanızdan kopyaladığınız Webhook URL'sini hatırlıyor musunuz? URL İste seçeneğine buraya yapıştırmanız gerekir. Bu, WordPress formunuzu Slack gibi diğer hizmetlerle bağlamanıza izin verecektir.

set up webhook for slack

Bundan sonra, web kancanızı ayarlamak için çeşitli ayarlar göreceksiniz. Burada her birinin ne yaptığını ve bu alanlara ne ekleneceğini tartışacağız.

  • İstek Yöntemi: Bağlı hizmetinizle ne tür bir bağlantı oluşturmak istediğinizi seçmenize olanak tanır. Ne tür bir bağlantı oluşturmak istediğinize bağlı olarak kullanabileceğiniz birçok HTTP yöntemi vardır:
    • GET : Bu, gönderilen formdaki verileri alır ve ayrıntıları bağlı bir uygulamaya gönderir.
    • POST : Bu, verileri ikincil bir hizmete gönderir. Formunuzdan Slack kanalınıza veri göndermemiz gerektiğinden HTTP POST isteğini kullanacağız.
    • PUT : Bu, web kancanız çalıştığında verileri güncellemenizi sağlar.
    • YAMA : Bu, web kancanız çalıştığında verileri değiştirmenize olanak tanır.
    • DELETE : Bu, bu belirli web kancası çalıştığında bilgileri silmenizi sağlar.
  • İstek Biçimi: Bu seçenek, sunucuya ne tür içerik gönderdiğinizi gösterir. Bu biraz teknik ama temelde iki farklı istek biçimi türü mevcuttur:
    • JSON : Verilerinizi application/json biçiminde biçimlendirir ve içerik türünü charset=utf-8 olarak ayarlar.
    • FORM : Verilerinizi application/x-www-form-urlencoding biçiminde biçimlendirir ve içerik türünü charset=utf-8 olarak ayarlar.
  • Gizli: Bir geliştiriciyseniz ve kimlik doğrulama için kendi API'nizi entegre etmek istiyorsanız, gizli bir anahtar kullanabilirsiniz. Ancak öğreticimiz için bu seçeneğe ihtiyacımız yok, bu yüzden bunu boş bırakacağız.
  • İstek Başlıkları: Bu, istek uygulamaya gönderildiğinde belirli değerler gönderir. Web kancası çalıştığında, alanlar otomatik olarak oluşturulur. Bu alanı da boş bırakacağız.
  • İstek Gövdesi: Bu seçenek için, mesaj türünü ayarlamanız ve mesaj göndermek için bir alan seçmeniz gerekir. Kullanıcılar önerileri metin biçiminde gireceğinden, Key to Text'i ayarlayacağız. Ardından, kullanıcıların mesajlarını gireceği alanı seçin.

Web kancası isteğinin ayarlarını tamamladıktan sonra Kaydet düğmesine tıklayın.

Adım 5: Form Bildirimlerini Ayarlayın

Ardından, WordPress formu için e-posta bildirimleri ayarlayabilirsiniz. Bu, formu gönderdikten sonra yöneticiye, herhangi bir ekip üyesine ve müşteriye/kullanıcıya otomatik e-postalar göndermenizi sağlar.

Bu e-posta iş akışlarını ayarlamak için Ayarlar »Bildirimler sekmesine gidin, varsayılan ayarları görmek için Bildirimleri Etkinleştir seçeneğini işaretleyin.

Burada bildirim ayarlarını özelleştirebilir ve alıcı e-posta adresleri ekleyebilirsiniz.

webhook form notifications

WPForms ayrıca form kullanıcılarına otomatik e-posta bildirimleri göndermenize de olanak tanır. Bunu ayarlamak için sayfanın sağ üst köşesindeki Yeni Bildirim Ekle düğmesine tıklayın.

Ardından, Akıllı Etiketleri Göster seçeneğini kullanmanız ve E-posta'yı seçmeniz gerekir. Bu etiketle, WPForms, kullanıcı tarafından forma girilen e-posta adresini otomatik olarak algılar.

webhook form user notification

E-posta Mesajı bölümünde, özel mesajınızı ekleyebilir ve kullanıcının girdiği tüm form verilerini göstermek için {all_fields} akıllı etiketini kullanabilirsiniz.

notification message

Sonunda ayarlarınızı kaydetmeyi unutmayın.

6. Adım: Onay Mesajını Özelleştirin

WPForms ayrıca, kullanıcılar formu başarıyla gönderdikten sonra sitenizin ön ucunda onay mesajlarını görüntülemenizi sağlar.

Ayarlar » Onaylar sekmesinde, onay ayarlarını göreceksiniz. Varsayılan olarak, Onay Türü 'Mesaj' olarak ayarlanmıştır ancak bu menüde 3 seçenek vardır:

  • Mesaj: Müşteriler siparişlerini gönderdikten sonra ön uçta görüntülenen bir onay mesajı ekleyin.
  • Sayfayı Göster: Kullanıcılarınızı sitenizdeki herhangi bir sayfaya yönlendirin.
  • URL'ye Git (Yönlendirme): Kullanıcıları belirli bir URL'ye gönderin.
confirmation message

Bununla ilgili daha fazla bilgi edinmek için form bildirimlerini ve onaylarını doğru şekilde nasıl ayarlayacağınızla ilgili kılavuzumuza göz atabilirsiniz.

Ayarları tamamladıktan sonra Kaydet düğmesine tıklayın.

Burada ayrıca WPForms'un Constant Contact ve Mailchimp gibi tercih ettiğiniz e-posta hizmetiyle entegre olmanızı sağladığını da belirtmeliyiz.

Buna Pazarlama sekmesinden erişmeniz ve e-posta hesabınızı bağlamak için ekrandaki talimatları izlemeniz yeterlidir. Çoğu durumda, e-posta sağlayıcısıyla oluşturabileceğiniz bir API anahtarı sağlamanız gerekir.

add marketing integration in wpforms

Çevrimiçi formları bir ödeme ağ geçidine de bağlamak istiyorsanız, bunu burada öğrenebilirsiniz: Çevrimiçi Sipariş Formu Nasıl Oluşturulur

Şimdi tek yapmanız gereken webhook formunuzu WordPress sitenizde yayınlamak.

7. Adım: Web kancaları Formunu Sitenizde Yayınlayın

Form gönderimlerini harici hizmetlere göndermeye başlamak için önce web kancası formunu yayınlamanız gerekir. WPForms özel bloğu ile formlarınızı herhangi bir sayfaya ekleyebilir veya WordPress sitenizdeki gönderiye ekleyebilirsiniz.

Bu eğitim için formu sitemizdeki yeni bir sayfaya ekleyeceğiz. Bu nedenle, WP yönetici panelinizdeki Sayfalar »Yeni Ekle sekmesine gidin. Blok düzenleyici ekranında yeni bir blok ekleyin ve 'WPForms' için arama yapın.

search wpforms block

WPForms bloğunu sayfanıza eklediğinizde, az önce oluşturduğunuz web kancası formunu seçmenize izin veren bir açılır menü göreceksiniz.

select webhook form

Ardından, sayfanızı sitenizde yayınlayabilirsiniz.

publish webhook form

WordPress klasik düzenleyici kullanıyorsanız, düzenleyicideki Form Ekle düğmesini kullanarak formu ekleyebilirsiniz.

add-form-classic-editor

Web kancası formunuzu altbilgi veya kenar çubuğu gibi widget'a hazır bir alana bile ekleyebilirsiniz. Bunu yapmak için Görünüm » Widget'lar sekmesine gidin ve WPForms pencere öğesini sağdaki kenar çubuğuna veya alt bilgi menüsüne sürükleyip bırakın.

Ardından açılır menüden oluşturduğunuz formu seçip değişikliklerinizi kaydedebilirsiniz.

add wpforms to sidebar

Artık web kancaları formunuz sitenizde yayınlanıyor. Kullanıcılar formu doldurup gönderdiğinde, web sitenizden Slack bildirimleri alırsınız.

Bunun gibi, webhook URL'lerini kullanarak farklı uygulamalara bağlanmak için WPForms'u kullanabilirsiniz. Getirmek ve diğer uygulamalara göndermek istediğiniz veriler üzerinde tam kontrol sahibi olursunuz.

Bu kadar! Bu yazının, WordPress formlarınızda Web kancalarını nasıl kullanacağınızı öğrenmenize yardımcı olduğunu umuyoruz. WPForms ile bir web kancası formu oluşturabilir ve bir üçüncü taraf hizmetine kolaylıkla bağlanabilirsiniz.

Ayrıca sipariş formları, rezervasyon formları, kayıt formları ve daha fazlası gibi diğer profesyonel WordPress formları oluşturmak için de kullanabilirsiniz.

Sonraki adımlarınız için şu kaynakları kontrol edebilirsiniz:

  • WordPress Formlarına 'Kaydet ve Daha Sonra Devam Et' Seçeneği Nasıl Eklenir
  • Form Terk Etmeyi Azaltma ve Dönüşümleri Artırma
  • WordPress için En İyi E-posta Yakalama Araçları ve Form Oluşturucular

Bu gönderiler, WordPress formlarınıza kaydetme ve daha sonra devam etme işlevini eklemenize ve formdan vazgeçme oranlarını azaltmanıza yardımcı olacaktır. Sonuncusu, e-posta pazarlama listenizi büyütmenize yardımcı olacaktır.