### [How to Send Field Values with Webhooks](https://wpforms.com/developers/how-to-send-field-values-with-webhooks/)

**Published:** March 31, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how to send your field values from Checkbox, Multiple Choice and Dropdown fields with the Webhooks addon. 

**Content:**

Would you like to send field values from your checkboxes with the **WPForms Webhooks addon**? By default, the field label would be sent but with a small PHP snippet, you can easily send the value instead. In this tutorial, we’ll walk you through how to do this.

This tutorial is going to create a [Slack Workflow](https://slack.com/help/articles/360053571454-Set-up-a-workflow-in-Slack "Set up a workflow in Slack") as well as creating variables that we’ll assign our form fields to so that our form data will post to Slack through our webhook so that we can provide an online feature request form on our site and have that data post to Slack whenever the form is completed by our visitors.

## Sending field values

Currently, the only way to send multiple form fields from WPForms to Slack through a webhook is by using the [Slack Workflow](https://slack.com/features/workflow-automation "Slack Workflow"). For more information on Slack Workflows, [please see this documentation](https://slack.com/help/articles/360041352714-Create-more-advanced-workflows-using-webhooks "Create more advanced workflows using webhooks").

 If you only want to send 1 value to Slack through a webhook, [please see this documentation](https://wpforms.com/docs/how-to-install-and-use-the-webhooks-addon-with-wpforms/#example "How to Install and Use the Webhooks Addon with WPForms").

We’re going to begin by creating a workflow in Slack first so that we can create the variables that we’ll use later when setting up the webhook inside the form builder.

#### 1)Adding a new workflow in Slack

First, you’ll need to log into your Slack through the web browser. Once you’re logged in, click the arrow next to the company name, and under **Tools**, select **Workflow Builder**.

![From the Tools menu click Workflow Builder to create a new workflow](https://wpforms.com/wp-content/uploads/2021/03/add-new-workflow.jpg)

Next, you click the **Create** button in the top right corner of the page and give your workflow a name then click **Next**.

#### 2) Selecting the type of workflow

The next screen you’ll see is where you will select what type of workflow you want to create. Since we’re going to be using the **WPForms Webhooks addon**, we’ll click the **Select** button next to **Webhook**.

![Click Select next to the Webhook option](https://wpforms.com/wp-content/uploads/2021/03/select-the-webhooks-option-11.40.13-AM.jpg)

#### 3) Creating the variables for the workflow

The next screen is where we are going to create the variables that we’ll be posting. For the purpose of this tutorial, we know we’re going to create a form with the **Name**, **Email**, **Checkbox** (for our product list), and **Paragraph Text** (for our comments) form fields. So we’re going to create variables that will work with those fields.

Once you click the **Add Variables** link a new window will ask you for the **Key** and the **Data Type**.

![](https://wpforms.com/wp-content/uploads/2021/03/adding-variables-to-the-workflow.jpg)

Our first variable **Key** will be **name** and our **Data Type** will be **Text**.

Click **Done** when you are finished adding the variable and repeat this step for each variable you want to add to this workflow by clicking the **Add Variable** link until you are finished adding all variables.

We’re going to repeat this step for the **Email**, **Checkbox**, and **Paragraph Text** form fields.

Now that we’ve added all of our variables, click the **Next** button to finish building the workflow.

#### 4)Adding the steps to the workflow

Now it’s time to add the steps that our new workflow will take.

Next, click the **Add** button next to **Send a message**. Here you can choose to post to a particular channel or person in Slack.

The next screen you’ll see will ask you to select from a dropdown who you’d like to send the message to. Then you’ll get to build the message that will send.

![build the message that will post to select with a combination of text and the variables you added in the last step](https://wpforms.com/wp-content/uploads/2021/03/send-message-to.jpg)

The message itself will accept the typed text that you enter as well as the variables that you added in the last step. For our message, we’ll start with what this message is **“Incoming form submission for a new feature”**.

Then we’ll start building the text and variables together on a new line for each. Once you’ve typed **From**, click the **Insert Variable** link and select the **name** variable. Repeat this step for each of the variables you’ve added and click **Save** to save the changes.

The popup window will be closed and you’ll just need to click the **Publish** button to publish the workflow. Once you’ve published your workflow you can click the **Copy** button next to the URL that gets created for the webhook. We’ll use this URL in a later step.

## Creating the form

Before we can send our field values through the webhook, we need to create our form. Our form will contain the **Name**, **Email**, **Checkbox** (for a list of our products), and a **Paragraph Text** (for our comments) form fields.

If you need help creating a form, [please see this documentation](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form").

## Adding the code snippet

Now it’s time to add the code snippet that will create and send field values with webhooks from our **Checkbox** form field.

Just copy and paste this code snippet to your site. If you need help with adding code snippets to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

First, we’ll add the snippet that allows us to [add field values for Dropdowns, Checkboxes, and Multiple Choice fields from this tutorial](https://wpforms.com/developers/add-field-values-for-dropdown-checkboxes-and-multiple-choice-fields/ "How to Add Field Values for Dropdown, Checkboxes, and Multiple Choice Fields").

```

/**
 * 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' );
```

Next, we’re going to add a snippet that allows us to send those field values with webhooks.

```

/**
 * 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);

```

Please remember to update the form ID from **322** to whatever your form ID is. If you need help in finding your form ID, [please see this tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "https://wpforms.com/developers/how-to-locate-form-id-and-field-id/").

## Editing the form to enable showing the values

Once you’ve added your code snippet, just edit your form and click on the **Checkbox** field so that you can fill in your field values. This is what will be sent to Slack through the webhook instead of the label.

Now you’ll need to edit your form and select the **Checkbox** form field. In the **Advanced Options**, click the checkbox for the **Show Values**.

![Edit the Checkbox form field and in the Advanced Options select the Show Values checkbox](https://wpforms.com/wp-content/uploads/2021/03/wpforms-enable-show-values.jpg)

Once you’ve done this, you’ll be able to add your values to the field.

![Just add in the field values that can be passed to Slack through the webhooks](https://wpforms.com/wp-content/uploads/2021/03/wpforms-add-field-values.jpg)

## Mapping the webhook fields

The final step is to map over the form fields to match the variables that we set up in our Slack workflow. To complete this step, from inside the form builder click the **Settings** tab. Then click **Webhooks**.

From the **Webhooks** dropdown, switch this setting to **On**.

The **Webhooks URL** is the URL you copied in **Step 4** above. The **Request Method** will be **Post** and the **Request Format** will be **JSON**.

You can leave the Secret and Request Headers section blank. We won’t need to alter these settings.

In the **Request Body**, this is where we will map our variables from **Step 3** to our form fields.

![Map the variables from Step 3 to the form fields you created in your form](https://wpforms.com/wp-content/uploads/2021/03/wpforms-webhooks-settings.jpg)

Now when the form is completed, not only will a **Slackbot** will send a message to the person or channel you set up in your webhook but it will also send the field values through the webhook instead of the field label.

![Now the Slackbot will send through the message and the field values with webhooks](https://wpforms.com/wp-content/uploads/2021/03/wpforms-slack-notification-through-webhooks.jpg)

And that’s it! Would you like to also add some animated confetti to your confirmation message upon successful form submission? Take a look at our tutorial on [How to Add Confetti Animation to Confirmation Message](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "How to Add Confetti Animation to Confirmation Message").

**Categories:** Extending

**Tags:** PHP, Webhooks

---