Build The perfect message box

Multi lines message in forms

Multi lines message in forms

Multi lines message in forms

Multi lines message in forms

By Vincent Bidaux, published on
April 27, 2017
This post has been featured on the
Webflow blog
Instead of going to the next line, the formular is sent by mistake when pressing the Enter key.
Using a text Area element instead of a text Field element.

The problem

Every once in a while a designer is facing this issue. It's as much an HTML issue than a Webflow one. Most probably, the designer has duplicated one of the two first default fields of a form block, and is trying to enter multiple lines of text into a single line form text field.

The solution

How to solve this? Instead of using a single line text field, drag a Text Area form element from the Add panel.

You'll then get all the room you want for your messages. End users can even click and drag to dimension the box as they wish. By giving a class on the Text Area element, you can control its default height, by setting a min-height value.

Visitors can still grab the handle in the lower right corner to resize the Area. With the settings we have already applied, they can only extend it, not shrink it. When they do so, the rest of the page design is just nicely pushed down.

If you want your text Area to have the best possible behavior, give it a Max Width value that is equal of the Width value for the current breakpoint. That way, the Text Area can only be manually enlarged vertically, and users can't break your design.

Check the Stucture demo
This is the
Posts in other categories