WordPressフォームでWebhookを使用する方法

公開: 2022-03-14

WordPressフォームをさまざまなWebアプリケーションやサービスと統合しますか？

WordPressフォームから直接Webアプリケーションでデータを送信する簡単な方法が必要な場合は、Webhookが最適なソリューションです。 Webhookフォームを使用すると、Zapierのようなサードパーティのコネクタを使用する必要はありません。

この投稿では、WordPressフォームでWebhookを使用して、お気に入りのアプリやサービスにリアルタイムデータを簡単に送信する方法を紹介します。

ただし、最初に、初心者の場合は、Webhookとは何か、なぜWebhookが重要なのかについて説明します。今日使用する方法では、コーディングスキルは必要ありません。

Webhookとは何ですか？

Webhookを使用すると、2つのWebアプリケーションが相互に通信できます。たとえば、誰かがWebサイトで発注書を送信した場合、そのデータをSlackチャネルに送信して、注文が行われたことを製品チームに更新できます。これは、新しいリードまたはサブスクライバーを取得したときにも実行できます。

技術用語では、Webhookは、ソースシステムのイベントによってトリガーされ、宛先システムに送信されるユーザー定義のHTTPコールバックです。

これは、Webサイトでイベントまたはトリガーが発生すると、接続されたサービスに自動メッセージが送信されることを意味します。トリガーには、ブログのコメント、製品購入ユーザーの登録、フォームの送信などがあります。

なぜWebhookを使用する必要があるのか疑問に思っている場合は、次のような利点があります。

2つのサービス/アプリ間で情報を自動的に転送する
タスクを自動化し、管理時間を短縮します
ZapierやHubspotなどのコネクタサービスを使用してアプリのデータを処理するコストを削減します。

Webhookは、開発者や技術に精通したWordPressユーザーにとって非常に便利です。

それでは、WordPressでWebhookフォームを作成する方法のステップバイステップガイドを始めましょう。

WordPressでWebhookフォームを作成する[簡単な方法]

Webhookを使用してWordPressフォームの送信を他のWebアプリケーションに送信する方法はたくさんあります。

このチュートリアルでは、初心者を含む誰でも簡単に使用できるWebhookアドオンを提供するWPFormsを使用します。コーディングは一切必要ありません。

WPFormsは、WordPressサイトに最適なフォームビルダープラグインです。そして、あなたが知る必要があるのは、それがあなたがすべてのタイプのWordPressフォームを作成することを可能にするたくさんの既製のテンプレートとすぐに使えるフォームフィールドを提供するということです。これには、製品の注文、登録、予約、簡単な連絡フォームなどが含まれます。

WPFormsには、フォームのカスタマイズを簡単にするドラッグアンドドロップフォームビルダーが付属しています。メール、支払い、マーケティングのアプリに接続するために使用できるアドオンと統合がたくさんあります。

Webhookアドオンを使用すると、WordPressを任意のサービスやアプリに簡単に接続できます。この機能を有効にするには、数回クリックするだけです。

また、WPFormsを使用すると、条件付きルールを使用して、ユーザーのフォーム応答に基づいてWebhookアクションをトリガーできます。したがって、フィールドの値が満たされた場合にのみ、Webhookが実行されます。これにより、送信するデータとアプリをより細かく制御できます。

たくさんのアプリやサービスに接続できます。このチュートリアルでは、Slackに接続する方法を説明します。ただし、同じ手順を使用して他のアプリやエンドポイントに接続することもできます。

ステップ1：新しいSlackアプリを作成する

WebhookフォームをSlackに接続することで、メッセージや情報をWebサイトからSlackチャネルに自動的に送信できます。ある人がフォームを送信したり、フォームを放棄したりしたときに、チームメンバーや部門を更新できます。

ここで、Webhookを使用してWordPressから別のサービスにデータを送信するには、2つのアプリの間にブリッジを作成する必要があります。そのため、Slackに接続するには、Slackアプリ（ブリッジ）を作成する必要があります。

これに慣れていない場合でも、心配しないでください。非常に簡単で、手順を追って説明します。まず、Slack APIページを開き、[アプリの作成]ボタンをクリックする必要があります。

次のポップアップウィンドウで、Slackを使用してアプリを作成する方法を選択できます。 2つのオプションがあります。

ゼロから
アプリマニフェストから。

ここでは、Slackアプリを最初から作成します。大変な作業のように聞こえますが、実際には数回クリックするだけです。

次に、アプリの名前を追加してSlackワークプレースを選択できるポップアップが表示されます。完了したら、[アプリの作成]をクリックします。

これにより、[基本情報]ページが開きます。ここで、[着信Webhook ]オプションをクリックする必要があります。

次の画面で、[着信Webhookのアクティブ化]設定を有効にします。これにより、外部サービスからSlackにメッセージを投稿できます。

有効にすると、ページに「ワークスペースのWebhookURL」セクションが表示されます。

次に、WordPressフォームから情報を取得するために新しいWebhookを作成する必要があります。したがって、[新しいWebhookをワークスペースに追加]ボタンをクリックします。

次に、フォーム送信を投稿するためのSlackチャネルを選択できるポップアップが表示されます。

Slackチャネルを選択したら、[許可]をクリックします。

これで、Slackアプリの新しいWebhookURLを確認できるようになります。

あなたが今しなければならないのは、WebhookのURLをコピーすることだけです。数ステップ後に必要になります。

ステップ2：WPFormsをインストールしてアクティブ化する

Webhook URLを取得したら、それをWordPressフォームに追加できます。

開始するには、WPFormsWebサイトでアカウントにサインアップしてください。

プラグインには無料バージョンがありますが、Webhookなどの高度なフォーム機能にアクセスするにはプレミアムバージョンが必要です。 WPFormsには、100％リスクのない返金保証が付いているため、コミットする前にサービスを試すことができます。

サインアップすると、プラグインのダウンロードファイルとライセンスキーが[ダウンロード]タブに表示されます。

次に、WordPressダッシュボードに移動して、プラグインをインストールします。詳細が必要な場合は、WordPressプラグインのインストール方法に関するガイドを確認してください。

サイトにWPFormsをインストールしてアクティブ化したら、すべてのプレミアム機能とアドオンを利用するためにライセンスキーを入力する必要があります。

フォームの作成を開始する前に、Webhookアドオンをインストールする必要があります。

これについては、 WPForms»Addonsタブに移動すると、WordPressフォームの機能を拡張するのに役立つたくさんのアドオンが見つかります。ここで、Webhookアドオンの[アドオンのインストール]ボタンをクリックします。

これで、WordPressでWebhookフォームを作成する準備が整いました。

ステップ3：Webhookフォームを作成する

新しいフォームを作成するには、 WPForms»Add Newページに移動します。このページには、作成済みのテンプレートのリストが表示されます。これらのテンプレートには、フォームの目的に基づいて必要なフィールドが事前に入力されています。テンプレートライブラリには次のものが含まれます。

簡単な連絡フォーム
見積もりフォームをリクエストする
寄付フォーム
請求/注文フォーム
アンケート用紙
提案フォーム

…もっと！このチュートリアルでは、前の手順でユーザーフィードバック用のSlackアプリを作成したため、提案フォームテンプレートを選択します。必要なものに最適なものを自由に選択してください。

あなたがしなければならないのはあなたのフォームにページの上部に名前を付けることだけです。次に、ニーズに応じて任意のテンプレートを選択するか、空のテンプレートを選択して最初から開始することができます。

テンプレートを選択すると、次のウィンドウにドラッグアンドドロップフォームビルダーが表示されます。

さらにフィールドを追加する場合は、左側のメニューからフォームプレビューに新しいフィールドをドラッグアンドドロップするだけです。

WPFormsには多くのカスタマイズオプションが用意されているため、任意のフィールドをクリックして編集できます。フィールド名、説明、およびより詳細な設定を変更できます。

フォームフィールドの追加が完了したら、[保存]ボタンをクリックします。

次のステップでは、このフォームのWebhookを設定し、Slackアプリを接続する方法を学習します。

ステップ4：Slack用のWebhookを設定する

Webhookをフォームで機能させるには、 [設定]»[Webhook ]タブに移動し、[ Webhookを有効にする]オプションをクリックする必要があります。

Slack統合をセットアップするために編集できる新しいWebhookが作成されます。

まず、Webhookの名前を変更できます。これは、後でそれを認識するのに役立ちます。

ステップ1でSlackアプリからコピーしたWebhookURLを覚えていますか？ここで[URLのリクエスト]オプションに貼り付ける必要があります。これにより、WordPressフォームをSlackなどの他のサービスに接続できるようになります。

この後、Webhookを設定するためのさまざまな設定が表示されます。ここでは、それぞれが何をするのか、そしてこれらのフィールドに何を追加するのかについて説明します。

リクエスト方法：接続されたサービスで作成する接続のタイプを選択できます。作成しようとしている接続のタイプに基づいて使用できるHTTPメソッドには多くのタイプがあります。
- GET ：送信されたフォームからデータを取得し、接続されたアプリに詳細を送信します。
- POST ：これにより、データがセカンダリサービスに送信されます。フォームからSlackチャネルにデータを投稿する必要があるため、HTTPPOSTリクエストを使用します。
- PUT ：これにより、Webhookの実行時にデータを更新できます。
- パッチ：これにより、Webhookの実行時にデータを置き換えることができます。
- DELETE ：これにより、この特定のWebhookの実行時に情報を削除できます。
リクエスト形式：このオプションは、送信するコンテンツのタイプをサーバーに表示します。これは少し技術的ですが、基本的に、2つの異なるリクエスト形式タイプが利用可能です。
- JSON ：データをapplication / json形式でフォーマットし、コンテンツタイプをcharset=utf-8として設定します。
- FORM ：データをapplication / x-www-form-urlencoded形式でフォーマットし、コンテンツタイプをcharset=utf-8として設定します。
シークレット：開発者であり、認証用に独自のAPIを統合したい場合は、シークレットキーを使用できます。ただし、このチュートリアルでは、このオプションは必要ないため、空白のままにします。
リクエストヘッダー：これは、リクエストがアプリに送信されるときに特定の値を送信します。 Webhookが実行されると、フィールドが自動生成されます。このフィールドも空白のままにします。
リクエスト本文：このオプションでは、メッセージタイプを設定し、メッセージを投稿するフィールドを選択する必要があります。ユーザーがテキスト形式で提案を入力するので、キーをテキストに設定します。次に、ユーザーがメッセージを入力するフィールドを選択します。

Webhookリクエストの設定が完了したら、[保存]ボタンをクリックします。

ステップ5：フォーム通知を設定する

次に、WordPressフォームのメール通知を設定できます。これにより、フォームを送信すると、管理者、チームメンバー、および顧客/ユーザーに自動メールを送信できます。

これらの電子メールワークフローを設定するには、 [設定]»[通知]タブに移動し、[通知を有効にする]オプションをオンにしてデフォルト設定を確認します。

ここでは、通知設定をカスタマイズしたり、受信者の電子メールアドレスを追加したりできます。

WPFormsを使用すると、フォームユーザーに自動電子メール通知を送信することもできます。これを設定するには、ページの右上隅にある[新しい通知の追加]ボタンをクリックします。

次に、[スマートタグの表示]オプションを使用して、[電子メール]を選択する必要があります。このタグを使用すると、WPFormsはユーザーがフォームに入力した電子メールアドレスを自動検出します。

[メールメッセージ]セクションで、カスタムメッセージを追加し、{all_fields}スマートタグを使用して、ユーザーが入力したすべてのフォームデータを表示できます。

最後に設定を保存することを忘れないでください。

ステップ6：確認メッセージをカスタマイズする

WPFormsを使用すると、ユーザーがフォームを正常に送信した後、サイトのフロントエンドに確認メッセージを表示することもできます。

[設定]»[確認]タブに、確認設定が表示されます。デフォルトでは、確認タイプは「メッセージ」に設定されていますが、このメニューには3つのオプションがあります。

メッセージ：顧客が注文を送信した後にフロントエンドに表示される確認メッセージを追加します。
ページの表示：ユーザーをサイトの任意のページにリダイレクトします。
URLに移動（リダイレクト）：ユーザーを特定のURLに送信します。

これについて詳しくは、フォームの通知と確認を正しい方法で設定する方法に関するガイドを確認してください。

設定が完了したら、[保存]ボタンをクリックします。

また、WPFormsを使用すると、ConstantContactやMailchimpなどの好みの電子メールサービスと統合できることにも言及する必要があります。

[マーケティング]タブでこれにアクセスし、画面の指示に従ってメールアカウントを接続するだけです。ほとんどの場合、メールプロバイダーで生成できるAPIキーを提供する必要があります。

オンラインフォームを支払いゲートウェイにも接続する場合は、ここでその方法を学ぶことができます：オンライン注文フォームを作成する方法

あなたが今する必要があるのはあなたのWordPressサイトであなたのwebhookフォームを公開することです。

ステップ7：サイトにWebhookフォームを公開する

外部サービスへのフォーム送信の送信を開始するには、最初にWebhookフォームを公開する必要があります。 WPFormsカスタムブロックを使用すると、フォームを任意のページに追加したり、WordPressサイトに投稿したりできます。

このチュートリアルでは、フォームをサイトの新しいページに追加します。したがって、WP管理パネルの[ページ]»[新規追加]タブに移動します。ブロックエディタ画面で、新しいブロックを追加し、「WPForms」を検索します。

WPFormsブロックをページに追加すると、作成したWebhookフォームを選択できるドロップダウンメニューが表示されます。

次に、サイトにページを公開できます。

WordPressクラシックエディターを使用している場合は、エディターの[フォームの追加]ボタンを使用してフォームを追加できます。

フッターやサイドバーなどのウィジェット対応領域にWebhookフォームを挿入することもできます。これを行うには、[外観]»[ウィジェット]タブに移動し、WPFormsウィジェットを右側のサイドバーまたはフッターメニューにドラッグアンドドロップします。

次に、ドロップダウンメニューから作成したフォームを選択して、変更を保存できます。

これで、Webhookフォームがサイトに公開されました。ユーザーがフォームに入力して送信すると、WebサイトからSlack通知が届きます。

このように、WPFormsを使用して、WebhookURLを使用してさまざまなアプリに接続できます。フェッチして他のアプリに送信するデータを完全に制御できます。

それで全部です！この投稿が、WordPressフォームでWebhookを使用する方法を学ぶのに役立つことを願っています。 WPFormsを使用すると、Webhookフォームを作成し、サードパーティのサービスに簡単に接続できます。

また、注文フォーム、予約フォーム、登録フォームなど、他のプロフェッショナルなWordPressフォームを作成するためにも使用できます。

次のステップとして、次のリソースを確認できます。

WordPressフォームに「保存して後で続行」オプションを追加する方法
フォームの放棄を減らし、コンバージョンを増やす方法
WordPress用の最高のメールキャプチャツールとフォームビルダー

これらの投稿は、WordPressフォームに保存と再開の機能を追加し、フォームの放棄率を減らすのに役立ちます。最後のものはあなたがあなたのEメールマーケティングリストを成長させるのを助けるでしょう。