Design
The design tab in the form editor enables you to design the form, and change its look and feel to fit into your brand design. Each component under the design tab has its properties, allowing you to customize each component added to the form.
The design section has the following components:
Text
The text component enables you to add text to the form. The text remains unchanged until manually updated or edited.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Editor | The standard text editor for adding text along with formatting options. |
| Padding (in pixels) | Sets the padding around the text component in the form. |
| Show On | Choose the device for displaying the text component in the form - All Devices, Desktop or Mobile |
Image
This component lets you add visuals to your form.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Add Media | Enables you to add images/visuals. You can choose from the Media library, Upload/Import Media, or Create Using AI. |
| Width | Define the width of the uploaded image in the form. |
| Horizontal Alignment | Enabled you to align the uploaded media in the image component - Left, Right, or Center. |
| Redirect URL | Add the URL that opens when the customer clicks on the image. |
| Padding (in pixels) | Sets the padding around the image component in the form. |
| Show On | Choose the device for displaying the image in the form - All Devices, Desktop, or Mobile. |
Email Input
This component is an input field that only accepts email as the input. You can use Email input to capture the Email ID of the customers.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label to the Email input. |
| Label text | Sets the text of the label. |
| Placeholder Text | Allows you to set the placeholder text displayed within the input box to provide a hint or example value to the user, guiding them on the expected format or content of the input. |
| Required | When enabled, it makes the Email Input a mandatory field. The submit button is disabled till the customer enters the Email in the input field. |
| Padding (in pixels) | Sets the padding around the Email input in the form. |
| Background Color | Sets the background color of the component. |
| Padding Background Color | Sets the color of the padding around the component. |
| Show On | Choose the device for displaying the component in the form - All Devices, Desktop, or Mobile. |
Phone input
This component is an input field that only accepts the phone number as the input. You can use Phone input to capture the phone number of the customer.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label for the Phone input. |
| Label text | Sets the text of the label. |
| Placeholder Text | Sets the placeholder text displayed within the input box to provide a hint or example value to the user, guiding them on the expected format or content of the input. |
| Default Country | Set the default country to get the correct country code for the number. |
| SMS Consent | Choose whether to get consent from the customer to send them an SMS or not. |
| Whatsapp Consent | Choose whether to get consent from the customer to send them WhatsApp messages or not. |
| Padding (in pixels) | Sets the padding around the Phone input in the form. |
| Background Color | Sets the background color of the component. |
| Padding Background Color | Sets the color of the padding around the component. |
| Show On | Choose the device for displaying the component in the form - All Devices, Desktop, or Mobile. |
Button
This is an interactive component that users can click to perform an action or submit the form.
When you select this component, its properties appear in the property pane on the right side of the screen.
Button
These are the properties that define the task of the button.
| Property | Description |
|---|---|
| Action | Sets the task to perform on the button click - Submit form, Close Form, Redirect URL, Go to Next Step. |
| Button URL | Set the redirect URL on the button click. Only available when you select Redirect URL in Actions. Select the checkboxes below to Submit the form when redirected and to open the Redirect URL in a new tab. |
Button Text
These are the properties related to the text that appears on the button.
| Property | Description |
|---|---|
| Button Text | Sets the text that appears on the button. |
| Button Font Family | Sets the font for the button text |
| Font Size | Sets the font size of the button text. |
| Font Weight | Sets the button text's thickness or darkness (degree of boldness or lightness). |
| Label Color | Sets the color of the button text. |
Button Style
These are the properties to configure the button style.
| Property | Description |
|---|---|
| Background Color | Sets the background color of the button |
| Corner Radius | Applies rounded corners to the outer edge of the button. |
| Button Height | Sets the vertical size of the button |
| Button Width | Sets the horizontal button size. - Stretch width: Expands the button to fill the available space. - Fit to text width: Adjusts the button width precisely to the width of its text. |
| Padding (in pixels) | Sets the padding around the button in the form. |
Button Border
These properties enable you to style the button's border
| Property | Description |
|---|---|
| Border Width | Sets the width of the button's border. |
| Border Style | Sets the style of the button border. Select a style from the given dropdown. |
| Border Color | Sets the border color. |
Show on
These properties define the visibility of the button according to the device type.
| Property | Description |
|---|---|
| All Devices | Sets the button to be visible on all devices |
| Desktop | Sets the button to be visible only on the desktop site. |
| Mobile | Sets the button to be visible only on the mobile site. |
Text Input
Text input is an input field to capture the text the customer enters. When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label for the Text input. |
| Label text | Sets the text of the label. |
| Input Type | Sets the input type for the component - Text or Number. |
| Profile Property | |
| Placeholder Text | Sets the placeholder text displayed within the input box to provide a hint or example value to the user, guiding them on the expected format or content of the input. |
| Required | When enabled, it makes the Text Input a mandatory field. The submit button is disabled till the customer enters the Email in the input field. |
| Padding (in pixels) | Sets the padding around the text input in the form. |
| Background Color | Sets the background color of the component. |
| Padding Background Color | Sets the color of the padding around the component. |
| Show On | Choose the device for displaying the component in the form - All Devices, Desktop, or Mobile. |
Date Input
This component is an input field that only accepts the date as the input. You can select a date from the Date picker on the right side of the component. When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label for the Date input. |
| Label text | Sets the text of the label. |
| Profile Property | Sets the profile property value to be mapped to the date selected in Date input. |
| Date Format | Displays a list of date formats for the Date Input. |
| Placeholder Text | Sets the placeholder text displayed within the input box to provide a hint or example value to the user, guiding them on the expected format or content of the input. |
| Required | When enabled, it makes the Date Input a mandatory field. The submit button is disabled till the customer enters the Email in the input field. |
| Padding (in pixels) | Sets the padding around the text input in the form. |
| Background Color | Sets the background color of the component. |
| Padding Background Color | Sets the color of the padding around the component. |
| Show On | Choose the device for displaying the component in the form - All Devices, Desktop, or Mobile. |
Timer
The timer is a clock interface that acts as a countdown timer. You can use this timer as a countdown for a limited-time offer for customers or set a time to grab a discount on a product.
It has the following properties:
Set Timer
These properties allow you to configure and adjust the time for the countdown.
| Property | Description |
|---|---|
| Timer Type | Sets the type of timer. - Session time: The timer starts as the user session starts and ends as per the defined time. - Fixed end time: The timer has a fixed end time irrespective of the user session. |
| Timer | Only available for Session time. Sets the time for the countdown that starts along the user session. |
| Date Time | Only available for Fixed end time. Sets the end date and time for the timer. |
Block Styles
These properties allow you to change the look and feel of the timer.
| Property | Description |
|---|---|
| Background Color | Sets the background color of the component. |
| Border Width | Sets the width of the timer's border. |
| Corner Radius | Applies rounded corners to the outer edge of the component |
| Border Style | Sets the style of the button border. Select a style from the given dropdown. |
| Border Color | Sets the border color. |
| Padding Background Color | Sets the color of the padding around the component. |
| Padding (in pixels) | Sets the padding around the timer in the form. |
Timer Text
These properties let you configure the text in the timer.
| Property | Description |
|---|---|
| Time Labels | Sets the labels for each element of the timer. (days, hours, etc.) |
| Time Label Font Size | Sets the font size of the Time labels. |
| Timer Font Family | Sets the font of the timer. |
| Timer Font Size | Sets the font size of the timer. |
| Timer Font Weight | Sets the timer's thickness or darkness (degree of boldness or lightness). |
| Timer Font Color | Sets the font color of the timer. |
Show on
These properties define the visibility of the timer according to the device type.
| Property | Description |
|---|---|
| All Devices | Sets the button to be visible on all devices |
| Desktop | Sets the button to be visible only on the desktop site. |
| Mobile | Sets the button to be visible only on the mobile site. |
Dropdown
The dropdown presents a list of options for customers to choose from in a vertically expanding menu. You can configure the options to be displayed in the dropdown.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label for the dropdown. |
| Label text | Sets the text of the label. |
| Profile Property | Sets the profile property value to be mapped to the selected option in the dropdown |
| Placeholder Text | Sets the placeholder text displayed within the dropdown to provide a hint or example value to the user, guiding them on the expected format or content of the input. |
| Required | When enabled, it makes the dropdown selection a mandatory field. The submit button is disabled till the customer selects an option from the dropdown. |
| Options | Enables you to add the options to select from on the dropdown. |
| Padding (in pixels) | Sets the padding around the timer in the form. |
| Background Color | Sets the background color of the component. |
| Padding Background Color | Sets the color of the padding around the component. |
| Show On | Choose the device for displaying the component in the form - All Devices, Desktop, or Mobile. |
Single Select
This component allows users to select one option from a predefined set of choices.
When you select this component, its properties appear in the property pane on the right side of the screen.
| Property | Description |
|---|---|
| Label | Select the checkbox to add a label for the dropdown. |
| Options Layout | Sets the layout of the Single Select options- horizontal or vertical. |
| Label Text | Sets the text of the label. |
| Profile Property | Sets the profile property value to be mapped to the selected option in Single Select. |
| Required | When enabled, it makes the single select a mandatory field. The submit button is disabled till the customer selects an option in the Single select. |
| Options | Enables you to add the options to select from on the Single select. |
Label Styles
These properties allow you to change the look and feel of the Single select options.
| Property | Description |
|---|---|
| Label Font Family | Sets the font of the option's text. |
| Label Font Size | Sets the font size of the option's text. |
| Label Font Weight | Sets the option text's thickness or darkness (degree of boldness or lightness) of the button text. |
| Label Text Color | Sets the color of the option's text. |
| Padding (in pixels) | Sets the padding around the timer in the form. |
| Background color | Sets the background color of the component. |
Show on
These properties define the visibility of the Single select according to the device type.
| Property | Description |
|---|---|
| All Devices | Sets the button to be visible on all devices |
| Desktop | Sets the button to be visible only on the desktop site. |
| Mobile | Sets the button to be visible only on the mobile site. |
Updated 3 months ago