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
- Use a text area for form input to support multi-line text.
- In Integromat, convert line breaks (
\n) to HTML<br>tags. - Set up an Integromat scenario to trigger on form submission, replace line breaks, and send data to a Webflow CMS rich text field.
Ensuring that line breaks in the description box of a form are properly displayed in the rich text field of Webflow's CMS involves a few steps. Here's how you can achieve that when creating a new item through Integromat:
1. Preserve Line Breaks in the Form
- Use a Text Area: Make sure that the form's description input is a Text Area, as it natively supports multi-line text which is important for line breaks.
2. Convert Line Breaks to HTML
- HTML Format: Integromat needs to convert line breaks in the text area input into HTML
<br>tags. This can be done using a function in Integromat to replace line breaks (\n) with<br>.
3. Set Up Integromat Scenario
- Trigger: Start with a trigger for when a new form submission occurs.
- Text Conversion: Add a function or operation to replace
\nwith<br>in the description field. - Webflow Connection: Connect to Webflow, ensuring that the rich text field in the CMS item is mapped to the converted field.
4. Update Webflow CMS Dynamically
- Create Item: Use the Webflow app in Integromat to create a new CMS item, making sure to map the converted rich text field properly.
- Rich Text: Ensure the field in Webflow's CMS is set to Rich Text to allow HTML
<br>rendering.
Summary
To display line breaks properly in a Webflow CMS rich text field, ensure your form uses a text area to capture inputs with line breaks. Use Integromat to convert these breaks into HTML <br> tags before sending the data to Webflow. This process maintains the format when creating a new CMS item.