Would you like to send data from your WordPress forms to a third-party app or plugin? With the 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
- Example: Using Webhooks to Connect WPForms to ConvertKit
- Adding Conditional Logic (Optional)
- 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 addon available for it yet.
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.
Another option is our Uncanny Automator integration. This feature enables you to make connections between supported apps and services.
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 you get started, you’ll first need to make sure that WPForms is installed and activated on your WordPress site.
Once WPForms is installed and your license is verified, you’ll be able to quickly install and activate the Webhooks addon.
Setting Up a Webhook
Once the 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 one.
After opening the form builder, you can enable webhooks under Settings » Webhooks. From here, toggle the Enable Webhooks option 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 and fill out the settings for each additional connection.
Below the name of your webhook, you’ll see all available settings for this connection. We’ve outlined what each of these does below.
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 submitted form and send the 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 runs.
- PATCH: The PATCH method lets you replace data when your webhook runs.
- DELETE: The DELETE method enables you to delete information when this specific webhook runs.
Request Format
The Request Format will communicate to your server what type of data is being sent through 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 ascharset=utf-8. - FORM: The FORM method will format your data in an
application/x-www-form-urlencodedformat, and will set the content type ascharset=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
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.
Note: In most cases, 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 APIs as a way to verify a request’s origin.
Request Headers
Request Headers 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 lets you define the key(s) and value(s) that will be sent in the body of your webhook’s request.
Note: For separating multiple values in fields like Address, Dropdown, Checkboxes, etc., WPForms uses two vertical slashes (like so: ||).
Example: Using Webhooks to Connect WPForms to Slack
As an example, we’ll walk you through how to connect WPForms to your Slack account using a webhook.
Note: This example walks through how to send a single form field to Slack. If you’d like to send multiple fields to Slack, be sure to check out our developer documentation for more details.
Creating Your Slack App
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’ll need to select how you’d like to configure your app. Choose the From scratch option.
You’ll then be able to name your app and select which workspace you’d like to send form data to. For our example, we’ll name our app Contact Sullie. Click the Create App button to proceed.
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.
Once 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.
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 send your messages to. Choose a channel from the dropdown and click Allow.
This will bring you back to the previous page. You’ll see a new URL in the Webhook URLs for Your Workspace section. Go ahead and copy this URL, as you’ll be using it in the next step.
Be sure to keep this browser tab or window open, as you’ll need the information in this area later on.
Adding Your Slack Webhook to a Form
Next, you’ll need to open up the form you’ll be using your webhook in. If you haven’t already, make sure to set up your Webhooks addon in WPForms.
Once you’ve activated webhooks for your form, paste the URL that you copied from Slack into the Request URL field to connect your form with Slack’s API.
Next, configure the rest of the webhook settings. We’ve laid out all our configured settings for this example 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 auto-generate when our webhook runs. If you’re a developer and you’d like to enter your own Secret value, you can do so here.
- Request Headers: We don’t have any specific values we need to send with our request, so we’ll leave the Request Headers setting blank. When the webhook runs, the auto-generated Secret will be placed here.
- Request Body:
- Key: Enter text in the Request Body parameter key field as the form will be sending information in plain text. Failing to enter text as the value for this field will likely cause an error in your connection.
- Select Field: The Select Field setting will be the name of the field whose data you’d like to send. For our example, we’ll be sending the Comment or Message field’s data to Slack.
Remember to save your changes before leaving the form builder. We also recommend testing your form to make sure your webhook is working properly once you’ve set it up.
Example: Using Webhooks to Connect WPForms to ConvertKit
Here’s another example of how to connect your site to ConvertKit with webhooks to collect subscribers with WPForms.
Setting Up Your ConvertKit Form
Like many Customer Relationship Management (CRM) platforms, ConvertKit has its own form builder you can use to collect subscribers. However, this tool only lets you add 2 fields to your form (First Name and Email), which can be very limiting.
By connecting WPForms to ConvertKit, you can build your subscriber list from any type of form, and gather additional information about your users, too.
To connect WPForms to ConvertKit, you’ll still need to create a form in your ConvertKit account. You’ll then use a webhook to send data from your WordPress form(s) to your ConvertKit form.
First, log in to your ConvertKit account. Then go to Grow » Landing Pages & Forms in the toolbar menu.
On the next screen, select the Create a Form button.
Note: If you’ve already created a subscription form in ConvertKit, you can use your existing form to set up your webhook. Simply open your ConvertKit form for editing, then continue with the steps below.
If you’ve already created a form but want to set up a new one for this connection, your screen will look different from the one pictured above. Click the + Create New button to proceed.
ConvertKit will then give you the option of 4 different types of forms: Inline, Modal, Slide in, and Sticky Bar.
Since you’re not going to display this form, it doesn’t really matter which option you select here. Likewise, you can choose any form template on the next screen. Your users won’t see it, so pick any design you like.
Once you make it to the form builder, you can choose whether you want to collect users’ first names and email addresses, or only their email addresses. Add the relevant field(s). You don’t need to make any other changes here, since your users won’t see this form.
Note: For help using ConvertKit’s form builder, please see its documentation on creating a new form.
Click on the Save button in the top right corner of the builder when you’re done. Leave this page open in a separate browser tab or window, as you’ll need to refer back to it to set up your webhook in WPForms.
Adding Your ConvertKit Webhook to a Form
In your WordPress admin area, create a new form or open one for editing to access the form builder.
After you’ve added and customized your fields, head to Settings » Webhooks to enable webhooks and add a new connection. Then fill out the settings as follows.
Request URL
Your webhooks request URL should be https://api.convertkit.com/v3/forms/<form_id>/subscribe, where <form_id> is the form ID for the form you created in ConvertKit. You can find this value by looking at the browser address bar when your form is open in the ConvertKit form builder.
Enter this value into the Request URL field in your webhook’s settings.
Request Method and Format
Since you’ll be sending data from your form to ConvertKit, you should set the Request Method to POST.
For the Request Format, use the standard JSON.
Secret
For the Secret value, you’ll need to find the API secret for your ConvertKit account.
In your account dashboard, click on the arrow next to your avatar in the top right corner of the screen and select Settings from the menu that appears.
In the list of settings on the left side of the next screen, click Advanced.
This page will include the API information for your account. Under API Secret, click Show.
Copy the value that’s revealed and paste it into the Secret field in your webhook’s settings.
Request Headers and Body
No request headers are needed to connect your site to ConvertKit, so leave this field empty.
For the Request Body fields, you need to enter your ConvertKit API key and map the fields from your WPForms to your ConvertKit form.
First, go back to your ConvertKit account’s advanced settings and copy your API key.
In your webhook’s settings, enter api_key in the first field under Request Body. From its corresponding dropdown, select Add Custom Value.
Then paste your API key into the field provided. We also recommend checking the Secure? option next to this field to obscure your key.
Next, click on the blue plus (+) icon next to your API key to add another request body value. In the field on the left, enter email. Then select your form’s Email field from the dropdown.
If you included a First Name field in your ConvertKit form, you can also map this value. Add another set of fields to the request body by clicking on the plus (+) icon next to your email fields. Then enter first_name in the field on the left and select your Name field from the dropdown.
When you’re done configuring your webhook, be sure to save your form.
Viewing Subscribers in ConvertKit
Once you’ve created your ConvertKit webhook, you can start collecting subscribers. Any time a user submits your form, they’ll receive an email from ConvertKit asking them to confirm their subscription.
If they click the Confirm your subscription button in the email, they’ll be added to your ConvertKit list. You can view all your subscribers by going to Grow » Subscribers in your ConvertKit dashboard.
We highly recommend submitting a test entry using an email address you have access to so you can make sure your webhook is working properly.
Adding Conditional Logic (Optional)
Conditional logic allows you to choose whether or not an action is performed based on a user’s choices in your form.
As an example, we’ll show you how you can use conditional logic to send a message to Slack if a user submits an entry to our contact form with a message that 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 message input 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 Slack webhook’s settings, toggle on the option labeled Enable Conditional Logic to reveal the dropdowns to create your rule.
Then add the rule for your conditional logic. For our example, we’ll set the dropdowns to read, Send this webhook if Comment or Message contains help.
Note: Need help setting up your conditional logic rule? Our beginner’s tutorial on using conditional logic in WPForms has all the details.
As always, remember to save your form before you leave the builder.
Frequently Asked Questions
These are some of the top questions we see related to the Webhooks addon.
How can I use Smart Tags in the Request Header and Request Body?
Smart Tags can be used to dynamically insert information into your form’s request header and request body.
To use Smart Tags, select Add Custom Value from the Request Headers dropdown from your webhook’s settings, then add the Smart Tag as the parameter key. You can repeat the same step for the Request Body setting.
For a complete list of Smart Tags that can be used, be sure to check out all the available Smart Tags in WPForms.
That’s it! Now you know how to set up the Webhooks addon for WPForms.
Next, are you looking for a way to easily transfer your WPForms from one site to another? Check out our tutorial on how to import and export your forms.
