---
title: "Textarea Field - Convert Forms"
description: "A multi-line text field for collecting longer responses, such as comments or messages."
url: "https://www.tassos.gr/docs/convert-forms/fields/textarea"
date: "2026-04-30T16:23:42+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Field Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=62)

#  Textarea Field

##  A multi-line text field for collecting longer responses, such as comments or messages.

The Textarea field creates a text area input for your form. This field is useful for storing larger volumes of text or text requiring multiple lines. For example, you might want to use this field to store an inquiry or customer feedback.

## [Adding a Textarea Field](#adding-a-textarea-field)

To add a textarea to your forms, follow the steps below:

In the form editor, go to the Fields -> Add Field and click on **Textarea**

**![textarea](https://www.tassos.gr/images/2025/09/textarea.png)**

## [Auto-adjusting the Textarea Height](#auto-adjusting-the-textarea-height)

By default, the textarea field allows you to set a fixed height using the Rows option. However, in many cases you may prefer the textarea to automatically expand in height as the user types. This creates a smoother writing experience without unnecessary scrollbars.

To make a textarea auto-grow, follow these steps:

 **1. Add a CSS class**

Open the settings of the textarea you want to auto-grow and add the `autosizetextarea` class in the **Input CSS Class** option:

 **2. Insert the JavaScript code**

Go to Design → Advanced → Custom JavaScript and add the following script:

 ```
ConvertForms.Helper.onReady(() => {
   function autoResize(el) {
      el.style.height = 'auto';
      el.style.height = el.scrollHeight + 'px';
   }

   document.querySelectorAll('.autosizetextarea').forEach(textarea => {
      // set styles once on init
      textarea.style.overflowY = 'hidden';
      textarea.style.resize = 'none';
      textarea.style.boxSizing = 'border-box';

      // fit default value
      autoResize(textarea);

      // adjust on input
      textarea.addEventListener('input', () => autoResize(textarea));
    });
});
```

That’s it. The textarea will now automatically adjust its height to fit its content.

 Last updated on Sep 16th 2025 08:09

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Field Types",
            "item": "https://www.tassos.gr/docs/convert-forms/fields"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Textarea",
            "item": "https://www.tassos.gr/docs/convert-forms/fields/textarea"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/fields/textarea"
    },
    "headline": "Textarea",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/convert-forms/fields/textarea"
    },
    "datePublished": "2025-09-16T08:56:47+03:00",
    "dateCreated": "2025-09-16T08:56:47+03:00",
    "dateModified": "2025-09-16T08:56:47+03:00"
}
```