Textarea Field

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

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

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.