How to: Advance Heading Customization

The form heading may be customized in an advanced fashion to display dynamic values as they relate to the form, with HTML enabled styling.

Steps:

1.  Select the Module link in the top left banner then select the appropriate module name link.

2.  Select the Forms tab.

3.  Then select the Default form.

4. Select the link at the top: Click here to customize the form header

5. Paste the following heading with any HTML headings or styling tags.
   <span id="customFormHeading"><h3>Default</h3></span>
   
   

6. Select OK

7. Select the Wrench icon on one of the main form fields

8. Select the Custom JavaScript tab.

9. In the init JS editor paste the below:
   // Get the heading element
   const element = document.getElementById("customFormHeading");

   // Override the Default heading text to dynamic referenced form fields
   element.innerHTML = "<span style="color:#26531f"><h3>" + formScope.formdata.customString4 + " | " + formScope.formdata.customLookup3 + "</h3></span>";
   
   

10. Customize the form fields referenced to those internal names of the fields you would like to display in the heading

11. Then Save the Default form.
    
    

    Return to the module, refresh the page, and open the form to validate the heading at the top.