Auto-expanding form text area?


I would like a form text area to automatically get “taller” the more lines someone types into it.

Currently, the one I am working with goes into “scroll” mode instead.

Here you can see it live:

And here’s my public link:

Many thanks,

Are auto-expanding form text areas possible?

I found and tested this script. You can paste it into the custom code or in a separate js-file. Appoint id for text area and paste it in the script.

function flexibleTextarea(){
	var _txt = document.getElementById('comment'); // comment is id of text area, that you want to expand
	var _minRows = 7; // height of field (number of rows)

	if (_txt) {
		function setRows() {
			_txt.rows = _minRows;
			do {
				if (_txt.clientHeight != _txt.scrollHeight) _txt.rows += 1;
			} while (_txt.clientHeight < _txt.scrollHeight);
		_txt.rows = _minRows;

		_txt.onkeyup = function(){
if (window.addEventListener)
	window.addEventListener("load", flexibleTextarea, false);
else if (window.attachEvent)
	window.attachEvent("onload", flexibleTextarea);
1 Like

Hm, interesting! I doesn’t work for me though… :confused:

1 Like

It didn’t work for me either… hmm. Where on webflow are you inserting the code, Eka? And what exact name do I appoint to my text area?


1 Like

Hi @Eka,
You probably misunderstood the original request. Christopher wants that the text area keeps expanding while user adding the text there

Oooops, my apology! Seems it works on test example. Just figured out that text area will expand after press “Enter”

1 Like

Allright, cool! :smile:

One that automatically expands is cooler…like this one:
Like this form:

Holy crap was that built in Webflow? Beautiful form!

Naah, don’t think so but its a nice effect! :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.