Integrate Elementor Form

Prerequisites#

WordPress with Elementor Pro installed (the free version of Elementor does not support webhooks)
Access to the Elementor editor on the page with the form
Your Zero Bad Leads API Key (see Configure webhook)

The webhook action is only available in Elementor Pro. If you use the free version, consider using an intermediary plugin like WPForms or a generic webhook plugin.

Setting up the integration#

Create your API Key in Zero Bad Leads

Go to Receive Leads → API Keys in the Zero Bad Leads sidebar. Click "New API Key", give it a descriptive name (e.g., "Elementor Form") and copy the generated key.

Open the form in Elementor

In WordPress:

Go to the page that contains the form
Click "Edit with Elementor"
Click on the Form widget to select it

Configure field IDs

Before setting up the webhook, it's important to ensure the fields have clear IDs:

In the side panel, go to the Content → Form Fields tab
For each field, click to expand and locate the ID field
Rename the IDs to recognizable names:

Form field	Recommended ID
Name	`name`
Email	`email`
Phone	`phone`
Company	`company`
Message	`message`

The field IDs in Elementor determine the key names sent in the webhook. Using IDs like "name", "email", and "phone" ensures that Zero Bad Leads maps the fields automatically without extra configuration.

Add the webhook action

Still in the form panel:

Go to the Content → Actions After Submit tab
Click "Add Action" and select "Webhook"
A new "Webhook" section will appear below

Configure:

Field	Value
Webhook URL	`https://ctmhfalurdthlddaprfd.supabase.co/functions/v1/webhook-receiver`

Elementor automatically sends via POST method. There is no need to configure the method separately.

Configure advanced headers

To add the API Key to the header:

In the Webhook section, click "Advanced"
Under Additional Headers, add:

x-api-key: YOUR_API_KEY_HERE

Replace YOUR_API_KEY_HERE with the API Key you copied in step 1.

Save and publish

Click "Update" to save the changes in Elementor
Publish or update the page

Test the integration

Open the form page in an incognito window
Fill out the form with test data
Submit the form
Go to Leads in Zero Bad Leads and check if the lead appeared

Use an incognito window for testing. This simulates the real visitor experience and avoids browser cache.

Elementor data format#

Elementor sends data in the following format:

{
  "form_name": "Contact form",
  "form_id": "abc123",
  "fields": {
    "name": {
      "id": "name",
      "type": "text",
      "title": "Name",
      "value": "John Smith",
      "raw_value": "John Smith"
    },
    "email": {
      "id": "email",
      "type": "email",
      "title": "Email",
      "value": "john@company.com",
      "raw_value": "john@company.com"
    },
    "phone": {
      "id": "phone",
      "type": "tel",
      "title": "Phone",
      "value": "+1 (555) 123-4567",
      "raw_value": "+1 (555) 123-4567"
    }
  }
}

Zero Bad Leads automatically recognizes the Elementor format and extracts the values from each field. The form_name field is saved as lead metadata.

Additional tips#

Multiple forms on the same page: Each form can have its own webhook action. You can use the same API Key or create different keys to identify the source.

Conditional fields: If you use conditional fields in Elementor, only the visible and filled fields will be sent in the webhook.

Selection fields (dropdown/radio): Selected values are sent as text. Zero Bad Leads saves the selected value in the corresponding field.

Troubleshooting#

The lead doesn't appear in Zero Bad Leads:

Check that the "Webhook" action is in the Actions After Submit list
Confirm that the webhook URL is correct (no extra spaces)
Verify that the x-api-key header is configured in the Advanced section

Error when submitting the form:

Open the browser console (F12 → Console) to see network errors
Check that Elementor Pro is active and has a valid license
Test the webhook URL using a tool like webhook.site to confirm it responds