Superform Home

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

Was this helpful?