---
title: "Building a Webflow"
slug: "building-a-webflow"
updated: 2023-09-11T12:52:53Z
published: 2023-09-11T12:52:53Z
canonical: "kb.easysend.io/building-a-webflow"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://kb.easysend.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Building a Webflow

## 

## Article Overview

This article describes how to add a new business group and process and how to create a new Webflow. The article also details how to add components to a Webflow and how to configure its properties. The article also lists malfunctions that may occur when trying to perform the actions described in this article and their solutions.

NOTEIf you want to skip to our How to Videos section and quickly learn how to use the different components when creating a Webflow, click [here](/v1/docs/building-a-webflow#how-to-videos).

## 

## Add a New Business Group

(See **Figure 1** to **Figure 3**)

To add a new business group, perform the following steps:

1. On the **Process Manager** screen (1), click the **+New Business Group** button (2).

![On the Process Manager screen, click the +New Business Group button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655721332676.png)

- **Figure 1: + New Business Group Button**

*Result:* The **Business Group** window appears:

![Enter the name of the new business group. Click the OK button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/builder-overview-2-image-2agpozf5.png)

**Figure 2: Business Group Window**

1. Enter the **name** (3) of the new business group.
2. Click the **OK** button (4).

*Result:* The new business group is added (5):

![The new business group is added. ](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1685863780653.png)

**Figure 3: New Business Group**

## Add a New Process and Create a New Webflow

(See **Figure 4** and **Figure 5**)

To add a new process and create a new Webflow, perform the following steps:

1. Click the desired business group from the list (1).

![Click the desired business group from the list. The number of processes the business group has appears. The + New Process becomes enabled. A request to add the first process appears.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1685864291419.png) **Figure 4: Selected Business Group**

*Result:*

- The number of processes the business group has appears (2).
- The **+ New Process** (3) becomes enabled.
- A request to add the first process appears (4).

NOTE

If the business group already contains processes, once a business group is selected, its processes will be displayed in a list instead of the request to add a new process.

1. Click the **+ New Process** (3 or 4).

*Result:* The **Create a Process** window appears:

![Enter the name (5) of the new process (it will be the name of the Webflow as well). Click the OK button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/builder-overview-2-image-go5ad31i.png)

**Figure 5: Create a process Window**

NOTEThe Process Name is limited to 100 characters.

1. Enter the **name** (5) of the new process (it will be the name of the Webflow as well).
2. Click the **OK** button (6).

*Result:*

The Webflow main screen appears.

NOTE

- Within a process, a Webflow name must be unique.
- The Webflow name is only displayed internally.
- The Webflow Name is limited to 100 characters.

## 

## 

## 

## Selecting a Theme

(See **Figure 6** to **Figure 8**)

To select a digital process theme, perform the following steps:

![Process Settings Icon.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681738515809.png)

**Figure 6: Process Settings Icon**

1. Click the Process Settings icon (1).

*Result:*

The Process Settings screen appears:

![Click the Webflow section (with the desired Webflow name) dropdown.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681738718462.png)

**Figure 7: Webflow Dropdown**

1. Click the Webflow section (with the desired Webflow name) dropdown (2).

*Result:*

The Webflow section options appear:

![Click the Theme dropdown and select the desired theme from the list.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681738850973.png)

**Figure 8: Selecting a Theme**

1. Click the Theme dropdown (3) and select the desired theme from the list (4).

## Adding Components

(See **Figure 9** and **Figure 10**)

When building a new Webflow only the page components will be available to add to the canvas at first, either by drag and drop (1) or by clicking the Add a new page button (2) and then clicking the appropriate component (3).

![When building a new Webflow only the page components will be available to add to the canvas at first, either by drag and drop or by clicking the Add a new page button and then clicking the appropriate component. ](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681047178702.png)

**Figure 9: Adding Page Components**

Once one of the page components is added the rest of the components become available and can be added on top of them by a drag and drop.

**![Adding All Components.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681047404006.png)**

**Figure 10: Adding All Components**

NOTEAdditional page components can be added at any time by drag and drop.

#### 

## 

#### 

## 

## Configuring the Properties Section

(See **Figure 11** and **Figure 12**)

To configure the properties of an added component, perform the following steps:

![Click the desired component from the components added to the canvas.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681739179268.png)

**Figure 11: Added Components**

1. Click the desired component from the components added to the canvas (1).

*Result:*

The Properties section appears:

![ Example Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681739231675.png)

**Figure 12: Example Properties Section**

1. Edit the desired properties.
2. Connect the component to the Model (for additional information see the [Setting Up the Model](/v1/docs/setting-up-the-model) article).
3. Repeat steps **1** to **3** for every added component.

## 

## Troubleshooting

**Table 1** describes malfunctions that may occur when trying to create a Webflow, adding components, and editing properties. The table also describes the reason/s for the malfunctions and provides possible solutions.

**Table 1: Troubleshooting**

| **Number** | **Malfunction** | **Reason/s** | **Solution/s** |
| --- | --- | --- | --- |
| 1 | A Webflow is not created automatically when creating a new process | A Webflow with the same name already exists in the environment | Create a new Webflow according to the instructions described in the [How to Create a Webflow](/v1/docs/building-a-webflow#how-to-create-a-webflow) section |
| 2 | Most of the components are disabled | A page was not added yet | Add components according to the instructions described in the [Adding Components](https://kb.easysend.io/docs/building-a-webflow#adding-components-) section |
| 3 | Some Components are missing, or their design is incorrect | The wrong theme is selected | Select the appropriate theme according to the instructions described in the [Selecting a Theme](https://kb.easysend.io/docs/building-a-webflow#selecting-a-theme) section |
| 4 | The components in the grid displayed in the wrong direction | The properties of the Grid component are not set correctly | Set the properties of the Grid component. Read the details described in the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 5 | Problem displaying the Webflow on a mobile device | The direction property of the Grid component is not set correctly | Set the properties of the Grid component. Read the details described in the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 6 | Cannot add certain components like buttons, Multiple Choice, and other components to the canvas | Must of the components can only be add onto a Main Page, Greeting Page, and Container components | Add components according to the instructions described in the [Adding Components](https://kb.easysend.io/docs/building-a-webflow#adding-components-) section |
| 7 | The buttons on the Main Page do not appear | The buttons properties of the Main Page are not set correctly | Set the button properties of the Main Page component. Read the details described in the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 8 | The Co-browsing button does not appear | The Co-browsing property of the Main Page are not set correctly | Set the Co-browsing property of the Main Page component. Read the details described in the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 9 | The value of the Radio Question options is not returned correctly | The Text and the Value of the Radio Question component options does no match | Set the options of the Radio Question component. Read the details described in the [Single Select Components Properties](/v1/docs/multiple-choice-components-properties) article |
| 10 | The image for the Dynamic Image component does not exist | - The image was not uploaded to the selected theme beforehand - The wrong theme is selected | - Upload the images to the theme (for additional assistance with the theme please contact our support team) - Select the appropriate theme according to the instructions described in the [Selecting a Theme](https://kb.easysend.io/docs/building-a-webflow#selecting-a-theme) section |
| 11 | The Br Component height is not applied | The height of the Br component is not written correctly | The height of the Br component must contain a number followed by px, for example: 10px. For additional information see the [Other Components Properties](/v1/docs/other-components-properties) article |
| 12 | Cannot upload files | The file type is not written in the acceptFileTypes property | Write the type of the file in the acceptFileTypes property. For additional information see the [Input Components Properties](/v1/docs/input-components-properties) article |
| 13 | The text direction of the Text Input component is wrong | The textDirection property of the Input Text component is not set to the appropriate direction | Set the appropriate text direction. For additional information see the [Input Components Properties](/v1/docs/input-components-properties) article |
| 14 | There is a limit on the number of characters allowed to input into the Text Input component | The maxLength property of the Input Text component is not set to the appropriate direction | Set the appropriate maximum length. For additional information see the [Input Components Properties](/v1/docs/input-components-properties) article |
| 15 | The numbering of the Progress Bar Steps are wrong | The numbering steps of the Progress Bar component have an offset of +1 | Set the first step of the Progress Bar component to zero. For additional information see the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 16 | The Preview component prevents from deploying the Webflow | The Preview component must be connected to a PDF form | Connect the Preview Component to a PDF form. For additional information see the [Media Components Properties](/v1/docs/media-components-properties) article |

## How to Videos

To quickly learn how to use different components to create a Webflow, watch the following videos.

### Container Components

To quickly learn how to use Container components watch the following videos.

- Container Component:

[Embedded content](https://www.youtube.com/embed/CSMu7ogy660?&wmode=opaque&rel=0)

- Grid Component:

[Embedded content](https://www.youtube.com/embed/6FZWBfmBy9w?&wmode=opaque&rel=0)

### Labels and Nun Input Components

To quickly learn how to use Labels and Nun Input components, watch the following videos.

- Preview:

[Embedded content](https://www.youtube.com/embed/PlZdizY7MRk?&wmode=opaque&rel=0)

- Rich Text:

[Embedded content](https://www.youtube.com/embed/2XaLGYFRy8I?&wmode=opaque&rel=0)

### Multiple Choice Components

To quickly learn how to use Multiple Choice components, watch the following videos:

- Checkbox Component:

[Embedded content](https://www.youtube.com/embed/TdSjl4XDa34?&wmode=opaque&rel=0)

- Radio Question:

[Embedded content](https://www.youtube.com/embed/qS5-dV_6Hc4?&wmode=opaque&rel=0)

### Other Components

To quickly learn how to use Other components, watch the following videos.

- Text Input:

[Embedded content](https://www.youtube.com/embed/APf1aM_WDKg?&wmode=opaque&rel=0)

- Dynamic Image:

[Embedded content](https://www.youtube.com/embed/O05lCoBxTBA?&wmode=opaque&rel=0)

- Upload Component:

[Embedded content](https://www.youtube.com/embed/ljhIx1gArj0?&wmode=opaque&rel=0)

- Signature:

[Embedded content](https://www.youtube.com/embed/omheh2Pt52U?&wmode=opaque&rel=0)

- Date Input:

[Embedded content](https://www.youtube.com/embed/JWxJe_smHeQ?&wmode=opaque&rel=0)

### Page and Sections Components

To quickly learn how to use Page and Sections components, watch the following videos.

- Greeting Page:

[Embedded content](https://www.youtube.com/embed/3mWo1Pkw4zc?&wmode=opaque&rel=0)

- Main Page:

[Embedded content](https://www.youtube.com/embed/lecAuYOJW2U?&wmode=opaque&rel=0)

- Main Section:

[Embedded content](https://www.youtube.com/embed/MEwgk4rUjXg?&wmode=opaque&rel=0)

## Related

- [Builder Overview](/builder-overview.md)
- [Workflow Manager Overview](/workflow-manager-overview.md)