Skip to main content

Connecting AI Page Builder Forms to Your Workflows

This guide will show you how to capture data from your AI Page Builder forms and send it to internal team members via email, route it to external platforms using Webhooks, and even capture hidden URL tracking parameters (like UTM codes).

Written by Swipe Pages

Step 1: Access Your Workflow Dashboard

Once you have created and published your form on your AI Page, you need to set up the automation workflow.

  1. Go back to your Main Dashboard.

  2. From the sidebar menu, click on Campaigns, then select Workflow.

  3. Click on Create New Workflow and give it a recognizable name.

Step 2: Set Up the Form Trigger Node

To ensure your workflow runs whenever a user fills out your form, you need to use the correct trigger.

  1. Add a new node and select Form Submitted (AI Page).

  2. Inside the node settings, select your specific page from the dropdown menu.

Note: Only published pages will appear in this list. If your page is still a draft, it will not show up.

Step 3: Routing Your Data (Choose Your Method)

You can choose where your form data goes. Below are two common examples: routing internally via email, or externally via a webhook.
​

Example A: Send Internal Email Notifications

Use this if you want your internal team to get an email alert every time a new lead is captured.

  1. Add a Send Email Notification node to your workflow.

  2. In the email content field, Parameter All AI Pages Form Event Data automatically grabs all the submitted data from your form and packages it into the email automatically.

  3. If you want to customise make sure you don't remove the Dynamic Tags that is already added. Only Modify the plain text content if needed else Leave as it is.

Example B: Send Data to an External Platform (Webhook)

Use this if you want to pass your lead data to a third-party CRM, database, or external tool.

  1. Add a Webhook node to your workflow.

  2. Paste your external webhook URL.

  3. Map the form fields to your payload data structure to send it out.

Capturing Hidden URL Parameters (UTM Tracking)

If you are running ads and want to capture tracking data (like utm_source, utm_medium, etc.), the AI Page Builder doesn’t have a standard "hidden field" button yet. However, because it is an AI builder, you can simply ask the AI Agent to build it for you!

How to use the prompt:

Copy the prompt below and paste it directly into your AI Page Builder chat.

Important: Change the very first line to match the exact, case-sensitive URL parameters you want to track (e.g., change utm_medium, utm_campaign to whatever your ad links use).

Capture these URL Parameters: utm_source, utm_medium, utm_campaign

For each parameter listed above, do all of the following. Do not remove or change anything already on this page.

1. Add a hidden field to the form for each parameter. Use a text input field that is visually hidden using a CSS class, not a native hidden input type.

2. On page load, read each parameter's value from the URL and use JavaScript to fill its matching hidden field.

3. On form submit, do not rely on automatic form data collection. Instead, explicitly read each parameter's value directly from the URL again and manually inject it into the payload fields object before the form sends.

4. Create a column in the leads table named exactly after each parameter.

5. Explicitly map each parameter's payload value to its matching leads table column when saving the lead.

Confirm when done.

Once the AI Agent confirms it is done, these hidden fields will automatically be saved into your leads table, and they will become available for you to select and map inside your Workflow nodes.

Identifying Which Page the Form Was Submitted From

If you use the same form across multiple pages, it can be hard to know exactly which page generated the lead when you receive your email or webhook notifications.

You can use the AI Agent to automatically create a hidden field that captures the exact URL of the page the user was on when they submitted the form.

How to use the Page URL prompt:

Copy the prompt below and paste it directly into your AI Page Builder chat. You do not need to change anything in this prompt—it is ready to go!

Capture these URL Parameters: current_website_url ( current page url and auto map to this parameter ) Do not remove or change anything already on this page.

1. Add a hidden field to the form for given parameter. Use a text input field that is visually hidden using a CSS class, not a native hidden input type.

2. On page load, read current page URL and use JavaScript to fill given hidden field.

3. On form submit, do not rely on automatic form data collection. Instead, explicitly read each parameter's value directly from the URL again and manually inject it into the payload fields object before the form sends.

4. Create a column in the leads table named exactly for this parameter.

5. Explicitly map parameter's payload value to its matching leads table column when saving the lead.

Confirm when done.

Once the AI Agent confirms it has updated the page, a new data field called current_website_url will be saved with every lead. This field will now automatically be included in your All AI Pages Form Event Data email notification or become available for you to map in your Webhook node!

Disclaimer: AI Agents can sometimes make mistakes or miss a step on the first try. If the tracking doesn't work right away, don't worry! Simply paste the prompt again or tell the AI what is missing. Re-prompting fixes it most of the time.

Did this answer your question?