How to Create Flows Using WebFlow Logic: A Comprehensive Guide

What is WebFlow Logic?

WebFlow Logic empowers users to build and execute automated workflows, referred to as "flows," seamlessly within the Webflow Designer. These dynamic processes enable the collection and routing of sales leads, facilitate customer connections, and effectively manage site content. 

This innovative tool centralizes diverse functionalities, providing a comprehensive solution for directly streamlining tasks such as lead management, customer engagement, and content administration within Webflow.

The importance of WebFlow Logic in creating user flows

The importance of incorporating conditional logic into user flows includes:

User Experience (UX): An easy-to-use and intuitive user experience is facilitated by logic. It guarantees that users can go around the program or website in a predictable and logical manner.

Task Completion: By creating coherent user flows, you may lead users through the procedures required to finish particular activities or actions. Due to the decreased friction, users can accomplish their objectives more easily.

Efficiency: Logical user flows contribute to the efficiency of the user interaction. Users should be able to move from one section to another with minimal confusion, reducing their time to accomplish their tasks.

Error Prevention: Well-designed user flows can help prevent errors or misunderstandings by guiding users through a process in a clear and structured way. This integration platform can reduce the likelihood of users making mistakes.

Consistency: Conditional logic in user flows ensures consistency across different sections of the website or application. Consistent interactions and navigation patterns facilitate users' development of a mental model of the system.

Engagement: Logical and well-designed user flows contribute to user engagement. Users are likelier to find what they're looking for when browsing information or features on a website or application.

Accessing Webflow Logic

Here are the step-by-step instructions to access the Webflow Logic dashboard:

1. Open your Webflow project in the Webflow CMS Designer.
2. In the left toolbar, look for the Logic icon. It typically appears as an icon representing logic or workflows.
3. Click on the Logic icon. This action will open the Logic panel on your screen.
4. Within the Logic panel, you will find various tabs. Click on the "New flow" tab.
5. In the Flows tab, you can view high-level information about your flows. This information may include the flow name, description, Flow ID, and other relevant details.
6. To create, manage, or test flows, use the Flow editor, which is accessible from the Flows tab.

How to Create Flows Using WebFlow Logic - An Easy Guide

WebFlow Logic allows you to design dynamic and interactive experiences on your website. Follow this simple guide on how to create flows using WebFlow logic to create flows effortlessly:

Creating a new flow

Creating flows using WebFlow Logic involves a step-by-step process:

Initiate Flow Construction:

Start by creating and constructing flows, which are conditional logic sequences composed of triggers, actions, and conditions. Access the Flow editor by navigating to the Logic panel > Flows tab and selecting "New flow." This opens the Flow editor, where you can build the logic for your flows.

Configure Flow Settings:

Within the Flow editor, you'll find Flow settings. Provide your new flow with a name and description to clearly define its purpose and distinguish it from other flows. Additionally, note the Flow ID, which is essential for troubleshooting. In an example scenario, the flow name might be "Route contact form submissions" with a description like "Direct contact form submissions to the appropriate mailbox."

Construct the Flow:

Begin constructing your flow by selecting a trigger. Drag and drop actions and utilities onto the Flow editor canvas, connecting them to the appropriate points. These webflow integration connection points signify where blocks can be inserted, representing triggers, actions, or conditions. By carefully arranging these elements, you can design a logical sequence that guides the flow's behavior according to your specified triggers and conditions.

Constructing a flow with triggers, actions, and conditions

Step 1: Triggers

Initiate your Logic flow by incorporating a trigger, the catalyst for your automated sequence. This trigger could be an event within your website, such as form submissions, or an external occurrence signaled through a webhook. 

Select a trigger and configure its settings accordingly, providing a distinctive name for clarity. 

Note that each flow can accommodate only one trigger, and you have the flexibility to modify or remove it as needed. Examine the Trigger settings to see the output data that is shared with the flow's next blocks.

Step 2: Form Submission

If your trigger revolves around Form submission, add a form to your website. Link this Form to your flow trigger so that the flow activates when visitors submit the Form. Remember that a form can only serve as a trigger for one Logic flow. 

Navigate through the Flow editor to select the specific Form, or utilize the Designer canvas to add a Form submission trigger. 

You can easily disconnect a form from the trigger by accessing the Flow editor and navigating to the Trigger settings. Optionally, spam filtering can be implemented to sift through flow form submissions for potential spam.

Step 3: Actions

Action blocks within your Logic flow dictate the sequence of events you want to occur. These blocks can accept input data, execute logical operations, and generate output data for subsequent blocks. 

The available action blocks include sending email notifications, creating, updating, or deleting CMS items, searching for CMS items, making HTTP requests, and managing user accounts. 

Analyze the output data of these action blocks in the Block settings to understand the information shared with subsequent elements in the flow. Tailor your actions to streamline and automate your desired workflow effectively.

Testing a flow

After ensuring the right configuration and smooth execution of your flow, it's essential to conduct testing before publishing. This process also aids in identifying and resolving any potential issues within the flow. Follow these steps to test your flow:

1. Open the Flow editor and navigate to the upper right corner.
2. Click on "Test flow" to initiate the testing process. This action will open a modal menu window.
3. In the modal menu, input sample data relevant to the connected trigger of your flow. For instance, if you have a Form submission trigger, fill out a sample flow form.

To independently test the Make HTTP request blocks, follow either of these options:

1. Click on the Right button on the Make HTTP request block and choose "Test this action."
2. Select the Make HTTP request block on the canvas, then click "Run test" within Block settings. It will open a modal menu where you can input sample data for the values configured in Block settings.
3. After entering the sample data, click "Run test" to execute a test of the specific block. These test results will be displayed in the modal menu window.
4. Review the results and, if satisfied, click "Apply data" to integrate the test response into the rest of your flow.

Publishing a flow

The procedure for publishing your flow varies based on the trigger used to initiate it, such as flow form submission or Incoming webhook. If your flows operate independently of site interactions, you can handle their publishing separately from site publishing.

Publishing a Form Submission Flow:

1. Choose the flow form that starts your flow from the Form menu in the Flow editor.
2. To publish your flow on the next full site update, click "Publish" and then select "Stage flow for publish."
3. Alternatively, for an immediate removal from your live site, click "Publish" and then choose "Unpublish Flow."
4. Note: If any flows have unresolved issues, an alert modal will appear during site publishing. Resolve issues before proceeding, as unresolved flows will be disabled.

Publishing an Incoming Webhook Flow:

Flows using Incoming webhook triggers may not require site publishing. Two options for publishing Incoming webhook flows:

1. For immediate visibility on your live site, click "Publish" and select "Publish flow now."
2. To include it in the next full site update, click "Publish" and choose "Stage flow to publish."
3. Click "Publish" in the Flow editor to push new changes live without updating the full site. However, future updates will not be shown on the live site until you click "Publish" so keep that in mind.
4. For an immediate removal from your live site, click "Publish" and then select "Unpublish flow."

Renaming, duplicating, and deleting flows

Steps for Renaming, Duplicating, and Deleting Flows:

1. Locate the flow you want to manage.
2. Find the dropdown arrow menu positioned next to the flow name.
3. In the dropdown menu, choose the desired action:

1. To rename the flow, select the "Rename" option.
2. To duplicate the flow, choose the "Duplicate" option.
3. To delete the flow, click on the "Delete" option.

FAQ and troubleshooting tips

Here are some common questions and troubleshooting tips to help you create flows in WebFlow Logic:
General Questions:

How many action blocks or conditional rules may I utilize in a single flow?

You can incorporate up to 50 blocks in a single flow, including conditional blocks. When the limit is surpassed, an error message stating "Maximum number of 50 blocks reached" will be shown.

Does my site/workspace plan include Logic?

Logic is available independently and does not require a specific site or Workspace plan. However, certain plans may offer increased usage limits or allow for the creation of more flows.

What are the basic building blocks of a flow?

The basic building blocks of a flow are triggers, actions, and conditions. 

1. Triggers: Events that initiate a flow (e.g., form submission, button click).
2. Actions: Tasks performed within a flow (e.g., sending emails, making HTTP requests).
3. Conditions: Rules that control flow execution (e.g., if a field's value equals X)

Troubleshooting Tips:

Help! I am unable to modify my flow!

If you're using a form submission trigger, ensure that you have published your site after connecting your flow to the Form or making any form-related changes. Once your site is published, clicking "Stage for publish" will change your flow during the next full site publish.

HTTP request blocks aren't working.

Structure requests correctly: Ensure proper URL, headers, and authentication.

Flow still not working after troubleshooting.

Submit a bug report: Include a screen recording and Flow ID to Webflow's Logic Bug and Feedback Form.