FormComponent

This constructor (js class) is used for generating either MQL forms depending on a locale, business division and appropriate SMP (Sales and Marketing Partnership agreement) or Contact Acquisition ones.

How to use

Business Division (for identifying which SMP template to use) is taken from the form name. Or it can be hardcoded in setHiddenFields method for the division1 field (optionally). Country (which country to be preselected in country field) and language (to select the right language template) are taken from the relevant meta tag on LP ("DCSext.locale"):

    <meta name="DCSext.locale" content="en_GB">

Form type is taken from the form name exactly: TEST-EMSD-202202-en_EMEA-CON-testLeadGen_emsd

If for example to change -CON- to any non MQL form type, it will use a default non-MQL template. Form name is reflected in 2 places on LP:

    <form name="TEST-EMSD-202202-en_EMEA-CON-testLeadGen_emsd"></form>

AND:

    new window.FormComponent("TEST-EMSD-202202-en_EMEA-CON-testLeadGen_emsd");

Generation of the form

(initilization of the FormComponent, including all its methods must NOT be included into the domReady)

Call the 'FormComponent' class and pass it to a variable. In case if you have several forms on LP, each of them should be passed to a unique variable, like below:

    var form1 = new window.FormComponent("TEST-EMSD-202202-en_EMEA-CON-testLeadGen_emsd");  /* Initializing Form #1 */
    var form2 = new window.FormComponent("TEST-EMSD-202202-en_EMEA-SUB-testSubscribe");     /* Initializing Form #2 */
    /* ... etc ...*/

Or, as another variant (preferable): is to use one the same variable (like 'form1') for all instances of the form, but being wrapped with a self invoked function, like below:

    (function() {  
        var form1 = new window.FormComponent("TEST-EMSD-202202-en_EMEA-CON-testLeadGen_emsd");
    })()
    (function() {  
        var form1 = new window.FormComponent("TEST-EMSD-202202-en_EMEA-SUB-testSubscribe");
    })()
    /* ... etc ...*/

Provide settings for the hidden fields. Use method setHiddenFields(), called on a relevant form's variable (in example below variable is 'form1')

    form1.setHiddenFields({          
	  sFDCLastCampaignName: "EMSD-2002-EMEA-GLC-MUL-Lead_gen_test_campaign-A",
	  sFDCLastCampaignID: "7012K00000169GbQAI",
	  sFDCLastCampaignStatus: "Optional",
	  leadSourceMostRecent1: "Website",
	  CTA: "Contact Us"  
	  })
    /* ... etc ...*/

In case if the form which is needed to be generated, totally matching with the default SMP template, no actions are needed here. Otherwise relevant methods (described below) should be used for achieving an appropriate result.
This is a final step - rendering a form. Just call method render() on an appropriate form variable (in example below it is a 'form1'):

    form1.render();

Methods of the FormComponent

The two important (and mandatory) methods have been described above (`setHiddenFields()` and `render()`):

setHiddenFields(data) Is used for setting hidden fields

    /**
         * @param {Object} data  Key - HTML name of the hidden field, Value - its value
    */

render() Render a form ( ❗ This method must always be the last one, at the very end. ❗ )

There are optional methods, used for manipulations with the form directly from LP:

🔴 settings - Allow to set some parameters of the form tag, apply custom (different from default) settings needed for the form generation

To change from internal TY page (which is by default) to external:

form1.settings.vendor = 'elq-direct';

To change leadgen form from the option with checkbox "I want Sales Contact" (which is by default) to an option without that checkbox (+all leadgen fields are visible)

form1.settings.leadGenType = "Basic";

To change leadgen form to the option WITH checkbox "I want Sales Contact"

form1.settings.leadGenType = "CA";

🔴 changeOrder(arr) OR changeOrder(arr, 'after') Changing order of the fields. By default: last item in Array (arr) - is a field, right before which should be placed the rest fields from the Array (arr). For changing the default behaviour from 'right before' to 'right after' an additional parameter 'place' (equal to 'after') should be added.

    /**
     * @param {Array} arr  - Array of HTML names of the fields
     * @param {string} place  - Equal to 'after' in case if needed to change a default behaviour
     */

Example:

form1.changeOrder(['salutation','firstName','lastName','EMSD_cust_type']); /* To move fields 'salutation','firstName','lastName' right before the 'EMSD_cust_type' field */
form1.changeOrder(['city','zipPostal'], 'after');   /* To move 'city' right after the 'zipPostal' field */

🔴 newField({ name: '', label: '', errMessage: '', type: '', options: '', value: '', subLabel: '', HTMLcode: '', })

New field declaration. (Please note, that this is just a declaration (not adding to a form). Adding a new declarated field to a form is managed via a 'newField()' method, described the next). By default declared field is an optional one. For making it mandatory use 'staticValidationRules' object or special argument in 'addField()' method.

 /**
     * 
     * @param {Object} data - Includes settings of the new field:
     * name: '',        - Mandatory: (should be matching with the HTML name field of the form)      
     * label: '',       - Mandatory
     * errMessage: '',  - Mandatory
     * type: '',        - Mandatory: (possible values for type: 'text', 'textarea', checkbox', 'radio', 'select', 'header')
     * options: '',     - only in case if type = 'select'
     * subLabel: '' // optional, just for text in coursive small font
     * HTMLcode: '' // optional if you want to add a link, for example, just add HTML code here     
     * value
         
     
*/

newField({ name: '', label: '', errMessage: '', type: '', options: '', value: '', subLabel: '', HTMLcode: ''})

Examples:

create a text field

  form1.newField({
      label: 'Text field', 
      errMessage: 'This field is mandatory', 
      type: 'text', 
      name: 'txtField',
      subLabel: '', // optional, just for text in coursive small font
      HTMLcode: '' // if you want to add a link, for example, just add HTML code here
    });

form1.newField({
    label: 'I would like to enter the prize draw ', 
    errMessage: 'This field is mandatory',
    HTMLcode: `<a href="#termsandconditions" target="_blank"> Terms and Conditions </a>`, // using the same type of quotes (backticks) in which you wrap your HTML code here will make your life much easier in case of severa lines
    type: 'checkbox', 
    name: 'prizedrawyes',
    value: 'on'
    });

!!! This example below for the multilanguage support: !!!

form1.newField({ 
    name: 'customfield2', 
    label: {en: 'English New field', fr: 'French New field'}, 
    errMessage: {en: 'English error message', fr: 'French error message'}, 
    type: 'select', 
    options: {
        en: [['opt1', 'English Option 1'], ['opt2', 'English Option 2']], 
        fr: [['opt1', 'French Option 1'], ['opt2', 'French Option 2']]
    }, 
});

🔴 addField(name) OR addField(name, placeBefore, ifMandatory) Adds a new field to LP

 /**
     * @param {string} name - HTML name of the new form field 
     * @param {string} placeBefore - HTML name of the form field, before which a new field should be added. 
     * @param {boolean} ifMandatory - by default it's 'false'. Place 'true' if this fields needs to be mandatory.
     * If this variable is absent, new field is being added to the very end of the form. 
*/

addField(name, placeBefore, ifMandatory)

Example:

  form1.addField('testChbx'); /* Adds optional field 'testChbx' to the very end of the form */
  form1.addField('testCustomField', 'custEnq'); /* Adds optional field 'testCustomField' right before the 'custEnq' field */ 
  form1.addField('address2', 'city', 'true'); /* Adds mandatory field 'address2' right before the 'city' field */

🔴 addField(name) OR addField(name, placeBefore, ifMandatory) Adds a new field to LP

 /**
     * @param {string} names - array of HTML names of the new form fields 
     * @param {string} placeBefore - HTML name of the form field, before which a new field should be added. 
     * @param {boolean} ifMandatory - by default it's 'false'. Place 'true' if this fields needs to be mandatory.
     * If this variable is absent, new field is being added to the very end of the form. 
*/

addFields(names, placeBefore)

Example:

  form1.addFields(['testChbx','testCustomField'], 'custEnq'); /* Adds optional fields right before the 'custEnq' field */

🔴 removeFields(names) Removes fields from the form

/**
    * @param {string, Array} name - HTML name of the form (can be of 'string' type (one name), or as an array of several names)
*/
removeFields(name);
removeFields([name1, name2, name3]);

Example:

    form1.removeField('address1'); /* Removes a field with HTML name 'address1' from the form */

🔴 addClass(item, cl) Adds CSS class, which can be added according to 1 of the 3 scenarios:

To a fieldset (if ID of the fieldset is provided, as 'item' parameter. On lead gen forms there are 2 fieldsets: with ID = "CA" and with ID = "leadgen")
To li, which is a wrapper of the field (if HTMl name of the field is provided as 'item' parameter)
form tag (if parameter 'item' is equal to 'form')

/**
     * @param {string} item - item shoud be equal to: ID of fieldset, HTML name of the field, or 'form'
     * @param {string} cl class name
     *      
*/
addClass(item, cl)

Examples:

Adding a CSS class 'MMM--gapTopMed' to a fieldset with ID 'leadgen':

form1.addClass('leadgen', 'MMM--gapTopMed');

Adding a CSS class 'inputLiClass' to a li, which is a wrapper of the field with HTML name 'firstName' like this:

<li class="inputLiClass">
    <input name = "firstName" ...>
</li>

form1.addClass('firstName', 'inputLiClass');

Adding a CSS class 'formTESTclass' to a form tag:

form1.addClass('form', 'formTESTclass');

🔴 removeClasses(item) Removes all CSS classes from:

A fieldset (if ID of the fieldset is provided, as 'item' parameter. On lead gen forms there are 2 fieldsets: with ID = "CA" and with ID = "leadgen")
A li, which is a wrapper of the field (if HTMl name of the field is provided as 'item' parameter)
form tag (if parameter 'item' is equal to 'form')

/**
     * @param {string} item - item shoud be equal to: ID of fieldset, HTML name of the field     * 
     *      
*/
removeClasses(fName)

Examples:

form1.removeClasses('mmmIndustry1');

🔴 setLabel(name, val) Sets a new text for label of the field

 /**
     * @param {string} name - HTM name of the field
     * @param {string} val - new Text for the label 
     */
    setLabel(name, val)

Example:

form1.setLabel('country', 'Country');

🔴 setErrMessage(name, val) Set a new text for the error message of the field

 /**
     * @param {string} name  - HTM name of the field
     * @param {string} val  - new Text for the error message  
     */
    setErrMessage(name, val)

Example:

form1.setErrMessage('EMSD_app_purp_other', 'Please specify your application type');

🔴 setTY(header, paragraph) Sets a new text for TY message

 /**
     * @param {string} header - text №1
     * @param {string} paragraph - text №2
     */
    setTY(header, paragraph)

Example:

form1.setTY('Thanks', 'Your form was sumbitted');

🔴 setOptions(name, val) Set new options in select field

 /**
     * @param {string} name - HTM name of the field
     * @param {Array of Arrays} val - // [[Backend value, Frontend value], [Backend value, Frontend value], [Backend value, Frontend value], [...]] 
     */
    setOptions(name, val)

Example:

form1.setOptions('mmmIndustry1', [
    // [[Backend value, Frontend value]
    ["Transp-Bus Mfg", "Bus Manufacturing"],
    ["Transp-Car Care Centers", "Car Care Centers"],
    ["Industrial-Chemical Mfg", "Chemical Manufacturing"],
    ["Transp-Collison Repair", "Collison Repair"],
    ["Transp-Comm & Specialty Veh Maint", "Commercial & Specialty Vehicle Maintenance"],
]);

🔴 selectedItems - (works for selects, checkboxes, radio buttons) Preselects option in select tag

Add a key, equal to a fields' HTML name and store there a value of an option, which you'd like to have preselected, like below Examples:

To make Germany be a preselected country

form1.selectedItems.country = 'Germany';

To make 'Fire Protection Engineer' be a preselected jobRole

form1.selectedItems.mmmJobRole1 = 'Engineer-Fire Protection';

Make checkbox to be checked Add a key, equal to a fields' HTML name and store there a value equal to: true

/* make checkbox with HTML name 'app1' to be checked */
  form1.selectedItems.app1 = true;

🔴 updateSelectOpts(name, ...options) Rewrites options in select field in provided order

Example: Rewrites options in select field (HTML name === "mmmJobRole1") in provided order ("Firefighter","Safety Manager","Other"_)

 form1.updateSelectOpts ("mmmJobRole1", "Firefighter","Safety Manager","Other");

🔴 hideFields(...items) items - HTML name(s) of the field(s), needed to be hidden (by adding a CSS class 'MMM--isVisuallyHidden'). Also, this method makes a field to be optional in terms of Validation.

 /**
     * 
     * @param  {...string} items - Strings of items, separated with commas
     */
    hideFields(...items)

Examples:

To hide a field with HTML name 'EMSD_cust_type'

form1.hideFields('EMSD_cust_type');

To hide fields with HTML names 'app1','app2',..., app13

 form1.hideFields('app1','app2','app3','app4','app5','app6','app7','app8','app9','app10','app11','app12','app13');

🔴 staticValidationRules Special Object for storing changes in static validation rules.

Examples:

form1.staticValidationRules = {     
        firstName: 'false',
        lastName: 'false',
        salutation: 'false',
        mmmIndustry1: 'true',
        salesRequest: 'false',     
    },

OR the same:

form1.staticValidationRules.firstName = 'false';
form1.staticValidationRules.lastName = 'false';
form1.staticValidationRules.salutation = 'false';
form1.staticValidationRules.mmmIndustry1 = 'true';
form1.staticValidationRules.salesRequest = 'false';

🔴 showOther (fName1, fName2, opt)

 /**
         * 
         * @param {string} fName1 - HTML name of the field (checkbox or SELECT)
         * @param {string} fName2 - HTML name of the dependable field        
         * @param {string} opt - Optional. Default value = "Other". Value of option in Select (fName1) field, which should trigger fName2 to appear 
         */
    showOther(fName1, fName2, opt)

Examples:

To show mandatory field 'EMSD_app_purp_other' if checkbox 'app13' is checked

form1.showOther ('app13','EMSD_app_purp_other');

To show optional field 'EMSD_jr_other' if 'mmmJobRole1' is equal to 'Other' (which is a default value)

form1.staticValidationRules.EMSD_jr_other = 'false'; // to make 'Other Job Role' field to be optional
form1.showOther ('mmmJobRole1', 'EMSD_jr_other');

To show optional field 'textField' if 'distributor' is equal to 'Some Dealer'

form1.staticValidationRules.EMSD_jr_other = 'false'; // to make 'Other Job Role' field to be optional
form1.showOther ('distributor', 'textField', 'Some Dealer');

🔴 addDependency(data) Shows/hides fieldset depending on a made choice in checkbox or SELECT field ('Yes' AND 'on' are default values)

   
         /**
     * addDependency(data) - Shows/hides fieldset depending on a made choice in checkbox or 
     * select field ('Yes' AND 'on' are default values)
     * @param {Object} data 
     * 
     * @param {Array} data.mandatory - Array of HTML names of the fields, which 
     * should be mandatory in case if trigger-event happends     * 
     * @param {string} data.fieldset - ID of the dependable element (fieldset)
     * @param {Array} data.firstOptional - HTML names of the fields, which should be optional first, and mandatory after
     * the event has been triggered
     * @param {string} data.triggerName - HTML name of the field, which should trigger an event (select or checkbox)
     * @param {string, Array} data.optionValue - optional, just value(s) for a select field, which should trigger an event ('Yes' AND 'on' are default values)
     * @param {Function} data.condition - optional, just for adding additional conditions (default one was being set up automatically).
     * data.condition is a Function, which should return Boolean
     */
        

form1.addDependency (data);

Examples:

To show fieldset with ID "leadgen" with the fields included inside when 'salesRequest' is checked (in case of checkbox) or equal to 'Yes' or 'on' in case of a SELECT field. Mandatory fields: 'company', 'city', 'address1', 'busPhone'. Even though 'company' is in another fieldset, it will become mandatory if "leadgen" fieldset will be shown, and optional, in case when "leadgen" fieldset is hidden.

   form1.addDependency({
            mandatory: ['company', 'city', 'address1', 'busPhone'],          
            fieldset: "leadgen",
            firstOptional: ['company'],
            triggerName: 'salesRequest',
            
        });

To show fieldset with ID "customFieldset" with the fields included inside when 'mmmJobRole1' is equal to 'Engineer-General' or 'Engineer-Fire Protection'. Mandatory fields: 'company', 'mmmIndustry1'.

   form1.addDependency({
            mandatory: ['company', 'mmmIndustry1'],          
            fieldset: "customFieldset",            
            triggerName: 'mmmJobRole1',
            optionValue: ["Engineer-General", "Engineer-Fire Protection"]            
        });

🔴 checkboxesGroup (namesOfgroup)

/**
     * Method for combining checkboxes into a group
     * @param {string} namesOfgroup - (mandatory) HTML names of checkboxes in format: 'chbx chbx2 chbx3' (separated by space)
     * @param {Array} data - (optional)  Object of settings   
     * @param {number} data.numMin - (optional) minimum number of checkboxes to be checked (default = 1)
     * @param {number} data.numMax - (optional) maximum number of checkboxes to be checked (default = all checkboxes)
     * @param {string} data.errorMessage - (optional) Secondary source of error message (1st prioritet is value in 'data-msg-required')
     */
form1.checkboxesGroup (namesOfgroup, {data});

Examples:

To combine checkboxes with different names into a one validation group

form1.checkboxesGroup ('app1 app2 app3 app4 app5 app6 app7 app8 app9 app10 app11 app12 app13');

form1.checkboxesGroup ('app1 app2 app3 app4 app5 app6 app7 app8 app9 app10 app11 app12 app13', {numMax: 3})

🔴 addDependencyFromCheckboxes('fNameToShow', scheme) To show/hide relevant options in SELECT field, which is dependable of checked checboxes

   
         /**
         * Shows SELECT field and generates a relevant list of options depending on a scheme of chosen checkboxes
         * @param {string} fNameToShow - HTML name of the SELECT field, which is needed to be shown
         * @param {Map} scheme - scheme of dependencies. On the left hand of the Map is a value of options in SELECT, on the right hand: an array of HTML names of checkboxes.      
         */
        

form1.addDependencyFromCheckboxes (fNameToShow, scheme);

Examples:

To show relevant Industries in SELECT field depending on a chosen checkboxes (Applications)

    let schemeForIndustry = new Map([
                  
            ['Transp-Aerospace Mfg',        				['app1', 'app2', 'app3', 'app4', 'app7', 'app8', 'app11', 'app12', 'app13']],
            ['Transp-Automotive Mfg',     					['app1', 'app2', 'app4', 'app7', 'app8', 'app11', 'app12', 'app13']],
            ['Industrial-Bearings &amp; Gears Mfg',      	['app11', 'app13']],
            ['Industrial-Chemical Mfg',      				['app5', 'app9', 'app11', 'app13']],
            ['Comms-Data Center',      						['app2', 'app3', 'app4', 'app6', 'app13']],
            ['Industrial-Electrical Equip Mfg',      		['app5', 'app7','app11', 'app13']],
            ['Industrial-Fire Protection &amp; Suppr',      ['app3', 'app13']],
            ['Industrial-Indust Machinery &amp; Equip Mfg', ['app2', 'app4', 'app6', 'app7', 'app11', 'app12', 'app13']],
            ['Industrial-Medical Devices Mfg',      		['app1', 'app2', 'app4', 'app7', 'app11', 'app12', 'app13',]],
            ['Industrial-Paints &amp; Coatings Mfg',      	['app8', 'app11', 'app13']],
            ['Utilities-Power Dist &amp; Transmission',     ['app4', 'app5', 'app13']],
            ['Utilities-Power Generation',      			['app4', 'app5', 'app13']],
            ['Electronics-Semicon &amp; Circuit Boards',    ['app1', 'app2', 'app4', 'app6', 'app8', 'app10', 'app11', 'app12', 'app13']],
            ['Industrial-Turbine &amp; Engine Mfg',      	['app4', 'app6', 'app11', 'app13']],
            ['Construction-Commercial',      	            ['app3', 'app9', 'app13']],
            ['Comms-Telecommunications',      	            ['app2', 'app4', 'app6', 'app8', 'app12', 'app13']],
                            
        ])

 form1.addDependencyFromCheckboxes('mmmIndustry1', schemeForIndustry);

🔴 addDependencyFromCheckboxes('fNameToShow', scheme) To show/hide relevant options in SELECT field, which is dependable of checked checboxes

   
         /**
         * Shows SELECT field and generates a relevant list of options depending on a scheme of chosen checkboxes
         * @param {string} fNameToShow - HTML name of the SELECT field, which is needed to be shown
         * @param {Map} scheme - scheme of dependencies. On the left hand of the Map is a value of options in SELECT, on the right hand: an array of HTML names of checkboxes.      
         */
        

form1.addDependencyFromSelect (fName1, fNameToShow, scheme);

Examples:

To show relevant Industries in SELECT field depending on a chosen option in field1

    let schemeForIndustry = new Map([
                  
            ['Transp-Aerospace Mfg',        				['option1', 'option3', 'option5']],
            ['Transp-Automotive Mfg',     					['option1', 'option4']],
            ['Industrial-Bearings &amp; Gears Mfg',      	['option1', 'option2']],
            ['Industrial-Chemical Mfg',      				['option3', 'option5']],
            ['Comms-Data Center',      						['option2', 'option3', 'option4', 'option5']],
            ['Industrial-Electrical Equip Mfg',      		['option2', 'option3']],
            ['Industrial-Fire Protection &amp; Suppr',      ['option1']],                            
        ])

 form1.addDependencyFromSelect('mmmIndustry1', schemeForIndustry);

🔴 updateHidden (f1Name, f2Name, scheme) To pass a relevant value to a hidden field, dependable from a chosen option in the SELECT field

   
    /**
     * 
     * @param {string} f1Name - HTML name of the SELECT field
     * @param {string} f2Name - HTML name of the Hidden field, value to which we need to pass (dependable from a chosen option in SELECT field)
     * @param {Map} scheme - Map of dependencies
     */
    
    form1.updateHidden (f1Name, f2Name, scheme)

Examples:

    let customScheme = new Map([
                  
            ['Transp-Aerospace Mfg',        				'value1'],
            ['Transp-Automotive Mfg',     					'value2'],
            ['Industrial-Bearings &amp; Gears Mfg',      	'value3'],
            ['Industrial-Chemical Mfg',      				'value4'],
            ['Comms-Data Center',      						'value5'],
            ['Industrial-Electrical Equip Mfg',      		'value6'],
            ['Industrial-Fire Protection &amp; Suppr',      'value7'],                            
        ])

 form1.updateHidden ('mmmIndustry1', 'hiddenField1', customScheme);

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
dist		dist
src		src
temporary here		temporary here
.gitignore		.gitignore
Common Config File Instructions.pptx		Common Config File Instructions.pptx
README.md		README.md
README_ConfigTemplates.md		README_ConfigTemplates.md
README_Display.md		README_Display.md
README_Validation.md		README_Validation.md
babel.config.js		babel.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

FormComponent

How to use

Generation of the form

(initilization of the FormComponent, including all its methods must NOT be included into the domReady)

Methods of the FormComponent

The two important (and mandatory) methods have been described above (`setHiddenFields()` and `render()`):

There are optional methods, used for manipulations with the form directly from LP:

To change from internal TY page (which is by default) to external:

To change leadgen form from the option with checkbox "I want Sales Contact" (which is by default) to an option without that checkbox (+all leadgen fields are visible)

To change leadgen form to the option WITH checkbox "I want Sales Contact"

About

Uh oh!

Releases

Packages

Languages

gsemakin/FormComponent

Folders and files

Latest commit

History

Repository files navigation

FormComponent

How to use

Generation of the form

(initilization of the FormComponent, including all its methods must NOT be included into the domReady)

Methods of the FormComponent

The two important (and mandatory) methods have been described above (setHiddenFields() and render()):

There are optional methods, used for manipulations with the form directly from LP:

To change from internal TY page (which is by default) to external:

To change leadgen form from the option with checkbox "I want Sales Contact" (which is by default) to an option without that checkbox (+all leadgen fields are visible)

To change leadgen form to the option WITH checkbox "I want Sales Contact"

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

The two important (and mandatory) methods have been described above (`setHiddenFields()` and `render()`):

Packages