Superform Home

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:

  1. Steps (in a multistep form) flashing on initial load

  2. 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

Step 1: Add [sf-noflash] CSS rule in the <head> of your page.
Step 2: Add the sf-noflash = true directive.

🚫 Without sf-noflash

Initial load without sf-noflash

✅ With sf-noflash = true

Last updated

Was this helpful?