Form Embed

Available in Advanced edition

The form embed offers a seamless way to integrate a feedback form into your application or website. Embed the form inline or as a dialog.

Installation instructions

Configuration

To customize the appearance of your embedded portal, go to Workspace > Settings > Form.

The form embed settings allow you to tailor the look and feel of the form to match your brand or audience. From the right-hand sidebar, you are able to change the title and subtitle, placeholder, color scheme, locale and more.

Alternatively you can use the form properties below to specify the configuration via code.

Overwriting the UI settings

You can overwrite the configured styles and settings of the form embed by adding custom properties to the embed code. This allows for customizing the styling when embedding the form in different locations.

When a setting is configured via the properties below, it can no longer be customized via the UI settings.

The properties are specified as attributes within the <released-form> custom HTML element.

Form Properties

The following customization options are available for the form embed.

Property	Description
form-id	The ID of the feedback form to embed.
title	The title of the form.
sub-title	The subtitle of the form.
placeholder	The placeholder text shown in the form.
position	The position of the form if shown in a dialog. Can be top-left, top-right, bottom-right, or bottom-left.
dialog	Whether the form will be shown in a dialog true or inline false.
color-scheme	The color scheme to use for the widget. Can be system, dark, or light. See configuring-dark-mode.md for more details.
locale	The locale to use for the page. Can be: en 🇺🇸 American English de 🇩🇪 German fr 🇫🇷 French es 🇪🇸 Spanish pt 🇵🇹 Portuguese nl 🇳🇱 Dutch zh 🇨🇳 Chinese

Data Attributes

Setting data attributes can be helpful to prevent unwanted interactions with 3rd party libraries. For example, to prevent scrolling issues when the Lenis library is used, you can add the data-lenis-prevent attribute to the host container.

Example:

<released-form form-id="FORM_ID" data-lenis-prevent=""></released-form>

Default values

The following default values are applied in case a property is not explicitly defined.

<released-form form-id="FORM_ID"
  title="Give feedback"
  sub-title="Please tell us the story behind your idea or issue. Instead of “add a blue button”, tell us why you need it. What problem is it solving for you."
  placeholder="Describe your problem…"
  dialog="false"
  color-scheme="system"
></released-widget>