Skip to main content

Forms Editor: HTML Element

Lance Radebaugh
  • Updated
 
HTML Element Overview

An HTML Element component may be added to a form to display a single HTML Element. This is useful for quickly inserting and configuring HTML into your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.

mceclip0.png

Display Tab:
  • Label: You can place the title or name in this component.
  • HTML Tag: The name of the HTML tag to display, e.g. label, h1,h2,h3.
  • CSS Class: In this setting, you can add a CSS class. Multiple classes can be added, and their class names can be separated by only a space.
  • Attributes: Attributes and their values to add to the HTML Element. This is commonly used to add href attributes to <a> tags, or src attributes to <img> tags.
  • Content: The text content of the HTML Element. While adding more child HTML tags here will adequately display them, using the Content component to quickly write and preview more complex HTML is recommended.
  • Refresh on Change: It makes the HTML Element re-renders whenever any value in the form changes. It might be useful when you want the HTML Element to display dynamic data of the other components after filling them with values during the form filling. Enter{{ data.{componentApiKey} }} into the HTML Element and enable this setting.
  • Hidden: Enabling this setting will hide your field from viewing when the form is extracted.
  • Disabled: Enabling this setting will disable the component from the form.
  • Table View: When this setting is enabled, the data on this component will only appear in the Submission list of the table view.

mceclip1.png

mceclip2.png

API Tab:

  • Property Name: You can provide the field's name in the API endpoint.
  • Field Tags: You can enter the tags for the field that can be used in the custom logic.
  • Custom Properties: You can enter any custom properties to configure this component.

mceclip3.png

Conditional Tab:

  • This component should Display: You can choose "True and False" if this component should display.
  • When the form component: You can choose if you want the component displayed after submitting it.
  • Has the value: You can choose the component's value when it will be hidden or displayed.

mceclip4.png

Layout Tab:

  • HTML Attributes: You can enter an HTML attributes map for component input in this setting.

mceclip5.png

 

Related articles