Manifest
Manifest, made with Webflow by Vincent Bidaux.
ArticlesDemosCMS TimelineContact
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
August 11, 2020
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.
Fix
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.

Structure demo —

PerspectiveCascadeRotateFlatten
Check the Stucture demo
Check the staged demo
Check the demo site
This is the
Fixes
category
Most frequent solutions — Part 2
★
Floating Navbar item
★
Top 10 most frequent solutions
★
How to align DIVs
★
Multi lines message in forms
★
Posts in other categories
2020 Webflow Features Wrap-up!
★
The Perfect Button
★
CSS Background animation
★
Design with HTML5 Semantic Elements
★
Affect any element with a combo class
★
Designing with multilayered fonts
★
Master absolute positionning
★
Webflow secrets
★
Flexbox and the Grid
★
Follow me on Twitter
Webflow Designer profileMy Webflow Experts profileMy Behance portfolio

Read also

FIX
★
Most frequent solutions — Part 2
★
Floating Navbar item
★
Top 10 most frequent solutions
★
How to align DIVs
★
Multi lines message in forms
KNOW
★
Master absolute positionning
★
Webflow secrets
★
Flexbox and the Grid
MAKE
★
The Perfect Button
★
CSS Background animation
★
Affect any element with a combo class
★
Designing with multilayered fonts
Follow me on TwitterWebflow Designer Profile