How to send textarea content with line breaks

Hi there, do you know how to be able to send “text with line breaks” entered in the text area of the form, including line breaks?

hi @aliasmori form data are send over the wire as stringified JSON that use /n to break lines. I do not know how WF work with these fields in background but I believe that is should be fine. Try for your textarea set white-space breaking for line as pre ( preformatted text ) that should solve your request. In WF UI Typography is this option in “more type options” and each breaking option has description.

Are you sure that WF doesn’t have this set internally?

Thank you @Stan. I tried the Breaking settings of Typography’s More type options in 3 ways: Pre, Pre wrap, and Pre line. As you say, there is a change in the display in the textarea, but the line break has disappeared from the sent text. What am I missing?

hi @aliasmori like I have wrote text area line break is in HTML represented by </br> and when form data are send over the wire as stringified JSON the HTML tag </br> is replaced by /n. It all depends what are you doing after parsing JSON and where you displaying text. I do not use WF forms so I can’t tell. If you have option just check in terminal what JSON data you are recieving and if contain breaks (as it should).

1 Like

As Stan covered, when you submit a textarea in a form, the browser sends line breaks as \n’s.

Here’s how that works in Webflow-

  • If your form has an action and is sending to a webhook, the form submits directly to the webhook with the \n 's

If you are using Webflow’s form handler, then webflow.js and webflow’s server are involved in the process, and;

  • The standard Webflow email notification will not show the line breaks.
  • Downloading your form submissions to CSV will contain the line breaks

If you’re trying to setup an email notification that displays the line breaks, I prefer Basin for this.

Hmm :face_with_raised_eyebrow:

What about an email it self @memetican ?

Here Text 2 is multiline and should show line breaks where the spaces are.
This is the Webflow email notification.

image

The form submission data preview shows the same;

But the CSV export preserves the line breaks;

image

I haven’t tested Webflow’s form submission webhook but I’m 90% certain it would still contain the line breaks; I think it was just a shortsighted data->html rendering engine decision that doesn’t accommodate free-form text entry well.

Thank you @memetican. I see … As a specification of the current Webflow, it means that we can’t send “text containing line breaks”.
Are Webflow users satisfied with this specification?

Not using the default email notifications handler. Most people who want that switch to a handler that supports that, like Basin.

I can only answer for my agency and clients. In our case, we replace the native Webflow notification handler with Basin or a direct integration ( Hubspot, Pipedrive, Salesforce, etc. ) 100% of the time.

Line breaks is important for a small percentage of clients that have “describe your needs” free-text as part of the form submission. For most clients, the reason we change the handler is that Webflow’s has spam issues and the unsubscribe problem.

1 Like

@memetican Thank you so much for your detailed and specific explanation. I learned a lot.

you can use JavaScript to replace the line breaks("\n") with HTML line break tags ("<br>").

If you’re using HTML forms, just make sure you’re using instead of for the text area. When you submit the form, it should preserve the line breaks.