Prevent Content Flash
Seamless form and form elements presentation on initial load.
Setup
Attribute: sf-noflash = true
Where: Form Container or any element
The sf-noflash
attribute is used to temporarily hide a form and/or form elements while Superform is initializing.
This prevents elements from flashing or appearing prematurely before the form is fully interactive and styled, ensuring a smoother user experience. Can be used for any element (eg. errors in initial step)
Additional CSS required. Read below.
Requirements
To make sf-noflash
effective, include the following CSS in the <head>
of your HTML document:
CSS required
This CSS rule sets opacity: 0
to any element with the sf-noflash
attribute, effectively hiding it on initial load.
Can be used to solve:
Steps (in a multistep form) flashing on initial load
Error elements flashing on initial load
HTML Example
Webflow Example
🚫 Without sf-noflash
sf-noflash
sf-noflash
✅ With sf-noflash = true
sf-noflash = true
Last updated