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.
- What are Webhooks?
- Installing the Webhooks Addon
- Setting Up a Webhook
- Example: Using Webhooks to Connect WPForms to Slack
- (Optional) Adding Conditional Logic
- Frequently Asked Questions
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.
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.
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.
Additionally, if you’d like to add more Webhooks, you can click the button labeled 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.
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.
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 submitted form and send those details to a connected app.
- 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.
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/jsonformat, and will set the content type as
- FORM: The FORM method will format your data in an
application/x-www-form-urlencodedformat, and will set the content type as
Note: Data is typically sent in JSON format, as this will make things easier to change server-side (including validation, formatting, and sanitization changes).
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.
The Request Header will allow you to define the HTTP header’s key(s) and value(s) to be sent with your Webhook request.
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.
Note: This example will walk through how to send a single form field to Slack. If you’d like to send multiple fields within Slack, be sure to check out our developer documentation for more details.
First, you’ll need to navigate to Slack’s API page. Then, click on the Create an App button.
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.
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.
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.
Next, underneath the Webhook URLs for Your Workspace section, click the Add New Webhook to Workspace button.
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.
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.
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.
Next, we’ll configure the rest of our settings. We’ve laid all our configured settings below:
- 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.
- 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.
Then, you’ll need to adjust the label for the Paragraph Text field. For our example, we’ll add the label Comment or Message:
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.
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.
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!