How to Automatically Resize Gravity Forms Textareas While You Type

1. How Autogrow Resizes Paragraph Text Fields
2. What You’ll Build
3. What You’ll Need
4. How to Set Up Autogrow on a Gravity Forms Field
   1. 1 — Enable Autogrow on a Field
   2. 2 — Set a Maximum Height
   3. 3 — Test the Field
5. Choosing Between vh and px
6. Where Autogrow Works (and Where It Doesn’t)

Gravity Forms’ Field Size setting lets you choose the starting height for a Paragraph Text field: Small, Medium, or Large.

That gives the field a set amount of space when the form first loads. But if the answer needs more room, Gravity Forms Autogrow gives the field room to adjust, starting at the height you choose and expanding as users type, up to a maximum height you set.

Let me show you how.

How Autogrow Resizes Paragraph Text Fields

Gravity Forms Autogrow (or Autogrow for short) grows the field row by row as someone types. Once it reaches the maximum height you set, a scrollbar takes over instead of the field growing further.

This works whether the field uses the standard editor or has Rich Text Editing enabled.

What You’ll Build

By the end of this guide, you’ll have a Paragraph Text field that:

• Starts at the Field Size you choose
• Expands as users type
• Stops growing once it reaches your Maximum Height
• Works with the standard editor or Rich Text Editing

What You’ll Need

• Gravity Forms (any license)
• Autogrow, installed via Spellbook — Gravity Wiz’s free plugin manager
  • To install: open Spellbook › search Autogrow › click Install
• A form with a Paragraph Text field to add Autogrow to

How to Set Up Autogrow on a Gravity Forms Field

1 — Enable Autogrow on a Field

1. Edit your form and select a Paragraph Text field.
2. Open the Appearance tab › check Enable Autogrow.

2 — Set a Maximum Height

1. Once Autogrow is enabled, the Maximum Height setting appears. It accepts px or vh.
2. Set it to whatever value you’d like — it defaults to 30vh. If you’re not sure which one to use, you can jump to the next section for help.

3 — Test the Field

1. Preview the form and type into the field.
2. Confirm it grows as you type, and that a scrollbar appears once it reaches the maximum height.

Choosing Between vh and px

Before picking a value, it helps to know what vh and px actually mean. They both do the same job — the only difference is what that height is relative to.

vh stands for viewport height, based on the height of the user’s screen. 30vh, for example, lets the field grow to about 30% of the screen height — and because it’s relative to the screen, it’s a solid default for most forms, scaling automatically across devices.

px stands for pixels, a fixed measurement that holds steady no matter the screen size. That makes it the better choice when a field needs to fit a specific space exactly, like a sidebar, modal, or tighter layout.

For a few common values to start with, check out Autogrow’s documentation.

Where Autogrow Works (and Where It Doesn’t)

• Autogrow is built for Paragraph Text fields. It doesn’t apply to other field types, like Single Line Text or Name, since those fields aren’t designed for longer, multi-line responses.
• Turning on Autogrow hides the field’s manual resize handle. This is intentional. Autogrow controls the field height, so manual dragging doesn’t compete with automatic resizing.
• Autogrow works with multi-page forms, conditional logic, and AJAX submissions — it automatically applies to any new field as soon as it shows up, without you having to do anything extra.
• Autogrow also works on Post Body fields, which can be useful for forms that submit content from the front end of a site.