# Form Data ($f)

## Summary

↳ [#examples](#examples "mention")

↳ [#naming-form-fields-properly](#naming-form-fields-properly "mention")

***

The special `$f` variable represents the form data values within Superform. It allows access to any field’s value anywhere in the form, enabling dynamic interaction based on user input.

* **Access Form Fields**: Retrieve the value of any form field by referencing it with `$f.fieldName`.
* **Dynamic Logic**: Utilize form field values to create dynamic and conditional navigation or actions.
* **Real-Time Updates**: Automatically updates as users fill out the form, ensuring real-time data access.

***

## Examples

Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same — works with Webflow's Custom Element and elements inside Code Embed.

### 1. Using with Reactivity attributes (visibility)

Toggle visibility based on age input's data.

**HTML Example**

{% code title="index.html" %}

```html
<!-- Form Field -->
<input type="number" name="age" />

<!-- Element to Show/Hide -->
<div sf-react="visibility($f.age >= 18)">
  Wow, you are over 18 🎉
</div>
```

{% endcode %}

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FawF3TCDT09kMAlghhms3%2FReact_Visibility_1_Fullscreen.mp4?alt=media&token=3387f01d-04cd-4a89-9077-a9dd8210f0a0>" %}

### 2. Using with Logic / Conditionals

Navigate to different steps based on user input.

**HTML Example**

{% code title="index.html" overflow="wrap" %}

```html
<!-- Form Field -->
<input type="number" name="age">

<button sf-goto="logic()" sf-logic="$f.age >= 18" sf-logic-goto="step-adult" sf-logic-fallback="step-minor">Next</button>
```

{% endcode %}

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2Fcf5hbr6f11svhV7WKEVv%2F%24f_Conditional_Simple.mp4?alt=media&token=e619cfdb-b214-45d4-bf58-d63abfae98d5>" %}

***

## Naming Form Fields Properly

When naming your form fields in Superform, following best practices ensures smoother development and avoids potential issues. Here are the key guidelines:

1. **Start with a Letter, Underscore (\_):**
   * Variable names must begin with a letter (a-z, A-Z), an underscore (\_).
   * Example: `name`, `_userName`.
2. **No Spaces:**
   * Variable names cannot contain spaces.
   * Use camelCase or underscore (\_) to separate words.
   * Example: `firstName`, `emailAddress`, `first_name`.
3. **No Emojis or Symbols:**
   * Variable names should not include emojis or symbols other than underscores (\_) or dollar signs ($).
   * Example: Avoid `name😄`, `price$`, `quantity%`.

#### **Handling Improperly Named Fields**

If you still want to use names that don't follow these conventions, such as fields with spaces or emojis, you can access them using bracket notation.

* Example:
  * Field name: `"123 lol ive space 😄"`
  * Access: `$f['123 lol ive space 😄']`

#### HTML Example

{% code title="index.html" %}

```html
<form sf="myForm">
    <!-- Properly named fields -->
    <input type="text" name="firstName" placeholder="First Name">
    <input type="email" name="userEmail" placeholder="Email">
    
    <!-- Improperly named fields accessed with bracket notation -->
    <input type="text" name="123 lol ive space 😄" placeholder="Special Field">

    <button type="submit">Submit</button>
</form>

<!-- Displaying values -->
<p>First Name: <span sf-react="text($f.firstName)"></span></p>
<p>Email: <span sf-react="text($f.userEmail)"></span></p>
<p>Special Field: <span sf-react="text($f['123 lol ive space 😄'])"></span></p>
```

{% endcode %}

Following these guidelines will help speed up your development process and ensure consistency across your form fields.&#x20;