Progress Form Fields flicker

Developer Support APIs & Integrations
1

Hi, I am embedding a Hubspot Form that has progressive fields on a non-Hubspot page. With the progressive fields, I noticed the form will load and then a split second later the progressive field will be hidden if Hubspot recognizes the user. I am using react-husbpot-form library to embed the Hubspot Form. Is there a way to avoid the flicker-like effect of hiding the progressive field?

2

Hi @tyuwebstacks,
Thank you for posting to the Community!
I understand that when embedding a HubSpot form with progressive fields on a non-HubSpot page using the react-hubspot-form library, you’re experiencing a brief flicker where the progressive field appears and then quickly disappears for recognized users. You’re looking for a way to prevent this visual flicker when the form updates.
I’d like to tag in some of our Top Contributors to see if they have experienced this behavior before.
Hi @danmoyle @deepikaverma and @ArtyCele I hope you all are having a stellar week! Have any of you experienced the behavior that @tyuwebstacks mentioned? If so, how did you resolve it?
Thank you!
Cassie, Community Manager

3

Thanks for the tag @chighsmith :blush:

Hey there @tyuwebstacks. While I haven’t personally experienced this, as I’ve typically used HubSpot CMS/Content Hub and pages, I know it’s a somewhat common behavior from others I’ve talked to or read about. As I understand it, it’s because the form must first load all fields, then check the visitor’s cookie or existing HubSpot contact data, and finally hide or replace the progressive fields after the client-side JavaScript runs. This sequence causes that visible “flash” you noticed.

The flicker cannot be fully eliminated using only built-in HubSpot or react-hubspot-form settings because it is fundamental to how HubSpot handles progressive fields on client-side code. However, I did find a few ideas for possible workarounds.

  • Hide the Form Until Progressive Logic Runs: Add a CSS rule to hide the form by default (e.g., opacity: 0; or display: none;). Then, use a callback or mutation observer to detect when the form has finished rendering and the JavaScript has run, at which point you can reveal the form. This requires custom code but offers the smoothest solution for the flicker.
  • Loading Placeholder: Instead of instantly showing the form, display a loader or skeleton screen until a short timeout or until a mutation observer detects field hiding. Then swap in the form, reducing perceived flicker.
  • Optimize Page Performance: While it won’t eliminate the issue, ensuring scripts and assets load quickly can reduce the delay and hence the visible flicker. However, this only minimizes, not removes, the issue.

Like I said, I haven’t had to fix this issue with my own clients or my own websites, so I cannot confirm 100% that these workarounds I found will fix the issue. But they’re a place to start. I hope that helps!