Poor CLS Reading Caused by Form Textarea?

[toad78]

Greetings!

I've been fighting with Elementor to improve a CLS issue on many posts/pages. Google PSI claims that the CLS is caused by the textarea in a form as well as content on the screenshot noted.

No doubt the reason why Google PSI is pointing the finger at the content in the left column is because of the shift of the form. However, the form textarea already has a fixed height to 'fix' that issue. I'm rather stumped on how to fix it, to be honest.

Does anyone else have a suggestion?

 

[AI Helper]

Why PSI blames the textarea (and how to stop the shift)

CLS tied to a form textarea is often not the textarea’s height, but a late change in its rendered size after CSS/fonts/JS load. With Elementor, common triggers are: webfont swap changing line-height, Elementor/3rd-party form scripts injecting validation/help text, reCAPTCHA rendering, or responsive CSS kicking in after initial paint. PSI then “points” at nearby content because that’s what moved when the form block reflowed.

Before changing anything, take a backup and reproduce in Chrome DevTools: Performance tab → enable Web Vitals → record → look for Layout Shift entries and what node caused it.

A practical fix is to reserve space for the form’s dynamic bits (errors, help text, captcha) and lock typography metrics so font swap doesn’t change heights. Add this in Appearance → Customize → Additional CSS (or your child theme stylesheet):

/[I] Reserve space for Elementor form messages (prevents push-down) [/I]/
.elementor-form .elementor-message,
.elementor-form .elementor-field-group .elementor-field-subgroup,
.elementor-form .elementor-field-group .elementor-field-textual + .elementor-field-textual {
  min-height: 24px;
}
/[I] Stabilize textarea sizing [/I]/
.elementor-form textarea.elementor-field-textual {
  min-height: 140px; /[I] keep your fixed height idea, but use min-height [/I]/
  resize: vertical;
  line-height: 1.4;
}
/[I] Reduce font-swap reflow impact [/I]/
body { font-size-adjust: 0.5; } /[I] tweak per font; test carefully [/I]/

If you’re using reCAPTCHA/hCaptcha, also reserve its space (inspect the widget container and set a fixed/min-height on it). And if Elementor is loading fonts late, try hosting fonts locally (Elementor → Settings → Advanced) or use a performance plugin that can optimize font loading (Autoptimize + local fonts, or Perfmatters). Test on mobile and desktop, since CLS often differs by breakpoint.

 

[toad78]

@AI Helper
Nodes causing Layout Shift:

 

[AI Helper]

Good catch — that output is Gravity Forms, not the textarea itself. The nodes you’re seeing are:

• The page

  <h1>

  (moves because something above/beside it changes height)
• A Gravity Forms checkbox/consent block (

  .gfield_checkbox

  )
• The Gravity Forms footer/submit area (

  .gform_footer

  )
• An Elementor accordion item (the “Free Resources” toggle)

That pattern usually means Gravity Forms is injecting/reflowing content after initial paint (conditional logic, validation message containers, consent text wrapping after fonts load, or CSS arriving late). Fix is to reserve vertical space for the parts that appear/resize.

Before changes, take a backup. Then add this to Appearance → Customize → Additional CSS (or child theme CSS) and re-test CLS:

/[I] Reserve space for GF validation/errors so layout doesn't jump [/I]/
.gform_wrapper .gfield_description,
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_validation_errors {
  min-height: 22px;
}
/[I] Consent/checkbox blocks often rewrap after fonts load [/I]/
.gform_wrapper .gfield_checkbox,
.gform_wrapper .ginput_container_consent {
  min-height: 44px; /[I] adjust to your design [/I]/
}
/[I] Keep submit area from shifting when button styles load [/I]/
.gform_wrapper .gform_footer {
  min-height: 64px; /[I] adjust [/I]/
}
/[I] If the Elementor accordion is below/near the form, prevent icon/font swap jump [/I]/
.elementor-accordion .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-title {
  min-height: 24px;
}

If you use Gravity Forms conditional logic on that form, test with it disabled (temporarily) to confirm the cause. Also check if you’re loading fonts via Elementor/Google Fonts; font swapping can rewrap the long consent label and push the form footer down. Hosting fonts locally (or forcing Swap/preload via a performance plugin) often reduces that reflow.

If you share the page URL (or the form ID and which fields use conditional logic),I can suggest tighter selectors and more accurate min-heights so you don’t add extra blank space.