Forms Builder

The form builder section offers a range of form types that can be created to capture data relevant to your business goals. For example, you can create forms to engage website visitors and gather lead information, or generate forms to gather vital details when someone books an appointment on your calendar.

Depending on your user permissions, you may not have access to all of the components.

When accessing the builder section under forms, you'll see a list of previously created forms and folders.

If you have a long list of forms, you can search for a particular form by typing the name of that form here.

You can see the name of each form displayed here.

This column shows you the date and time each form was last updated.

In this column, you will see the names of the user that last updated the form.

If you delete a form, it will be permanently deleted.

The Form Folder section organizes all your folders, displaying the name of each form folder.

You can see the name of each form folder displayed here.

When you click on any folder's name, you can see;

This column shows you the date and time each folder got updated.

In this column, you will see the names of the user that last updated the folder.

If you delete a form, it will be permanently deleted.

Once you're prepared to design a custom form, all you need to do is click the Add New Form button. This action initiates the process of crafting a tailored form to suit your specific requirements and objectives.

To generate a new folder, simply click the Create Folder button, assign a suitable name to the folder, and then hit Confirm to save your changes. This straightforward process allows for easy organization and management of your files and documents.

From lead funnels to signup pages and even calendar scheduling, the form builder section of your CRM gives you immense control. Create fully customized forms; however, you want to ensure they precisely reflect your brand's identity! Visualize your desired forms with unique styling and powerful features surrounded by a sea of possibilities at your fingertips.

Depending on your user permissions, you may not have access to all of the components.

You have three different tabs to navigate between when creating and editing forms:

Creating and editing forms has never been easier with the three different tabs offered.

If you want to embed a form onto your webpage, all you have to do is go to the "Integrate form" tab.

After clicking on it, a popup will appear with the Embed Layout Type. It provides 4 forms of design layout for users to choose from:

A Sticky sidebar will appear on the side of the screen. Users can choose for the sidebar to appear either on the right or left side of the screen. The sidebar can also be minimized, and a user prefers to choose whether they would like it to be minimized. To set the preference to minimize or not, a user can use the checkbox in the image below the sticky sidebar (see the image below). A user can also give a specific title for the sidebar to show when the sidebar is minimized.

A polite slide-in appears at the bottom of the screen. A user can select either the right or left side of the screen for the form to appear. Slide-in forms stay for a limited time on the website. Once the user is done, it disappears and gives a user a free space to scroll through the website. Just like the sticky sidebar type of form, it is possible to allow the form to minimize it or not.

Pop-up forms are used to collect visitor's information on the website. This type of form can be closed when they appear on the screen, but it can not be minimized.

In an inline form, all elements are inline and left-aligned, and the labels are alongside. This type of form appears along with the content of the page. Sticky sidebar and slide-in forms can either be closed or minimized, but Inline forms cannot be closed or minimized.

With trigger types, User has the power to control when and how the form is shown on an external page. There are three different ways a user can set the trigger.

Show on Scrolling
The form will be shown based on how much a user has scrolled on the website page.

Show after _ seconds
The form will appear when the visitor has spent the set amount of time. You can set the seconds in the box as per your objective.
​

Always show
This will allow the form to appear as soon as the visitor is landed on the website.

Here you can set how the form would be activated.

Activate on _ visit
If user visits are your criteria for the form to appear, then you can set it for the form to appear when a visitor has come to your page for the second time or the third time. This way, the form has to be shown only starting from the Xth visit (depending on the number you have set)

Always Activated
As the name suggests, the form will stay activated no matter if a visitor has come on the page for the first time or he is a repeat visitor.

Here you can set up the deactivation for a form.

Deactivate after showing _ times
This form has to be disabled after showing for x number of times. We will have to use a cookie to track the form and the visits (Dev to confirm).

Deactivate once lead is collected
This form has to be disabled only after and once a lead is captured.

Never deactivate
This form is never deactivated once activated.

You can copy the embed code if you would like to put your form on an external page by clicking the Copy embed code button.

Make sure to talk to your web developer if you are unsure how to install the code on an external page.

If you would like to quickly send the form as a link to a customer, click on the copy link form.

You can also click on the Open Form link button to open the form in a new browser window.

Make sure you save all of your form progress! Don't worry, when you save you will remain in the form builder. It is just a good habit to save the form as you go.

Whether you need to collect customer information or company demographics, there are two options for form fields: Standard Fields and Custom Fields.

These are drags & drops. All you need to do to add it to a form is to click and drag them over to the form slide in the middle of the screen! This includes basic information such as name, email, phone numbers, etc. It is grouped into sections;

These fields are entirely up to you or your CRM admin to build & use. These custom fields can be anything from checkboxes to long-form answers.

Whether you are in the standard or custom fields tab, this area is where all the inputs are.

Saving your work is crucial, so regularly click the Save Form button at the bottom right of the page to avoid losing progress. It's always a good practice to save your form periodically to ensure it's backed up and secure in case of disruptions.

To alter the visual aspects of your form, navigate to the Styles Tab within the form builder. In this section, you can tailor the appearance of your form by adjusting elements such as colors, borders, and additional design features. Customizing the look of your form allows you to create a cohesive and aesthetically pleasing user experience that aligns with your brand identity.

Here you will find your form layout settings. In this section, you can toggle inline forms and show labels on or off.

Inline Forms: Inline forms allow you to put form inputs side by side instead of all inputs below one another.

Show Label: If you do not want to show the input field label, turn it off here.

Form Style - Background

In the Form Style section, customize the look of your form by adding borders and colors. To change the background color, click on the color box and select a color or add a custom code.

Form Style - Border

You can add borders by choosing a border type from the dropdown, such as dotted, dashed, lined, or none. The border width can be adjusted by adding a number or clicking the up and down arrows. To change the border color, click the color icon and select a choice or type in a custom code.

Form Style - Corner Radius

You can round the corners by adding a radius. Simply type a number in the given field. The higher the number, the rounder the corners will be.

Form Style - Width

Modifying the form's width is also possible by adding a number in the given field. The higher the number, the wider the form will be.

Padding

There are different spacing options available for adjusting your Form. Depending on the Edit option you are working on, the settings will only apply to that option. For example, editing the Bottom padding.

Shadow

It allows you to customize the border of your Form, such as the color, size, width, and radius.

Field Style - Background

In the Field Style section, customize the look of your form by adding borders and colors. To change the background color, click on the color box and select a color or add a custom code.

Field Style - Font Color

You can enhance the appearance of your form by altering the font color. Click on the color box to select a color, or type your custom color code in the given field.

Field Style - Border

You can add borders by choosing a border type from the dropdown, such as dotted, dashed, lined, or none. The border width can be adjusted by adding a number or clicking the up and down arrows. To change the border color, click the color icon and select a choice or type in a custom code.

Field Style - Corner Radius

You can round the corners by adding a radius. The higher the number you type in the given field, the rounder the corners.

Field Style - Width

Modifying the form's width is also possible by adding a number in the given field. The higher the number, the wider the field width will be.

Field Style - Padding

Padding

There are different spacing options available for adjusting your Form. Depending on the Edit option you are working on, the settings will only apply to that option. For example, editing the Bottom padding.

Field Style - Shadow

Shadow

The shadow option allows you to customize the border of your Form, such as the color, size, width, and radius.

Color

In the Label section, customize the look of your form by adding colors. To change the label color, click on the color box and select a color or add a custom code.

Font Family

This allows you to select the font style for your label. Click on the dropdown menu and select a font you would like to use for the field label.

Size

Here you can select the font size of your label by typing a number in the field.

Weight

This will help you bolden the font you chose for your label, making it thicker. Type a number into the given field to change the weight. The higher the number, the bolder the font will be.

Color

In the Placeholder section, customize the look of your form by adding colors. To change the label color, click on the color box and select a color or add a custom code.

Font Family

This allows you to select the font style for your placeholder. Click on the dropdown menu to selet the font you would like to use.

Size

Click on this section to select the font size of your placeholder and type a number in the box to set your font size.

Weight

This will help you bolden the font you chose for your placeholder, making it thicker. Type a number in the given field to add weight to the placeholder font. The higher the number, the bolder the font will be.

You can add custom CSS to your form in the Custom CSS box to modify the design of your forms, such as input fields' shapes, colors, buttons, and more.

Consult with a web developer familiar with CSS if you are unfamiliar with this option.

The background image is intended to cover the entire page, providing a visually appealing backdrop for the form.

To view the background image, click on the Preview option.

The header image is designed to cover the entire width of the form and remains positioned at the top of the form.

To view the header image, click on the Preview option.

Agency Branding

In the Miscellaneous section, toggle on or off the company Branding option to show or remove agency branding at the bottom of your form. Turning it off allows you to place your form on a different funnel from the agency's.

The form builder's Options tab presents a variety of settings designed to help you personalize your form.

Here you will be able to see the name you've given your form. By default, it is given a generic name. If you need to, the next step will help you change the form name.

To change the form name, you will need to navigate to the Options tab.

Type a name for your form in the Form Name text box, ensuring that you select a name that is easily identifiable. By choosing a recognizable name, you can efficiently organize and manage your forms while streamlining navigation for users.

The On Submit settings determine what happens when a visitor submits the form.

Open URL: If you choose the Open URL option, the visitor will be redirected to the designated web page of your choice. A Thank You page is recommended as it provides positive reinforcement for the visitor.

Message: Alternatively, you can opt for the Message option, which allows you to display a custom message created by you upon form submission.

If you want to track form submissions with your Facebook Pixel for analytics and advertising, add your Facebook Pixel ID in the designated box.

If you plan on using the form in a funnel, you can skip this step as the pixel code will already be installed on the funnel page for tracking purposes.

If you have entered a Facebook Pixel, you can specify the event settings for tracking and attribution.

On-Page View

Choose what events will fire when a visitor lands on the page in which your form is embedded.

On Form Submission

Choose what events will fire when a visitor submits your form.

The sticky contact feature automatically populates your visitor's previously entered contact information, eliminating the need for them to input it again. This convenient functionality enhances user experience by saving time and effort, making it more likely for visitors to engage with your website or platform and complete desired actions.