Publisher management
      Back to home
      1. Knowledge Base
      2. LMS Sync & Call Logic
      3. Publisher management

      JS Form

      Find out how to edit and view the existing forms or use system templates to create a new JS form in this short guide to the JS form section.

      The JS Form section allows you to create a new JS form using available templates according to existing Products in your system, view the settings, edit the existing JS Form, and check the additional features.

      How to create a new JS Form

      Form Customization

      To access, go to the Publisher Management > Promo Materials > JS Form section.

      js form 1

      The “Your JS forms” list contains the following information:

      • Name: The name of the JS Form.

      • Template: The chosen template for the form.

      • Product: The name of the Product the form belongs to.

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

      • UUID: The UUID code of the form.

      • Created: The date and the time the form was created.

      You can narrow down the search results by using the following filters:

      • Product: Select the Product.

      • Name: Enter the name of the JS Form.

      • Template: Select the template of the JS Form.

      • Status: Select the Status of the JS Form.

      • UUID: Enter the UUID code of the form.

      Create a new JS Form

      To create a new JS form, click the “Create New Form” button, enter the name for the new form in the Name field, and select the Product and Template for the new form in the “Create New Form” pop-up window.

      Click the “Add” button to complete.

      To create a custom template, use the Form Builder tool provided in the system. Read more about the Form Builder section in the Knowledge Base article.

      To view the settings or edit the existing JS Form, click the “Settings” button in the “Actions” column, and fill in the following fields:

      • Name: Enter the name of the JS Form.
      • Template: Select the available template for the chosen Product.
      • UUID: The UUID code of the JS Form. Сlick the “Copy UUID” button to copy the UUID.
      • JS form code: The script for your website. To copy, click the “Copy Code” button.
      • Domain: Select the domain.
      • Enable Third-Party Services Data Collection: Switch the toggle to enable the third-party services data collection. Read more about data collection on the form of third-party services in this Knowledge Base article.

      The “Advanced Options” button contains scripts of the form with additional features.

      Read more about the Advanced Options in this Knowledge Base article.

      Form Customization

      The “Main Settings” tab of the Form customization block allows you to configure the appearance of the form on your website by using the following fields:

      • Form type: Select the Product the form applies to (Payday, Payday Plus, Hybrid, Personal loan, Payday / Installment / Personal).
      • Color Preset: Select the color preset for the form (Purple, Burgundy, Dark Green, Orange, Dark Blue, Olive, Royal Blue, Pink, Light Green, Grey)
      • Search Animation Effect: Select the animation for the search progress (Spin / Slide / Explode / Bounce).
      • Show Preview For: Select the preview form (Form, Search Progress Animation, Interstitial).
      • Form Header: Enter the header text into the form.
      • Form First Header: Enter the first header text into the form.
      • Form Second Header: Enter the second header text into the form.
      • First Screen Header: Enter the header text into the first screen of the form.
      • First Screen Sub Header: Enter the subheader text into the first screen of the form.
      • Second Screen Header: Enter the header text into the second screen of the form.
      • Second Screen Sub Header: Enter the subheader text into the second screen of the form.
      • Form Sub Header: Enter the subheader text into the form.
      • Form Step 1 Header: Enter the header text into the step 1 page of the form.
      • Search Animation Header: Enter the header text into the search animation.
      • Search Animation Sub Header: Enter the subheader text into the search animation.
      • Form Header Visibility: Select the form header visibility (Show Form Header, Hide Form Header).
      • Show Background: Select the form background visibility (Show, Hide).
      • Form min height, px: Select the minimum height for the form in pixels.


      The “Customize Colors” tab allows you to manage the color scheme. Depending on the Product and Template, the following filters are available:

      • Form Background: Select the background color for the form.

      • Form Header Text: Select the header text color for the form.

      • Form Header Text Color: Select the header text color for the form.

      • Form Header Background: Select the background color for the header of the form.

      • Form Label Color: Select the label text color for the form.

      • Form Border Color: Select the border color for the form.

      • Form Block BG: Select the block background color for the form.

      • Form Block Border Color: Select the block border color for the form.

      • Form Block Header BG: Select the block header background color for the form.

      • Form Block Header Color: Select the block header text color for the form.

      • Form Block Margin: Enter the number of pixels for external indentations from form blocks.

      • Form Block Border Radius: Enter the number of pixels to round off the borders.

      • Form Block Label Color: Select the label text color for the block of the form.

      • Form Block Border Width: Enter the width of the block borders in the pixels.

      • Form Block (Step) Border Color: Select the border color for the step block of the form.

      • Form Block (Step) BG: Select the background color for the step block of the form.

      • Form Step Head BG: Select the background color for the step head of the form.

      • Form Step Head Color: Select the step head text color for the form.

      • Form Step Header Color: Select the header color for the step of the form.

      • Form Input Text Color: Select the input text color for the form.

      • Form Input Border Color: Select the border color for the input text of the form.

      • Form Font Family: Enter the font for the text (Helvetica, Arial).

      • Form Question Mark Color: Select the question mark text color for the form.

      • Form Question Mark BG: Select the question mark background color for the form.

      • Link Color: Select the color of the links.

      • Button Text Color: Select the color for the text on a button.

      • Button BG: Select the background color for the button.

      • Button Border Color: Select the border color for the button.

      • Button Next Text Color: Select the color for the text on the “next” button.

      • Button Next BG: Select the background color for the “next” button.

      • Button Next Border Color: Select the border color for the “next” button.

      • Button-list BG Color: Select the color for the background Button-list.

      • Button-list Text Color: Select the color for the Button-list Text.

      • Button-list BG Color (hover, select): Select the color for the background Button-list (hover, select).

      • Button-list Text Color (hover, select): Select the color for the Button-list Text (hover, select).

      • Search Animation Color: Select the color for the search animation.

      • Background Color: Select the background color (Light Gray, Plum, Pink, Light Green, Peach, Light Steel Blue, Pale Golden, Lavender, Khaki, Light Cyan, Light Steel Blue Gradient, Hot Pink Gradient, Pale Green Gradient, Light Yellow Gradient, Light Gray Gradient). Note: If you also select a "Background Image", the background image will override this setting - unless you choose "Full Width" for "Background Width" in that case, your form will have both a centered background image, as well as a full-width background filled with a color of your choice.

      • Background Width: Select the background width (Full, Boxed). Note: If you'd like the form's background color to span the whole width of the page, please select Full Width. If you select "Boxed, the background color will be constrained to the longest horizontal form element.

      • Background Image: Select the background image (Grey Sky, Cumulus, Watercolor 1, Watercolor 2, Linen, Abstract, Brick wall, Distressed Wood, Prisma, Futurescape). Note: The image will cover any selection that you made in the “Background Color” field unless you chose “Full Width” in "Background Width”.

      • Form Shadow Style: Select the drop shadow effect for the form's container (Box shadow 1).

      • Headline & Button Text Color: Select the color for the headline and button text.

      • Headline & Button BG Color: Select the color for the headline and button background.

      • Text Over BG Color: Select the color for the text that lies over the background.

      • Next/Prev Arrow Color: Select the color for the arrow that transfers the user between steps in the multi-step form.

      • Search Animation Color: Select the color for the search animation.

      • Tooltip BG Color: Select the background color for the Tooltip.

      • Tooltip Border Color: Select the border color for the Tooltip.

      • Progress Bar Color: Select the gradient color scheme of the progress bar in the multi-step form (Purple, Burgundy, Dark Green, Orange, Dark Blue, Olive, Royal Blue, Pink, Light Green, Grey).

      • Dropdown Arrow Icon Color: Select the color for the downward arrow present in the dropdown select fields (Purple, Burgundy, Dark Green, Orange, Dark Blue, Olive, Royal Blue, Pink, Light Green, Grey).

      • Step Text Color: Select the text color for the step.

      • Active Step Text Color: Select the text color for the active step.

      • Active Step Number BG: Select the background number color for the active step.

      • Terms Section Color: Select the color for the terms and conditions section.

      • Finally Section Label Color: Select the label text color for the final section of the form.

      • Finally Section Header Color: Select the header text color for the final section of the form.

      • Finally Section BG: Select the background color for the final section of the form.

      • Finally Section Summary Text Color: Select the summary text color for the final section of the form.

      • Checkbox Border Color: Select the border color for the checkbox.

      Сheck all of the modifications in the preview picture below the settings block.

      Click the “Save” button to proceed with the changes. To reset the settings, click the “Reset to Default” button.

      To view the code for the tracking widget that you can insert into your form, click the “Tracking Widget” button.

      js form 2

      To view the code for the unsubscribe widget, click the “Unsubscribe Widget” button.

      js form 3

      To delete the existing JS Form from your system, select the JS form from the list and click the “Delete” button in the “Action” column. In the pop-up window click the “Delete” button to confirm the action.