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
  • Summary
  • Examples
  • 1. Using with Reactivity attributes (visibility)
  • 2. Using with Logic / Conditionals
  • Naming Form Fields Properly

Was this helpful?

  1. Essentials
  2. Variables

Form Data ($f)

Access any field’s value anywhere within a form instance.

Summary

↳ Examples

↳ Naming Form Fields Properly


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

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

Webflow Example

2. Using with Logic / Conditionals

Navigate to different steps based on user input.

HTML Example

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

Webflow Example


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

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

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

Last updated 9 months ago

Was this helpful?

🫀