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

Phonexa JS Form Templates

Form Customization

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

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.

Templates

Depending on the Product, the following Templates are available:

  • Simple: Simple one-page form. The available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2500. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Stepped: Three-step form. The available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided

  • Slide form: Six-step form. The available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Simplified: Simple one-page form with simplified design elements. The available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • BHNetwork: Two-step form. Available amount options range from $100 - $2500 (The system receives the amount as $1000).

  • BHNetwork simple: Simple one-page form. Available amount options range from $100 - $2500 (The system receives the amount as $1000).

  • Landing form: A one-page form that is designed only for a particular case, working with a specific set of parameters. When receiving partial lead parameters, the form displays the missing fields to fill in.

  • Wizard form: Ten-step form. Available amount options range from $100 - $1000. To reapply the lead, the short form is provided.

  • One-step Reapply 2020 NEW: One-page form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). After filling out the form, lead searching by email is available. The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2500. Color and Form Headings are customizable.

  • Accordion US: Three-step form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2500. Color and Form Headings are customizable. To reapply the lead, the short form is provided.

  • Profitner form: One-step form that is visually divided into three sections (PERSONAL INFORMATION / ADDITIONAL INFORMATION / BANKING INFORMATION). Available amount options range from $100 - $1000.

  • Onepage Whitelabel: One-page form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). After filling out the form, lead searching by email is available. The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2500. Color and Form Headings are customizable.

  • Impede form: Six-step form. Available amount options depend on the chosen Product: Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Stopped Reaply Form NEW: Multiple-step form. Each step has only one or two data fields to fill in. Once an email address is entered, the form looks up the user in the system. If the user already exists, the form takes into account a possible ZIP code replacement and gives an opportunity to add new data to the user’s profile. Available amount options depend on the chosen Product: Payday ($100 - $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. The color scheme is customizable.

  • Autoresponder: Simple one-page form. Available amount options range from $100 - $1000.

  • Bhnetwork Stepped: Multiple-step form. Available amount options range from$100 - $2500 (The system receives the amount as $1000).

  • Stepped (Email Lookup): Three-step form. The available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). The form contains an interstitial page to lower the requested amount after user rejection, which comes up for loan requests of more than $2000. Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided

  • Test: Simple one-page form for testing.

  • Strict (No Redirect): Simple one-page form. Available amount options range from $1000 - $250000.

  • Draw (No Redirect): Simple one-page form. Available amount options range from $1000 - $250000.

  • Silver (No Redirect): Simple one-page form. Available amount options range from $1000 - $250000.

  • Strict: Simple one-page form. Available amount options range from $1000 - $250000. Default reject redirects a user to the my411.com service.

  • Draw: Simple one-page form. Available amount options range from $1000 - $250000. Default reject redirects a user to the my411.com service.

  • Silver: Simple one-page form. Available amount options range from $1000 - $250000. Default reject redirects a user to the my411.com service.

  • Onepark short (en/es): Simple one-page form provided in English or Spanish.

  • Personal Us form: One-page form. Available amount options are ranged $1000 - $35000. The form contains an interstitial page with additional payday fields (Personal and Payday channels) to lower the requested amount after user rejection which comes up for loan requests of more than $1000. Color and Form Headings are customizable.

  • Personal Whitelabel: One-page form. Available amount options are ranged $1000 - $35000. The form contains an interstitial page with additional payday fields (Personal and Payday channels) to lower the requested amount after user rejection which comes up for loan requests of more than $1000. Color and Form Headings are customizable.

  • Legion form: Seven-step form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Onepage pay-day - hybrid form: Two-step form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Personal Loan Multi Step Form: Multi-step form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • RV Multi Step Form: Multi-step form. Available amount options depend on the chosen Product: Payday ($100 - $1000), Payday Plus ($100 - $2500) (The system receives the amount as $1000), Hybrid ($100 - $5000), Installment ($1000 - $5000), Personal loan ($1000 - $35000). Color, Form Headings, and Search Progress Animation effects are customizable. To reapply the lead, the short form is provided.

  • Simple Data Collector: A short form with available fields (zip code/ email address/ date of birth/ loan amount) to fill in. Provides data into the user data collector product.

  • Debt Settlement Stepped: Nine-step form. Available amount options range up to $99999.

  • Car Insurance Long: Four-step form. Available insurance options are minimum, standard, and premium.

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.

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 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.