Custom HTML

Unlike many of the options on the form designer palette, Custom HTML is not a field. Custom HTML lets you:

  • Add rich text to your form. With this field, you can style instructions for sections of your form.
  • Insert a block of your own custom HTML structure onto the form. You can use Custom HTML to create scrolling text boxes, insert images, display Laserfiche documents, and more. You can use any valid HTML markup inside of the Custom HTML container.

Learn more about using the rich-text editor for the Custom HTML block.

Settings

Editing a Custom HTML Field in the Form Designer

  1. Select the field on the canvas, and the options will appear in the right pane.
  2. Under Content, enter text in the editor, and use the rich text editor features to format the text the way you want.

    Note: The header for a field in a form is an h2 header, not an h1 header. Only the Form title of the form can be an h1 header.

  3. If you want to add HTML formatting that is not provided by the rich text editor buttons, switch to code view by selecting the </> (code view) button. Enter the desired HTML, and then select the code view button again to see the results.

    Note: In the form designer, the Custom HTML field prevents access to the window and document objects in HTML events. For example, you will be unable to use document.getElementById or window.postMessage types of JavaScript calls. Refer to this answers post to learn more about how to safely use HTML events in the form designer. Any unsupported code will display errors in the browser developer console.

  4. To configure advanced options, click the Advanced tab.
    • Under Tooltip, specify the help text that will appear when users hover over the field.
    • Under CSS classes, specify the CSS classes to assign this field. Learn more about using CSS.
  5. Select the Rules tab to create field rules specific to this field. Learn more about using rules.
  6. Your changes will be applied to the form automatically.

Note: The labels, tooltip, text above, and text below settings in the form designer support the use of simple HTML markup for formatting purposes.

Editing a Custom HTML Field in the Classic Form Designer

  1. Select it on the canvas, and click Edit.
  2. Under Content, enter text and use the rich text editor to format text the way you want.

    Note: The header for a field in a form is an h2 header, not an h1 header. Only the header of the form can be an h1 header.

  3. If you want to add HTML formatting that's not provided by the rich text editor buttons, switch to HTML view by clicking the HTML tab at the top left of the editor. Enter the desired HTML.
  4. When you are finished, click Done. Your changes will be applied to the form automatically.

Warning: The html <pre> tag may not correctly display the spacing and line breaks that you specify. See this KB article for more information.

Note: Users may see slightly different styling on Custom HTML elements than what is displayed when previewing the form in the classic form designer. If this is a concern, you can include the bootstrap.js library on the CSS and JavaScript page. Learn more about including external JavaScript files.

Creating a scrolling text box using Custom HTML

Scrolling text boxes are useful for displaying a lot of text in a small area and are most often used for license agreements and terms of conditions. You can create a scrolling text box using Custom HTML.

To create a scrolling text box, click the HTML button on the top left of the editor. In the contents of your Custom HTML block, insert the following HTML markup.

<div style="overflow:auto; height:100px; width:600px"> whatever your content is </div>