The Form Builder tool allows you to create, customize and configure a JS form. You can construct a template and manage the form fields, buttons, text areas, and other elements.


Form Builder Overview

Create New Form

Adding Elements

Field Configuration

Form Builder Overview

To view the section, go to the Publisher Management > Promo Materials > JS Form Constructor > Form Builder section.

You can manage general form settings at the top section of the JS Form Constructor setup page:

  • Product: The name of the product.

  • Status: The status of the form (Active / Deleted / Disabled).

Note: To activate the form, change the status to "Active".

  • Description: Add additional information in the text field. Note: The description is displayed in the form.

  • Name: The name of the template.

Click the “Save” button to complete changes.

Note: If you make any changes to the template, you will need to re-save the template. Otherwise, you will get an error under “Publisher” in the “Preview” while creating the form.

Create New Form

To create and customize the form, use the “Form Builder” tab.

Note: By default, fields included in the template (both required and optional) can not be removed or renamed, as it corresponds to the API.

Adding Elements

In the “Form builder” section, you can add the following general elements to the form:

  • Page

  • Row

To add a new field block into the constructor, click the “Add Page” button.

To add rows and display additional tools within the field's page, click the "Add Row" button.

To remove the page, click the “Remove page” button.

A new page is added at the bottom after the existing one by default. The page automatically will be generated with a number of the page.

A new row is added at the bottom after all other rows on the page.

To change the row position in the form, use the following buttons: “Add Column,” “Add Row Before” or “Add Row After” buttons.

To add a new column in a row (threshold is four), click the “Add Column” button.

To resize columns, use the drag and drop separator between them.

To configure the location of the columns in the block, use the following buttons:

  • Align Top: Adjust the row by top.

  • Align Middle: Adjust the row by middle.

  • Align Bottom: Adjust the row by the bottom.

  • Return Columns to Default Size: Return the width of columns to the initial state.

To add elements to the form, use the “Form Fields” tab. Select the element and drag it into the column.

Note: You cannot add another “Form Fields” or “Text Elements” if the column is not empty.

Field Configuration

To edit the column’s element, click the “pencil” icon in the upper right corner and configure the data in the “Field Settings” tab on the right.

To move the field to the opposite side, click on the row and drag it to the left or right side.

To remove the field, click the “Bucket” icon (only if it is an optional field).

To delete the column from the block, click the “Red Bucket” icon.

Note: The icon is available only for not required columns.

The “Form Elements” tab contains the following settings:

  • API Parameter Name: Enter the API parameter name used for field mapping. The name must start with a letter and can contain letters (A-Z, a-z), numbers (0-9), and underscore (_). It cannot contain any spaces.

  • Field Name: Enter the name of the field.

  • Field type: The name of the field type.

  • Tooltip Text: The entered text is shown as a hint above the row. To view the changes, click the “Save” button and navigate to the “Form Customization and Preview” tab.

  • Placeholder: Fill in the placeholder field to display text in the background and hint at what needs to be input in this field. Click the “Save” button to apply the changes.

  • Mask: Set a restriction on input values in a definite format.

  • Options: This field allows you to create checkboxes and radio buttons.

  • Date format: This field allows you to set up and display the date in a specific format.

  • Disabled: If the “Yes” value is selected, the field will be inaccessible in the form.

  • Required: If the “Yes” value is selected, the field in the form will be required to submit the form.

Adjusting settings for requirements of the input value.

Note: If the field “Disabled” = “Yes” and the field “Required” = “Yes” then the user will not be able to input the value in the required field and submit the form.

  • Value: The value by default for input fields.

  • On Click: Add an action button to the form. Select one from the drop-down list (“Submit”, “Next page”, “Previous Page”).

  • Text: The field for text input.

Click the “Save” button on the right side of the page to apply and save the changes.

Note: If you only save settings through the “Save” button located at the top of the page, all changes will not be applied and saved.

Did this answer your question?