Integrated Webhooks - Creating leads via Elementor Forms
This example shows how to configure a form in Elementor (a WordPress plugin) to send a webhook to SprintHub and automatically create leads when filled out.
Understanding the Form Fields
When editing a form element, a mapping of the fields will be displayed. These fields will be sent to the Sprinthub webhook, with the label names used as keys in the JSON. The webhook generated by the configuration below will have the following format:
{
"Name": "Enki Sprinthub",
"Email": "enki@sprinthub",
"Message": "Olá, gostaria de saber mais sobre a plataforma"
}
Form fields.
Mapping the Webhook inside Sprinthub
A passive webhook was created in Sprinthub to receive the data sent by this external form. The request body mapping must match exactly the format mentioned earlier, with identical names. The request method was configured as POST, using the 'Email' field as the lead identifier. This prevents duplicate leads and allows identifying leads that already exist in the system.
Webhook mapping.
Elementor Forms - Adding Webhook action
You need to add the 'Webhook' action to the form in the 'Actions After Submit' option. This will allow inserting the webhook link configured in Sprinthub.
Adding Webhook action.
Adding the 'Webhook URL' with the access_token.
In the 'Webhook URL' field, enter the webhook link generated in Sprinthub, available on the left side of the page. Then add the access_token as a query parameter using the character &. The link will have the following format:
URL inside Sprinthub.
Field to insert the URL in Elementor.
Configuring Automatic Lead Creation
Finally, in the 'Automatic Lead Creation' section, enable the 'Enable automatic creation?' option. Make sure the lead fields are properly mapped to match the data received by the webhook. After saving and closing, the webhook will be configured to register leads directly from your WordPress platform with Elementor.
