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
<style>
[sf-noflash] {
opacity: 0;
}
</style>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
<!-- Form Container with No Flash Settings -->
<div sf="myForm" sf-noflash="true"">
<form>
<!-- Step 1 -->
<div sf-step="step1">
<!-- Content for Step 1 -->
<button sf-goto="next">Next</button>
</div>
<!-- Step 2 -->
<div sf-step="step2">
<!-- Content for Step 2 -->
</div>
</form>
</div>[sf-noflash] {
opacity: 0;
}Webflow Example
🚫 Without sf-noflash
sf-noflash✅ With sf-noflash = true
sf-noflash = trueLast updated
Was this helpful?
