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 great for all user levels because it uses a wizard-style setup, which walks you through every step needed to connect your forms to a separate service.

For more advanced users, the Webhooks addon offers very similar capabilities without the need for any connector service. However, 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.

Once you’ve got WPForms installed and your license is verified, you’ll be able to quickly install and activate the Webhooks addon.

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 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

The Request URL 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

The Request Method 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: The GET method will grab information from a secondary service and send those details to WPForms.
  • POST: The POST method will take the information submitted through WPForms and send it to a secondary service.
  • PUT: The PUT method allows you to update data when your Webhook is run.
  • PATCH: The PATCH method allows you to replace data when your Webhook runs.
  • DELETE: The DELETE method allows you to delete information when this specific Webhook is run.

Request Format

The Request Format 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: The JSON method will format your data in an application/json format, and will set the content type as charset=utf-8.
  • FORM: The FORM method 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 the Secret setting. The Secret setting 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

The Request Header 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, the Request Body 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

Now that you’ve enabled the Incoming Webhooks setting, 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 the Request URL 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 the Request Method to the POST option.
  • Request Format: We’ll set the Request Format to standard JSON.
  • Secret: For our example, we’ll leave the Secret field blank and let it 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 the Request Header 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 the Request Body Key to Text. However, you can name this whatever makes sense for you.
    • Select Field: The Select Field 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 the Paragraph Text field. For our example, we’ll add the label 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

Last, 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

Frequently Asked Questions

I’d like to connect my forms to Google Sheets using the Webhooks addon. How can I do that?

Due to the complexity of Google’s requirements (including how data they receive should be formatted, as well as the level of permissions that would need to be granted), using Webhooks to connect with Google Sheets isn’t feasible at this time.

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!