How to Install and Use the Webhooks Addon with WPForms

Would you like to send data from your WordPress forms to a secondary app or plugin? With WPForms’ Webhooks addon, you can connect your forms to a secondary service.

In this tutorial, we’ll show you how to install and use the Webhooks addon with WPForms.

Requirements: You will need an Elite license level to access the Webhooks addon.


What are Webhooks?

A webhook allows you to automatically send information from your form to some other service or tool outside of your WordPress site. This is especially helpful if there’s an integration you need, but there’s no direct integration option available.

The most beginner-friendly way to set up a webhook is through our Zapier addon. Zapier is easy for all user levels because it uses a wizard-style setup. This walks you through every step needed to connect your forms to a separate service.

For more advanced users, though, the Webhooks addon adds offers very similar capabilities without the need for any connector service. As a tradeoff, the setup process is more technical.

Installing the Webhooks Addon

Before we get started, you’ll first need to make sure that WPForms is installed and activated on your WordPress site.

To install the addon, navigate to WPForms » Addons and find the Webhooks addon. Then, click the Install Addon button to run the installation and activation process.

Setting Up a Webhook

Once your installation process is complete, you’re ready to set up your Webhook. To get started, you’ll need to create a new form or edit an existing form.

After opening the form builder, you can enable Webhooks under Settings » Webhooks. From there, you’ll need to toggle the status from Off to On.

Enable Webhooks in WPForms

This will open up more Webhooks settings that you can configure, including naming your Webhook.

By default, new Webhooks will be unnamed. If you’d like to edit or add a name to your Webhook, click on the pencil icon.

Rename Webhook

Additionally, if you’d like to add more Webhooks, you can click the button labeled Add New Webhook.

Add New Webhook

Below the name of your Webhook, you’ll see all available settings for your connection. We’ve outlined what each of these does below.

All Webhooks Settings

Request URL

This is the URL that will be used to connect WPForms to a secondary app. You can usually get this URL from the service or tool’s API, after setting up a basic connection.

Request Method

This setting allows you to select the HTTP method you’d like to use when your Webhook request runs.

There are several different methods to choose from, based on what type of connection you’re looking to create:

  • GET: This request will grab information from a secondary service and send those details to WPForms.
  • POST: This will take the information submitted through WPForms and send it to a secondary service.
  • PUT: This method will allow you to update data when your Webhook is run.
  • PATCH: This method will allow you to replace data when your Webhook runs.
  • DELETE: This will allow you to delete information when this specific Webhook is run.

Request Format

This setting will communicate to your server what type of data is being sent in your Webhook. This will also set the Content-Type header value for your data.

There are two different request format types available:

  • JSON: This will format your data in an application/json format, and will set the content type as charset=utf-8.
  • FORM: This will format your data in an application/x-www-form-urlencoded format, and will set the content type as charset=utf-8.

Note: Data is typically sent in JSON format, as this will make things easier to change server-side (including validation, formatting, and sanitization changes).

Secret

Note: If you’re integrating your forms with a third-party service, you don’t need to fill out this field. This field is intended for developers integrating with their own API, as a way to verify a request’s origin.

The Secret key will generate a hash (or unique ID) for each completed request. This acts as a signature to verify the origin of your HTTP request, and will always be provided in the Request Header.

Request Headers

This setting will allow you to define the HTTP header’s key(s) and value(s) to be sent with your Webhook request.

Request Body

Similar to the Request Headers, this setting will allow you to define the key(s) and value(s) that will be sent in the body of your Webhooks request.

Note: For separating multiple values in fields like Address, Dropdown, Checkboxes, etc., WPForms uses || (two vertical lines).

Example: Using Webhooks to Connect WPForms to Slack

As an example, we’ll walk you through how to connect WPForms to your Slack account.

First, you’ll need to navigate to Slack’s API page. Then, click on the Create an App button.

Create an app in Slack

This will open up an overlay where you can name your app, and select which workspace you’d like form data to be sent to.

For our example, we’ll name our app Contact Sullie.

Create a Slack app

Then, press the Create App button to create your app.

This will bring you to a page with some Basic information about your app. Scroll down to the Add features and functionality settings, and enable the Incoming Webhooks option.

Incoming Webhooks Integration for Slack

Then, toggle the Activate Incoming Webhooks option to On. This will open up more details further down on the page.

Activate Incoming Webhooks in Slack

Next, underneath the Webhook URLs for Your Workspace section, click the Add New Webhook to Workspace button.

Add New Webhook to Workspace

This will redirect you to another overlay where you’ll need to select a Slack channel to have your messages sent to. Choose a channel from the dropdown and click Allow.

Allow Webhooks Permission in Slack

This will bring you back to the page you were just on, with a new URL underneath the Webhook URLs for Your Workspace section. Go ahead and copy this URL, since we’ll be using it in the next step. Be sure to keep this browser tab/window open, as you’ll need the information in this area later on.

Copy Webhook URL

Next, you’ll need to open up the form you’ll be using your Webhook on. If you haven’t already, make sure to set up your Webhooks addon in WPForms.

Once you’ve activated Webhooks on your form, you’ll see a field labeled Request URL. Paste the URL that you copied over from Slack into this field to connect your forms with Slack’s API.

Add the Request URL in Webhooks

Next, we’ll configure the rest of our settings. We’ve laid all our configured settings below:

Webhooks Slack Integration Settings

  • Request Method: Since we’ll be looking to send data from our forms to Slack, we’ll set this to the POST option.
  • Request Format: We’ll set this to standard JSON.
  • Secret: For our example, we’ll leave this field blank and let the Secret be auto-generated when our Webhook runs. If you’re a developer and you’d like to pass in your own Secret value, you can do that here.
  • Request Headers: We don’t have any specific values we’ll need sent with our request, so we’ll leave this setting blank. When the Webhook runs, the Secret that will be auto-generated will get placed here.
  • Request Body:
    • Key: Since our users will be entering in text to our form, we’ll set this to Text. However, you can name this whatever makes sense for you.
    • Select Field: This setting will be the name of the field whose data you’d like to use. For our example, we’ll be sending the Send Sullie a Message data to Slack.

(Optional) Adding Conditional Logic

Conditional logic allows you to choose whether an action is performed or not based on a user’s choices within a form.

As an example, we’ll show you how conditional logic can be used to send a message to Slack if a user’s message within a form contains the word Help.

To set this up, you’ll need to make sure your form has either a Single Line Text or Paragraph Text field. For our example, we’ll add a Paragraph Text field.

Add a Paragraph Text Field

Then, you’ll need to adjust the label for this field. For our example, we’ll label this field Comment or Message:.

Label Paragraph Text in Webhooks

Next, you’ll need to set up your conditional logic. At the bottom of your Webhooks settings, check the box labeled Enable Conditional Logic to open up configuration settings.

Enable Conditional Logic in Webhooks

Lastly, you’ll need to add the rules for your logic. For our example, we will set things up to show: Send this Webhook if Comment or Message contains help.

Conditional logic for Webhook

That’s it! We just showed you how to set up the Webhooks addon for WPForms.

Next, are you looking for a way to easily transfer your WPForms from one of your sites to another? Check out our tutorial on how to import and export your WPForms!