# Prevent Content Flash ## Setup **Attribute**: `sf-noflash = true` **Where**: [form-container](https://deltaclan.gitbook.io/superform/essentials/form-container "mention") 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) {% hint style="warning" %} Additional CSS required. Read below. {% endhint %} ### Requirements To make `sf-noflash` effective, include the following CSS in the `` of your HTML document: #### **CSS ****required** ```html ``` 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** {% code title="index.html" %} ```html

``` {% endcode %} {% code title="styles.css" %} ```css [sf-noflash] { opacity: 0; } ``` {% endcode %} **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` {% embed url="" %} Initial load without `sf-noflash` {% endembed %} ### ✅ With `sf-noflash = true` {% embed url="" %}