How do I use the Formatted Text Component?

Modified on Mon, 30 Sep at 10:56 AM

The Formatted Text component in Droplet allows you to add informational text, headers, links, or formatted content to your form. It is useful for adding static text or instructions without needing user interaction. With formatting options such as bold, italics, lists, and hyperlinks, it enhances the readability of your form, providing clear guidance and additional context for users.

When should I use the Formatted Text component?

The Formatted Text component works best when you need to display static text, provide instructions, or separate sections in your form. It is ideal for adding headers, policies, or any non-interactive content that helps guide users through the form.

Here are some common scenarios where a Formatted Text component is ideal:

Context
Use this component to provide users with clear instructions on how to fill out certain fields in your form.

Headers and Subheadings
Use Formatted Text to create clear sections in your form with headers and subheadings. Creating clear sections makes it easier for a users and approvers to navigate and review your form.

Policies and Disclaimers
Use this component to add legal notices, disclaimers, or privacy policies to your form.

Features & Configuration

Adding a Formatted Text component to your form is straightforward. Simply click on the Formatted Text option in the component library and drag it onto the canvas.

After placing the component, you can customize its properties in the right-hand panel:

Properties

Label
This text displays above the input field to describe what the user should enter.

Width
Choose a width (between 1 and 12).

Logic

Display Logic
Control when this component shows or hides. We have a full guide on Display Logic for you!

Attributes

Background Color
Select a background color from the palette or add your own hex color code to match your form's design.

Margin (Top, Bottom, Left, Right)
Specify the margins for the top, bottom, left, and right (in pixels) to control the spacing around your text component.

Details

ID
Each Droplet component has a unique ID to reference in other parts of your form, workflow, and notifications. It’s best to edit these IDs to make them a bit more descriptive.

Pro Tip!
You can magically merge values from other form fields in a Formatted Text component by referencing their ID with ##.

For example, to display the value from a field with the ID firstName, just type ##firstName##. It’s a great way to personalize your forms and text content.