How to Send Field Values with WPForms Webhooks Addon

Markdownを表示

WPForms Webhooksアドオンでチェックボックスのフィールド値を送信しますか？デフォルトでは、フィールドラベルが送信されますが、簡単なPHPスニペットを使用すると、代わりに値を簡単に送信できます。このチュートリアルでは、その方法を説明します。

このチュートリアルでは、Slackワークフローを作成し、フォームフィールドを割り当てる変数を作成します。これにより、フォームデータがWebhook経由でSlackに投稿され、サイトにオンライン機能リクエストフォームを提供し、訪問者がフォームを完了するたびにSlackにデータが投稿されるようになります。

フィールド値を送信する

現在、WPFormsからWebhook経由でSlackに複数のフォームフィールドを送信する唯一の方法は、Slackワークフローを使用することです。Slackワークフローの詳細については、こちらのドキュメントをご覧ください。

Webhook経由でSlackに1つの値のみを送信したい場合は、こちらのドキュメントをご覧ください。

まず、フォームビルダー内でWebhookを設定する際に後で使用する変数を作成できるように、Slackでワークフローを作成することから始めます。

1) Slackで新しいワークフローを追加する

まず、Webブラウザ経由でSlackにログインする必要があります。ログインしたら、会社名の横にある矢印をクリックし、ツールの下にあるワークフロービルダーを選択します。

ツールメニューからワークフロービルダーをクリックして新しいワークフローを作成します

次に、ページ右上隅にある作成ボタンをクリックし、ワークフローに名前を付けてから、次へをクリックします。

2) ワークフローの種類の選択

次に表示される画面で、作成したいワークフローの種類を選択します。WPForms Webhooksアドオンを使用するため、Webhookの横にある選択ボタンをクリックします。

Webhookオプションの横にある選択をクリックします

3) ワークフローの変数の作成

次の画面で、投稿する変数を作成します。このチュートリアルの目的では、名前、メールアドレス、チェックボックス（製品リスト用）、および段落テキスト（コメント用）のフォームフィールドを持つフォームを作成することがわかっています。そのため、これらのフィールドで機能する変数を作成します。

変数を追加リンクをクリックすると、新しいウィンドウでキーとデータ型を尋ねられます。

最初の変数キーはname、データ型はTextになります。

変数の追加が完了したら完了をクリックし、変数を追加リンクをクリックして、すべての変数を追加するまで、このワークフローに追加したい各変数に対してこの手順を繰り返します。

メールアドレス、チェックボックス、および段落テキストのフォームフィールドに対して、この手順を繰り返します。

これで全ての変数を追加したので、Nextボタンをクリックしてワークフローの構築を完了します。

4)ワークフローにステップを追加する

これで、新しいワークフローが実行するステップを追加する時間です。

次に、Send a messageの隣にあるAddボタンをクリックします。ここで、Slackの特定のチャンネルまたは個人に投稿するかどうかを選択できます。

次に表示される画面で、ドロップダウンからメッセージを送信したい相手を選択するように求められます。その後、送信するメッセージを作成できます。

前のステップで追加した変数とテキストを組み合わせて、Slackに投稿するメッセージを構築します

メッセージ自体は、入力したテキストと、前のステップで追加した変数の両方を受け入れます。メッセージとしては、「Incoming form submission for a new feature」から始めます。

次に、新しい行ごとにテキストと変数を組み合わせて作成を開始します。Fromと入力したら、Insert Variableリンクをクリックしてname変数を選択します。追加した各変数に対してこの手順を繰り返し、変更を保存するにはSaveをクリックします。

ポップアップウィンドウが閉じられ、ワークフローを発行するにはPublishボタンをクリックするだけです。ワークフローを発行したら、作成されたWebhookのURLの隣にあるCopyボタンをクリックできます。このURLは後のステップで使用します。

フォームの作成

フィールド値をWebhook経由で送信できるようにするには、まずフォームを作成する必要があります。フォームには、Name、Email、Checkbox（製品リスト用）、およびParagraph Text（コメント用）のフォームフィールドが含まれます。

フォームの作成にヘルプが必要な場合は、こちらのドキュメントを参照してください。

コードスニペットの追加

これで、CheckboxフォームフィールドからWebhookを使用してフィールド値を作成および送信するコードスニペットを追加する時間です。

このコードスニペットをコピーしてサイトに貼り付けるだけです。サイトへのコードスニペットの追加にヘルプが必要な場合は、こちらのチュートリアルを参照してください。

まず、こちらのチュートリアルから、Dropdown、Checkbox、Multiple Choiceフィールドのフィールド値を追加できるスニペットを追加します。

/**
 * Show values in Dropdown, checkboxes, and Multiple Choice.
 *
 * @link https://wpforms.com/developers/add-field-values-for-dropdown-checkboxes-and-multiple-choice-fields/
 */
  
add_action( 'wpforms_fields_show_options_setting', '__return_true' );

次に、これらのフィールド値をWebhookで送信できるスニペットを追加します。

/**
 * Send field values in Dropdown, checkboxes, and Multiple Choice through webhook.
 *
 * @link https://wpforms.com/developers/how-to-send-field-values-with-webhooks/
 */

function wpf_dev_webhooks_process_delivery_request_options($options, $webhook_data, $fields, $form_data, $entry_id) {
		
	    if ( ! wpforms_show_fields_options_setting() ) {
			return $options;
		}
	    
	    //Only run on form ID 322
		if ( empty( $form_data[ 'id' ] ) || $form_data[ 'id' ] !== '322' ) {
			return $options;
		}
	
		if (
			empty( $options[ 'body' ] ) ||
			empty( $webhook_data[ 'body' ] ) ||
			empty( $fields )
		) {
			return $options;
		}
	
		$body = ! is_array( $options[ 'body' ] ) ? json_decode( $options[ 'body' ], true ) : $options[ 'body' ];
		foreach ( $body as $param_key => $param_value ) {
			if (
				! isset( $webhook_data[ 'body' ][ $param_key ] ) ||
				empty( $fields[ $webhook_data[ 'body' ][ $param_key ] ] ) ||
				! isset( $fields[ $webhook_data[ 'body' ][ $param_key ] ][ 'value_raw' ] )
			) {
				continue;
			}
			$body[ $param_key ] = $fields[ $webhook_data['body'][ $param_key ] ]['value_raw'];
		}
	
		// Format request data.
		if (
			! empty( $options[ 'method' ] ) &&
			$options[ 'method' ] !== 'GET' &&
			$webhook_data[ 'format' ] === 'json'
		) {
			// Encode request body.
			$options[ 'body' ] = wp_json_encode( $body );
		}
	
		return $options;
	
	}

add_filter( 'wpforms_webhooks_process_delivery_request_options', 'wpf_dev_webhooks_process_delivery_request_options', 10, 5);

フォームIDを322からご自身のフォームIDに変更することを忘れないでください。フォームIDの見つけ方にヘルプが必要な場合は、こちらのチュートリアルを参照してください。

値の表示を有効にするためにフォームを編集する

コードスニペットを追加したら、フォームを編集してCheckboxフィールドをクリックするだけで、フィールド値を入力できます。これは、ラベルの代わりにWebhook経由でSlackに送信されるものです。

次に、フォームを編集してCheckboxフォームフィールドを選択する必要があります。Advanced Optionsで、Show Valuesのチェックボックスをクリックします。

チェックボックスフォームフィールドを編集し、高度なオプションで「値の表示」チェックボックスを選択します

これを実行すると、フィールドに値を追加できるようになります。

Webhook経由でSlackに渡せるフィールド値を追加するだけです

Webhookフィールドのマッピング

最後のステップは、設定した変数と一致するようにフォームフィールドをマップすることです。このステップを完了するには、フォームビルダー内から設定タブをクリックします。次にWebhookをクリックします。

Webhookドロップダウンから、この設定をオンに切り替えます。

Webhook URLは、上記のステップ4でコピーしたURLです。リクエストメソッドはPost、リクエストフォーマットはJSONになります。

シークレットとリクエストヘッダーセクションは空白のままにすることができます。これらの設定を変更する必要はありません。

リクエストボディでは、ここでステップ3の変数をフォームフィールドにマップします。

ステップ3の変数をフォームで作成したフォームフィールドにマップします

これでフォームが完了すると、SlackbotがWebhookで設定したユーザーまたはチャンネルにメッセージを送信するだけでなく、フィールドラベルの代わりにフィールド値をWebhook経由で送信します。

これでSlackbotはメッセージとフィールド値をWebhook経由で送信します

これで完了です！フォーム送信が成功した際の確認メッセージに、アニメーションの紙吹雪を追加しませんか？確認メッセージに紙吹雪アニメーションを追加する方法のチュートリアルをご覧ください。

Webhookでフィールド値を送信する方法

AI要約