I use ClickUp to manage all my client tasks for Bellow Creative, so it made sense to push new website form submissions directly into a ClickUp where I can manage all of my leads in one place. But I didn’t want to rely on paid tools or clunky integrations, and I definitely didn’t want to give up control of my data. So I built it myself.
What This Integration Does
- Listens for Elementor form submissions via a custom webhook endpoint
- Processes the form data inside a WordPress REST API handler
- Creates a new task in a specific ClickUp list
- Protects the webhook using a secret key
- Optional: allows for IP restrictions and logging during testing
What You Need
- A WordPress site using Elementor forms
- ClickUp with access to an API key
- The free version of the Code Snippets plugin (or access to functions.php)
Step by Step
Step 1: Gather Clickup Items
Generate Clickup API Token
- Go to ClickUp Settings > Apps
- Generate and copy your personal API token
Find Clickup List ID Token
- Navigate to the list where you want the form submissions to appear
- Copy your list ID, found in the URL:
https://app.clickup.com/12345678/v/l/li/YOUR_LIST_ID
Find Clickup Status Name
- While you’re in the list where you want the form submissions to appear, make note of the specific status you want to give your task when it is created.
- If the status is made up of multiple words, remove spaces and replace with underscores
- For example, “To Do” would be “to_do”.
Step 2: Create a Secret Token
- You can make this anything you want, an example might be “randomly generated word + randomly generated numbers”.
- For example: “Severance5674516”.
- The important thing is that you make it unique and not easy to guess.
Step 3: Create a New Snippet
Add this PHP code using the Code Snippets plugin or in your functions.php file. This creates a custom REST endpoint at /wp-json/form-hook/v1/submit and handles the ClickUp integration.
IMPORTANT: Be sure to edit the following in the code snippet (lines 12, 26, 27 & 32):
- “your-secret-key”
- “YOUR_CLICK_API_KEY”
- “YOUR_LIST_ID”
- “STATUS_NAME”
add_action('rest_api_init', function () {
register_rest_route('form-hook/v1', '/submit', [
'methods' => 'POST',
'callback' => 'handle_elementor_form_submission',
'permission_callback' => '__return_true'
]);
});
function handle_elementor_form_submission($request) {
$form_data = $request->get_body_params();
$expected_key = 'your-secret-key';
$received_key = $form_data['webhook_key'] ?? '';
if ($received_key !== $expected_key) {
return new WP_REST_Response(['error' => 'Unauthorized'], 403);
}
$name = $form_data['Name'] ?? 'No name';
$email = $form_data['Email'] ?? 'No email';
$comment = $form_data['Text_Area'] ?? 'No comment';
$task_title = "New Submission: $name";
$task_description = "**Email**: $email\n\n**Comment**:\n$comment";
$clickup_api_token = 'YOUR_CLICKUP_API_KEY';
$list_id = 'YOUR_LIST_ID';
$task_data = [
'name' => $task_title,
'description' => $task_description,
'status' => 'STATUS_NAME',
'priority' => 3
];
$ch = curl_init("https://api.clickup.com/api/v2/list/$list_id/task");
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Authorization: ' . $clickup_api_token,
'Content-Type: application/json'
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($task_data));
curl_setopt($ch, CURLOPT_POST, true);
$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($http_code === 200 || $http_code === 201) {
return new WP_REST_Response(['success' => true], 200);
} else {
return new WP_REST_Response(['success' => false], $http_code);
}
}
Step 4: Add the Webhook URL to Elementor
In your Elementor form, go to Actions After Submit and add Webhook. Once the new Webhook tab appears, set the Webhook URL to the following:
Be sure to replace yourdomain.com with your actual domain.
https://yourdomain.com/wp-json/form-hook/v1/submit
Step 5: Add the Secret Key to Your Form
To protect your webhook, add a Hidden Field in your Elementor Form:
Field ID: webhook_key
Default Value: your-secret-key (from Step 2)
Step 4: Test It!
Bonus: Update Your Privacy Policy
If you’re collecting data and sending it to ClickUp, it might be important to disclose that. Here’s a snippet I added to my privacy policy:
Form Submissions and Third-Party Services: When you submit information through our website forms, the data is transmitted to ClickUp, a third-party project management platform, to assist in managing and responding to inquiries. The information collected may include your name, email address, website URL, and any other details you provide in the form. This data is used solely for the purpose of addressing your inquiries and is handled in accordance with ClickUp’s Privacy Policy.
Questions?
Leave a comment down below or email us at hello@bellowcreative.com!
