Minimising layout shift when the Form Builder widget loads (CSS min-height or skeleton loader)

Ask the Community General Questions
1

Hello Elfsight Team,

I’m using the Elfsight Form widget on my quote page, and I’m noticing a visible layout shift when the widget finishes loading. The container initially renders at a small height, then expands once the form loads, causing the page content to move.

I’m looking for a way to stabilise the layout before the form loads. Specifically:

  • Is there a recommended CSS approach to give the widget container a minimum height that matches the final rendered form?
  • Alternatively, is there any built‑in support for a skeleton loader or placeholder that maintains the correct height until the form is fully loaded?
  • Any solution would ideally work consistently across desktop, tablet, and mobile.

If there’s a best‑practice method for preventing layout shift with the Form widget, I’d appreciate any guidance.

Thanks, Michael

3

Hi there, @Michael_Surnak :waving_hand:

Sure! I’ve shared your request with the devs and will circle back once the solution is ready :wink:

4

Thank you Max :blush:

5

Please try to add this code next to your widget’s installation code and let me know if it helped:

<style>
  .content:has(.elfsight-app-WIDGET_ID) {
    min-height: 458px;
  }
</style>

Do not forget to replace WIDGET_ID with the actual ID of your widget.

6

Thank you, Max. That seems to work quite well!

9

Awesome, you’re most welcome :wink: