In the form designer, the Custom HTML field is not a field that users can insert data into. Instead, the Custom HTML element lets form creators insert static rich-text or custom HTML that will be displayed on the form as a read-only element.
With the Custom HTML field, you can:
- 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 onto the form. You can use Custom HTML to create scrolling text boxes, insert images, display documents in an IFrame, and more. You can use any valid HTML markup inside the Custom HTML container.
Custom HTML settings
To edit a Custom HTML block
- Select the collection on the canvas and click Edit in Classic Form Designer, in Form Designer the options will appear in the right pane once selected.
- Under Content, enter text and use the rich text editor to format text the way you want. You can also insert variables and images.
- If you want to add HTML formatting that's not provided by the rich text editor buttons, switch to the HTML view by clicking the HTML tab in the Classic Form Designer or the Code View button in the Form Designer. Enter the desired HTML.
- When you are finished, click Done (Classic mode only). Your changes will be saved to the form automatically.
Note: If you use headers in custom HTML, be aware that 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.
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.
Note for Classic mode: Users may see slightly different styling on Custom HTML elements than what is displayed when previewing the form in the form designer. If this is a concern, you can include the bootstrap.js library on the CSS and JavaScript page.
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>
More Applications
You can also use the custom HTML field to embed a document from WebLink or the web client in a form.
Note: Embedding other web pages within the custom HTML field using an iframe may result in missing data when printing or saving the form, and in some cases may cause the print or save operation to fail. If an iframe is required for display purposes and does not save or print as expected, use field rules to hide the field for email service tasks and save to repository service tasks.