Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup
  • Requirements
  • Can be used to solve:
  • 🚫 Without sf-noflash
  • ✅ With sf-noflash = true

Was this helpful?

  1. Global Options

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

🚫 Without sf-noflash

✅ With sf-noflash = true

Last updated 9 months ago

Was this helpful?

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