Webhooks Addon

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.

This tutorial will show you how to install and use the Webhooks addon with WPForms.

Requirements:


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 you need an integration, 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 similar capabilities without 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.

Enabling webhooks for a form

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.

Renaming a webhook connection

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.

Adding a new webhook connection to a form

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

The webhooks settings in the form builder

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

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.

Creating an app in Slack

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.

Selecting the From Scratch app option in Slack

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.

Creating an app in Slack

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.

Adding an incoming webhook in Slack

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.

Activating incoming webhooks in Slack

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

Adding a new webhook to a Slack workspace

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.

Choosing a Slack channel to connect your webhook to

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.

Copying the webhook URL in Slack

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.

Adding the Request URL for a Slack app in the webhooks settings for a form

Next, configure the rest of the webhook settings. We’ve laid out all our configured settings for this example below:

Example settings for a Slack webhook

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

Opening the Landing Pages & Forms screen in your ConvertKit dashboard

On the next screen, select the Create a Form button.

Creating a new form in ConvertKit

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.

Choosing a format for a ConvertKit form

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.

Choosing a ConvertKit form template

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.

Adding a First Name field to your ConvertKit 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.

Finding a ConvertKit form ID

Enter this value into the Request URL field in your webhook’s settings.

Entering your ConvertKit Request URL in your webhooks settings

Request Method and Format

Since you’ll be sending data from your form to ConvertKit, you should set the Request Method to POST.

Setting the Request Format and Request Method for a ConvertKit webhook

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.

Opening the ConvertKit settings

In the list of settings on the left side of the next screen, click Advanced.

Accessing the ConvertKit advanced settings

This page will include the API information for your account. Under API Secret, click Show.

Revealing your ConvertKit API secret

Copy the value that’s revealed and paste it into the Secret field in your webhook’s settings.

Pasting your ConvertKit API secret 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.

Copying your ConvertKit 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.

Adding a custom value to the request body of a webhook

Then paste your API key into the field provided. We also recommend checking the Secure? option next to this field to obscure your key.

Pasting your ConvertKit API key in your webhook's request body custom value field

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.

Mapping your form's Email field to your ConvertKit form via a webhook

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.

Mapping your form's Name field to your ConvertKit form via a webhook

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.

A ConvertKit subscriber confirmation email

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.

A ConvertKit subscriber list

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.

Adding and editing the options for a conditional Paragraph Text field

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.

Enabling conditional logic for a webhook connection

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.

A conditional logic rule for a webhook

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.

Using Smart Tags in Request Header and Request Body

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.