All Collections
LMS Sync & Call Logic
Form Builder Setup: Form Customization and Preview
Form Builder Setup: Form Customization and Preview
The Form Customization and Preview section allows you to customize the JS form appearance according to your preferences.
Support At Phonexa avatar
Written by Support At Phonexa
Updated over a week ago

To view the section, go to the Publisher Management > Promo Materials > Form Builder section, click the "Builder" button, and select the "Form Customization and Preview" tab.

The “Form Customization and Preview” section displays the final appearance of the form. All changes made in the “Form Builder” tab will be displayed in the “Form Customization and Preview” tab after saving.

Form

  1. Background color: Select the background color of the form.

  2. Padding: Select the value of the padding for the form.

  3. Inner container width: Select the value for the inner container width.

  4. Inner container padding: Select the value of the inner container padding, for vertical padding.

  5. Inner container padding: Select the value of the inner container padding, for horizontal padding.

  6. Column gutter (space between columns): Select the value to set the space between columns.

  7. Column bottom margin: Select the value to set the margin at the bottom of the form.

  8. Inner container background color: Select the inner color of the form.

  9. Border radius: Select a value for the maximum or minimum goal range.

  10. Border width: Select the value for border width.

  11. Border style: Select the style for the form’s border (None, Active, Dashed) from the drop-down list. It is disabled by default.

  12. Border color: Select the color for the form.

Input

  1. Font family: Select the text font from the drop-down list.

  2. Font size: Select the text size.

  3. Font weight: Select the weight of text (Light, Bold, Regular) from the drop-down list. It is disabled by default.

  4. Font style: Select the text style (Normal, Italic) from the drop-down list. It is disabled by default.

  5. Text align: Select the text location in the field from the drop-down list (Left, Center, Right).

  6. Font color: Select the color of the text.

  7. Height: Select the height of the form.

  8. Padding: Select the horizontal padding for the text in the field.

  9. Background color: Select the color for the form’s fields.

  10. Border radius: Select the border radius for the form’s fields.

  11. Border width: Select the border width for the form’s fields.

  12. Border style: Select the style field (None, Solid, Dashed) from the drop-down list.

  13. Border color: Select the color for the field’s border.

Label

  1. Font family: Select the text style for the field’s title from the drop-down list.

  2. Font size: Select the text size for the field’s title.

  3. Font weight: Select the text weight (Regular, Bold, Light) from the drop-down list.

  4. Font style: Select the style (Normal, Italic) for the field’s title.

  5. Text align: Select the text position above the field from the drop-down list (Left, Center, Right).

  6. Change Case: Select the change case (None, Uppercase, Lowercase) from the drop-down list.

  7. Font color: Select the color for the field’s title.

Button

  1. Font family: Select the text style for the button from the drop-down list.

  2. Font size: Select the text size.

  3. Font weight: Select the text weight (Regular, Bold, Light) from the drop-down list.

  4. Font style: Select font style for the text (Normal, Italic) from the drop-down list.

  5. Text align: Select the position for the button from the drop-down list (Left, Center, Right).

  6. Change Case: Select the text-transform (None, Uppercase, Lowercase) from the drop-down list.

  7. Font color: Select the button’s text color.

  8. Height: Select the button height.

  9. Padding: Select the button width.

  10. Background color: Select the button’s color.

  11. Border radius: Select the button’s radius.

  12. Border width: Select the border width.

  13. Border style: Select the border style (None, Solid, Dashed) from the drop-down list.

  14. Border color: Select the border color.

Tooltip

  1. Font family: Select text style from the drop-down list.

  2. Font size: Select the text size.

  3. Font weight: Select the text weight (Regular, Bold, Light) from the drop-down list.

  4. Font style: Select the style (Normal, Italic) from the drop-down list.

  5. Text align: Select the position for the tooltip text from the drop-down list (Left, Center, Right).

  6. Change Case: Select the text-transform (None, Uppercase, Lowercase) from the drop-down list.

  7. Font color: Select the text color.

  8. Width: Select the tooltip width.

  9. Padding: Select the inner indents.

  10. Background color: Select the tooltip background color.

  11. Border radius: Select the border radius of the tooltip.

  12. Border width: Select the border width.

  13. Border style: Select the border style (None, Solid, Dashed) from the drop-down list.

  14. Border color: Select the border color.

Checkbox/Radio button

  1. Background color: Choose the background color from the pallet.

  2. Border color: Choose the border color from the pallet.

H1/H2/H3 Title

  1. Font family: Select the text font from the drop-down list.

  2. Font size: Select the text size.

  3. Font weight: Select the weight of text (Light, Bold, Regular) from the drop-down list. It is disabled by default.

  4. Font style: Select font style for the text (Normal, Italic) from the drop-down list.

  5. Text align: Select the text location from the drop-down list (Left, Center, Right).

  6. Change Case: Select the change case (None, Uppercase, Lowercase) from the drop-down list.

  7. Font color: Select the color of the text.

Paragraph Text

  1. Font family: Select the text font from the drop-down list.

  2. Font size: Select the text size.

  3. Font weight: Select the weight of text (Light, Bold, Regular) from the drop-down list. It is disabled by default.

  4. Font style: Select font style for the text (Normal, Italic) from the drop-down list.

  5. Text align: Select the text location from the drop-down list (Left, Center, Right).

  6. Change Case: Select the change case (None, Uppercase, Lowercase) from the drop-down list.

  7. Font color: Select the color of the text.

Horizontal Rule

  1. Border width: Choose the border width for the horizontal rule.

  2. Border style: Select the border style from the drop-down list (None, Solid, Dashed).

  3. Border color: Choose the border color from the pallet.

All template changes will be shown in the form only after saving the template by clicking the “Save” button. When the template is created, customized, and has the “Active” status it will be available while creating the form for the existing product.

To edit the template setting or activate the template, click the “Edit” button in the “Actions” column and configure the following fields in the pop-up window:

  • Product: The name of the product.

  • Name: Enter the name of the template.

  • Description: Fill in the “Description” field if you need to add additional information.

Click the “Update” button to save changes.

To delete the template, click the “Delete” button in the “Actions” column and confirm in the pop-up window.

Did this answer your question?