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

index.html

<!-- 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>

styles.css

[sf-noflash] {
  opacity: 0;
}

Webflow Example

🚫 Without `sf-noflash`

✅ With `sf-noflash = true`

Last updated 1 year ago

hashtagSetup

hashtagRequirements

hashtagCSS required

hashtagCan be used to solve:

hashtag🚫 Without sf-noflash

hashtag✅ With sf-noflash = true

Setup

Requirements

CSS required

Can be used to solve:

🚫 Without `sf-noflash`

✅ With `sf-noflash = true`