How can I ensure that line breaks in the description box of a form in Webflow are properly displayed in the rich text field of the CMS when creating a new item through Integromat?
TL;DR
- Webflow textarea stores line breaks as
\n, but Rich Text Field expects HTML (<p>,<br>). - In Integromat, use the Replace module to convert
\nto<br>or wrap text in<p></p>. - Ensure the formatted text is mapped to the Webflow CMS Rich Text Field for correct display.
When sending form submissions from Webflow to the CMS using Make (formerly Integromat), line breaks in textarea fields (like a description box) often don't translate properly to a rich text field. Here’s how to ensure they display correctly:
1. Understand the Line Break Format
- Webflow’s textarea inputs store line breaks as
\n(new line characters). - Webflow’s Rich Text Field in the CMS expects proper HTML tags (
<p>,<br>, etc.). - Problem: If you send plain text with
\ninto the Rich Text Field, Webflow may not interpret them correctly.
2. Convert Line Breaks to HTML in Integromat
- Use the Replace module in Make (Integromat):
- Replace all
\n(newline) characters with<br>(if you want single line breaks). - Alternatively, wrap each new line in
<p></p>for proper paragraph formatting.
Example replacement:
- Input:
"This is line one.\nThis is line two." - After conversion:
"This is line one.<br>This is line two."
3. Use the Formatted Text in Webflow CMS
- When sending data to Webflow’s CMS via Integromat, ensure the processed description field (after replacing
\n) is mapped to the Rich Text field. - If needed, enable "Allow custom code" in the Rich Text settings to ensure
<br>and<p>tags render correctly.
Summary
To properly display line breaks from a Webflow textarea into a Rich Text Field, use Integromat to replace \n with <br> or wrap text in <p> tags before sending the data to Webflow’s CMS. This ensures the formatting is retained when displayed on your site.