Use a rich text data field component to create formatted text

How it works

A rich text data field can be embedded in your HTML form so that users can apply text styling and formatting as well as use hyperlinks and lists.

When using the rich text editor, highlighted text will show tool bar to style your text.

Setup Guide

Add Rich Text data field to your form

Add custom component to the webpage

Customize the rich text component - CSS Classes

Add Rich Text data field to your form

Create you Formli data field block or use the existing one.
Create Data Field with Type = Rich Text. Save the field and block.

Add custom component to the webpage

Open … More menu and click on the Embed on website.

Select HTML in the dropdown list.
Click on Copy code. Please note that there are two scripts that need to be added to the <head> section of your website. An additional script is required here to enable the functionality of custom elements, such as rich text editor. Paste the script code inside the <head> tag in the webpage settings.

Script requiered to use the rich text component

Click on Copy code of HTML form code. Paste it inside the <body> tag of the webpage.

Or find the <os-rich-text> tag element and copy the entire <div> around it. Paste it into the Code embed editor if you’re using Webflow.

<div>
      <label for="dfwe5q560qe">Rich text</label>
      <os-rich-text data-os-element="rich-text" data-os-uuid="dfwe5q560qe" placeholder="Enter text"  value=""></os-rich-text>
      <div data-os-element="field-error" data-os-for="dfwe5q560qe" class="os-hidden"></div>
</div>